【2017-04-01】JS字符串的操作、时间日期的操作、函数、事件、动画基础

时间：2023-03-08 15:49:25
【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字符串的操作、时间日期的操作、函数、事件、动画基础