js基础第七天

短信发送验证倒计时案例（常用）

关闭定时器clearInterval

this 指向的是 事件的调用者 ，或者是函数的使用者。

button 不可以用 disabled 不可用的意思 意思是变成灰色不能按。

btn.disabled = “disabled” || btn.disabled = true;

因为 button是个双标签 所以要更改他的内容， 需要使用 innerHTML ，而不是value。

一般情况下，我们喜欢 var that = this;

<script>
     window.onload = function(){
         var btn = document.getElementById("btn");
         var count = 5;
         var timer = null;    这里必须要给timer给空值，不能给0
         btn.onclick = function(){
             clearInterval(timer);   在进行前首先要清定时器
             this.disabled =true;   将btn设置不可点击

            var that = this;     把btn的代表赋值给that，接下来this会代表的是定时器，而不是btn
             timer=setInterval(sec,1000);
             function sec() {
                 count--;
                 if(count>=0)
                 {
                     that.innerHTML = "已发送短信还剩"+count+"秒";
                 }
                 else
                 {
                     that.disabled = false;
                     that.innerHTML = "重新发送";
                     clearInterval(timer);  需要清定时器，否则会一直倒数。
                     count = 5;  重新赋值5就会到if中，否则永远会执行else。
                 }
             }
         }
     }
</script>

定时器2 setTimeout()

setTimeout(“函数”, 时间 ) 如果想让这个多次执行，那么需要在递归调用中使用。

setInterval(fn,5000); 每隔 5秒钟，就去执行函数fn一次

setTimeout(fn,5000); 5秒钟之后，去执行 fn 函数， 只执行一次

setInterval是排队执行的

假如 间隔时间是1秒， 而执行的程序的时间是2秒 上次还没执行完的代码会排队, 上一次执行完下一次的就立即执行, 这样实际执行的间隔时间为2秒(意思是跳过间隔，不管间隔时间，直接只算执行的时间。)

setTimeout延迟时间为1秒执行, 要执行的代码需要2秒来执行,那这段代码上一次与下一次的执行时间为3秒. 如果遇到这种情况推荐使用这个。不过这个只执行一次。

5秒之后返回首页案例（重点）

JS 页面跳转: window.location.href = ”http://www.itcast.cn” ; BOM

函数自己调用自己的过程 我们称之为 ： 递归调用

arguments对象 它只能在正在使用的函数内部使用。

arguments.callee; 返回的是正在执行的函数，它返回的是函数。 也是在函数体内使用。 在使用函数递归调用时推荐使用arguments.callee代替函数名本身。

<script>
     var demo = document.getElementById("demo");
     var count = 5;
     var speed = 1000;
     setTimeout(getIndexPage,speed);
     function getIndexPage(){
         count--;
         demo.innerHTML = "<a href ='javascript:;'>页面没有找到，本页会在"+count+"秒钟之后跳转</a>";
         if(count<=0)
         {
             window.location.href = "http://www.baidu.com";
         }
         else
         {
             setTimeout(getIndexPage,speed);

setTimeout(arguments.callee,speed);还可以这么写，arguments代表正在使用的函数，只能在函数内部使用。
         }
     }
</script>

5秒后漂浮广告自动消失

！important天王盖地虎，小鸡炖蘑菇

<script>
     function $(id){
         return document.getElementById(id);
     }
     function hide(id ){
         $(id).style.display= "none";
     }
     function show(id){
         $(id).style.display = "block"
     }
     a=setTimeout(closeAd,5000);
     function closeAd() {
         hide("left");
         hide("right");
     }
     // 这个如果想要做再打开是怎么做？
     /*clearInterval(a);
     setTimeout(showAd,5000);
     function showAd(){
         show("left");
         show("right");
     }*/
</script>

小米图片上下滚动案例

要使用定时器，先清除定时器。

clearInterval(timer);

<script>
     function $(id){return document.getElementById(id);}
     var num = 0;
     var timer =null;
     $("picUp").onmouseover = function() {
         clearInterval(timer);
         timer=setInterval(function(){
             num=-3;
             num>=-1070 ? $("pic").style.top = num +"px" : clearInterval(timer);
         },30);
         $("picDown").onmouseover = function() {
             clearInterval(timer);
             timer = setInterval(function(){
                 num++;
                 num<0 ? $("pic").style.top = num+"px" : clearInterval(timer);
             },30);
         }
         $("picUp").parentNode.onmouseout = function() {
             clearInterval(timer);
         }
     }

定时器顺序

