【2017-04-01】JS字符串的操作、时间日期的操作、函数、事件、动画基础
一、字符串的操作
1、转大写：
s.toLowerCase();
2、转大写：
s.toUpperCase();
3、字符串的截取：
s.substr(3,4); -从索引3开始截取，截取4位。索引从0开始。
4、将字符串按指定的字符拆开：
s.split(","); 引号内放指定的字符。返回的是一个数组。
5、字符串长度：
s.length;
6、字符串中一个字符的索引：
s.indexOf("world"); world在字符串中第一次出现的位置，返回的是索引，如果没有返回-1。
7、o在字符串中最后一次出现的位置：
s.lastIndexOf("o");
二、时间日期的操作
1、当前时间：
var d =new Date();
2、定义一个时间：
var d =new Date(1999,03,02); 1999年4月2日。
3、获取年份：d.getFullYear(); 获取月份：d.getMonth();取出来的月份少1。 获取天：d.getDate(); 获取星期几：d.getDay();
获取小时：d.getHours(); 获取分钟：d.getMinutes(); 获取秒：d.getSeconds(); 设置年份：d.setFullYear();设置月份时注意加1。
三、数学函数的操作：
1、Math.ceil(); 取上限
2、Math.floor(); 取下限
3、Math.sqrt(); 开平方
4、Math.round(); 四舍五入
5、Math.random(); 随机数，0-1之间。
四、事件
onclick 鼠标单机触发
ondblclick 鼠标双击触发
onmouseover 鼠标移入触发
onmouseout 鼠标移出触发
onmousemove 鼠标在上面移动触发
onchange 内容改变触发
onblur 失去焦点触发（焦点是指光标所在位置）
onfocus 获得交点触发
onkeydown 按下按键触发
onkeyup 抬起按键触发 可以同步显示
window.onload 浏览器的所有内容都加载玩以后触发，一个页面中只允许有一个onload事件，不建议使用
window.onresize 浏览器大小改变就触发
获取当前客户端宽度，高度：
window.onresize=fuction(){
var wid =document.documentElement.clientWidth;
var hei =document.documentElement.clientHeight;
}
阻止事件冒泡：window.event ? window.event.cancelBubble = true : e.stopPropagation();
五、动画基础
1、初步动画，匀速
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
#div1 {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
<script type="text/javascript">
document.getElementById("div1").onclick = function () {
move(this, 300);
}
//设置一个移动的方法，需要传入两个参数：移动的对象和停止的位置
function move(a, end) {
var speed = 10;
//定时器window.setInterval(function(){要循环执行的代码,循环执行的时间间隔});
var timer = window.setInterval(function () {
if (a.offsetLeft + speed >= end) {
a.style.left = end + "px"
window.clearInterval(timer);
} else
a.style.left = a.offsetLeft + speed + "px"; //样式表中left都带单位，别忘了赋值的时候加上单位。
}, 20)
}
</script>
2、初步动画，缓冲
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
#div1 {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
</style>
</head> <body>
<div id="div1"></div>
</body>
</html>
<script type="text/javascript">
document.getElementById("div1").onclick = function () {
move(this, 300)
}
function move(a, end) {
var timer = window.setInterval(function () {
//开始先获取一下当前位置
var begin = a.offsetLeft;
//速度用停止的位置减去当前位置除以一个数来记，速度会越来越小，以至于不够一个像素，然后给这个速度取上限，缓冲到速度为1px直到停止
var speed = Math.ceil((end - begin) / 30);
if (a.offsetLeft + speed >= end) {
a.style.left = end + "px";
window.clearInterval(timer);
}
else {
a.style.left = a.offsetLeft + speed + "px";
} }, 20)
}
</script>
3、动画浮起效果
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
.div1 {
width: 200px;
height: 300px;
border: 1px solid black;
float: left;
margin-right: 30px;
margin-bottom: 30px;
}
</style>
</head>
<body>
<div style="width: 100%; height: 100px;"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
</body>
</html> <script type="text/javascript"> var oDiv1s = document.getElementsByClassName('div1'); for (var i = 0; i < oDiv1s.length; i++) {
oDiv1s[i].index = i;
oDiv1s[i].onmouseover = function () {
up(this, this.index);
}
oDiv1s[i].onmouseout = function () {
down(this, this.index);
}
} //放置所有元素的定时器数组
var timers = new Array(); //浮起，a:要执行动画的对象，ind:对象的索引
function up(a, ind) {
//清空此对象当前所有的动画效果
window.clearInterval(timers[ind]); //获取此对象当前的上边距
var mtop = a.style.marginTop;
var t = 0;//设置默认值为
if (mtop.length > 0) {//如果当前对象有上边距，那么修改默认值
//将“25px”这样的格式数据截取出值
t = parseInt(mtop.substr(0, mtop.length - 2));
} //当前阴影值获取，思路同上
var bshadow = a.style.boxShadow;
var b = 0;
if (bshadow.length > 0) {
var bb = bshadow.split(' ');
b = parseInt(bb[bb.length - 1].substr(bb[bb.length - 1] - 2));
} //定时器开启，并将此定时器放入定时器集合中
timers[ind] = window.setInterval(function () {
t--;//上边距改变
b++;//阴影扩散程度改变
if (t <= -25 && b >= 25) {//停止条件
//停止时将元素锁定在目标位置
a.style.marginTop = '-25px';
a.style.boxShadow = "0 0 25px gray";
window.clearInterval(timers[ind]);
}
else {
//动画执行
a.style.marginTop = t + 'px';
a.style.boxShadow = "0 0 " + b + "px gray";
}
}, 20); } //下降，a:要执行动画的对象，ind:对象的索引
function down(a, ind) {
//清空此对象当前所有的动画效果
window.clearInterval(timers[ind]); //获取此对象当前的上边距
var mtop = a.style.marginTop;
var t = -25;//设置默认值为
if (mtop.length > 0) {//如果当前对象有上边距，那么修改默认值
//将“25px”这样的格式数据截取出值
t = parseInt(mtop.substr(0, mtop.length - 2));
} //当前阴影值获取，思路同上
var bshadow = a.style.boxShadow;
var b = 0;
if (bshadow.length > 0) {
var bb = bshadow.split(' ');
b = parseInt(bb[bb.length - 1].substr(bb[bb.length - 1] - 2));
} //定时器开启，并将此定时器放入定时器集合中
timers[ind] = window.setInterval(function () {
t++;//上边距改变
b--;//阴影扩散程度改变
if (t >= 0 && b <= 0) {//停止条件
a.style.marginTop = '0px';
a.style.boxShadow = "0 0 0px gray";
window.clearInterval(timers[ind]);
}
else {
//动画执行
a.style.marginTop = t + 'px';
a.style.boxShadow = "0 0 " + b + "px gray";
}
}, 20); } </script>
【2017-04-01】JS字符串的操作、时间日期的操作、函数、事件、动画基础的更多相关文章
- Java8 时间日期类操作
Java8 时间日期类操作 Java8的时间类有两个重要的特性 线程安全 不可变类,返回的都是新的对象 显然,该特性解决了原来java.util.Date类与SimpleDateFormat线程不安全 ...
- MySQL中的数据类型 [数值型、字符串型、时间日期型]
MySQL中的数据类型 [数值型.字符串型.时间日期型] MySQL中各数据类型 1. 数值类型(整型) 类型 数据大小 类型 (无符号:unsigned) 数据大小 存储空间 tinyint -12 ...
- Js/jquery获取当前日期时间及其它操作
var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); //获取完整的年份(4位,1970-???? ...
- js对象 1字符串对象2时间日期对象3数字对象
1字符串对象 直接对字符操作 var str = "这,是,不,是,字,符,串"; //字符串转数组 字符串.split(分隔符) var arr ...
- js字符串替换（时间转换）
转: js中字符串全部替换 废话不多说,直接发结果 在js中字符串全部替换可以用以下方法: str.replace(/需要替换的字符串/g,"新字符串") 比如: "yy ...
- 八十三：redis之redis的字符串、过期时间、列表操作
字符串操作 设置值 set key value 设置有空格的值,加引号 set username 'hello world' 获取值 get key 删除值:del key 清除所有内容:flusha ...
- js 字符串格式化为时间格式
首先介绍一下我遇到的坑,找了几个关于字符串转时间的,他们都可以就我用的时候不行. 我的原因,我的字符串是MYSQL拿出来的不是标准的时间格式,是不会转成功的. 解决思路:先将字符串转为标准时间格式的字 ...
- Cheatsheet: 2017 04.01 ~ 04.30
Other ReactXP - A LIBRARY FOR BUILDING CROSS-PLATFORM APPS Merging vs. Rebasing Better Git configura ...
- js有关时间日期的操作
var myDate = new Date();var date_string = myDate.getFullYear()+""+((myDate.getMonth()+1)&l ...
随机推荐
- GCD（关于容斥原理）
Problem Description Given 5 integers: a, b, c, d, k, you're to find x in a...b, y in c...d that GCD( ...
- web移动端Fixed在Input获取焦点时ios下产生的BUG及处理
1.现象 可以看到下面两张图,图1搜索框为fixed固定在顶部,滚动没有任何问题. 图2当光标进入搜索框时,ios自作聪明的把光标定位到中间,并且fixed属性被自动修改成了absolute.此时注意 ...
- UML类图中的关系和表示方法
类图是用来描述程序中的类以及它们之间的关系的,使用类图可以帮助我们简化对系统的理解.在UML类图中比较常见的关系有六种,它们分别是:依赖.关联.聚合.组合.泛化.实现,这六种关系中类之间的紧密程度是依 ...
- Codeforce 水题报告(2)
又水了一发Codeforce ,这次继续发发题解顺便给自己PKUSC攒攒人品吧 CodeForces 438C:The Child and Polygon: 描述:给出一个多边形,求三角剖分的方案数( ...
- Zigbee折腾之旅：（一）CC2530最小系统
最近在倒腾Zigbee,准备参加物联网全国大赛,学校有给我们发Zigbee开发板,但是对于喜欢折腾的我来说,用开发板还是不过瘾,起码也得知道怎么去画一块板子.于是乎,在百度一番后就有了下面这篇文章. ...
- 走进javascript——解开switch之谜
很早以前就觉得switch很怪异,或者说一直没太理解它,它怪异就怪异在非要给每个语句加上break;不然后面的语句就算不符合条件还是会执行,比如以下这段代码 var num = 2; switch(n ...
- [C#7] 1.Tuples（元组）
1. 老版本代码 class Program { static void Main(string[] args) { var fullName = GetFullName(); Console.Wri ...
- Eclipse的Spring IDE插件的安装和使用
Spring IDE是Spring官方网站推荐的Eclipse插件,可提供在研发Spring时对Bean定义文件进行验证并以可视化的方式查看各个Bean之间的依赖关系等. 安装 使用Eclipse M ...
- 事件日志：无法加载站点/服务的所有 ISAPI 筛选器。因此启动中止。
事件日志:无法加载站点/服务的所有 ISAPI 筛选器.因此启动中止. Service Unavailable解决 故障状态:Internet 信息服务(IIS)管理器 里 应用程序池出现错误 “应用 ...
- 使用promise手动封装ajax函数
最近在做一个单页应用,node和浏览器仅通过json传输数据,因为是只有自己用等于是锻炼一下自己,所以也不用考虑seo的问题,node端我已经写好了,但是浏览器端想要用ajax原生太麻烦,用封装的函数 ...