结果为1,3,2.因为这种定时器是在其他执行完之后执行，就算是时间设定为0，只是表示插入队列，但是不是立即执行。需要等待前面的执行完毕，同时它不能保证执行时间，需要取决于js线程是拥挤还是空闲。

常用运算符

一元操作符 ++， -- + - +5 -6

逻辑操作符 ! && || 与或非

基本运算符 +, -, *, /, %

关系操作符 >, <, >=, <=, ===, ==, !=, !==

= 赋值 == 判断 === 全等

条件操作符 （三元运算符） ? :

赋值运算符 +=, -=, *=, /=, %=

a+=5 a= a + 5

逗号运算符 , var a=0,b=0;

运算优先级

1 ()

2 !、-、++、-- (-10) 负号 正号

3 *、/、%

4 +、- 10-5

5 <、<=、<、>=

6 ==、!=、===、!==、

7 && 与

8 || 或

9?:

10 =、+=、-=、*=、/=、%= 赋值

1+2*3

逻辑运算符（面试题）

运算顺序：！>&&>||

1. a&&b 结果是什么？

如果a 为假 ，则返回 a

如果a 为真 ，则返回 b

&&都真为真，||有真就真，！都假为假

var aa = 0&&1;

alert(aa) // 0

var bb = 1&&0;

alert(bb); //0

var cc = 1&&10;

alert(cc); // 10

a||b

如果 a 为假 则返回b

如果 a 为真 则返回a

console.log(0||1); 1

console.log(1||0); 1

console.log(1||5); 1

console.log(5||1); 5

var a = 1 && 2 && 3;

console.log(a); 3

var b = 0 && 1 && 2;

console.log(b); 0

var c = 1 && 0 && 2;

console.log(c); 0

%=

a+=3

a = a % 3;

注意&&优先级高于||，所以当碰到这两个都有的时候要先算&&，如果两个&&那就先算前面的。

字符串对象常用方法

1. + “” 2+ “” = “2” 2+”ab” = “2ab”

2. String() 转换为字符串

3. toString（基数） ; 基数就是进制

var txt = 10;

txt.toString(2) 二进制 1010

2进制除法

获取字符位置的方法

charAt，获取相应位置字符（参数： 字符位置）

charCodeAt获取相应位置字符unicode编码（参数： 字符位置）

var txt=”abcdefg”;

alert(txt.charAt(3));

结果为c

比如， txt.charAt(4); 索引号一定是从0开始 返回的结果是 d

我们根据我们输入的 位数 返回相应的 字符 。

unicode编码 是我们字符的字符的唯一表示 。

除了汉字外的键盘上所有的键都有unicod编码，可以用来检测按了键盘中的哪个键，每个键都对应唯一的字符。只要在0-127个字符里都是键盘上的，而大于的话肯定是有汉字或者双字节字符。

面试，常用多写，一般考字符串的长度，让写代码

<script>
     var txt = "what are you 弄啥咧!好的";
     console.log(txt.length);
     function getStringLength(str) {
         var len = 0; //存储总长度
         var c = 0;  // 存储每一个编码
         for(var i=0;i<str.length;i++)
         {
             c = str.charCodeAt(i);
             //alert(c);
             if(c>=0 && c<=127)
             {
                 len++;
             }
             else
             {
                 len += 2;
             }
         }
         return len;
     }

     console.log(getStringLength(txt));
</script>

时钟案例

分两步进行的。

第一步： 要得到现在的 时 分 秒

但是这里面有一个小玄机 。

比如现在是 9点整 时针指向 9 是没错的

但是如果现在是 9点半 时针应该指向的是 9到10 之间 才对

所以，我们不但要得到现在的小时 ，还要得到 已经过去了多少分

旋转角度原理

秒针 一秒 走多少度呢 ？

一圈 360 ° 一共有 60 秒 每秒 6 °

分针 一圈 360 一圈走 60次 每次 6° 每分钟 6°

时针 一圈 360 一共 12 个 表盘没有24小时 每个小时 走 30

<script>
     window.onload = function() {
         var hour = document.getElementById("hour");
         var minute = document.getElementById("minute");
         var second = document.getElementById("second");
         var h= 0,m= 0,s= 0,ms=0;
         setInterval(function() {
             var date = new Date();
             ms = date.getMilliseconds();
             s =date.getSeconds()+ms/1000;
             m =date.getMinutes()+s/60;
             h = date.getHours()%12+m/60;
             second.style.webkitTransform = "rotate("+s*6+"deg)";
             minute.style.webkitTransform = "rotate("+m*6+"deg)";
             hour.style.webkitTransform = "rotate("+h*30+"deg)";
         },10);
     }
</script>