前端基本功--js实战6 11.07

2017-11-09 本文已影响0人多佳小昕

一、时钟

1.第一步：得到现在的时分秒
第二步：秒针一次走6度、分针一次走6度、时针一次走30度。

    <script type="text/javascript">
        window.onload = function () {
           var hour = document.getElementById("h");
           var minute = document.getElementById("m");    
           var second = document.getElementById("s"); 
           // 定时器开始
           var ms  = 0;
           var s = 0;
           var m = 0; 
           var h =0;
           setInterval(function()
           {
                var date = new Date();
                ms = date.getMilliseconds();
                s = date.getSeconds() + ms/1000;//得到秒数 例如 1.3s 加后面的当前时间是因为可以有过度，否则一下子就转过去。
                m = date.getMinutes() + s / 60; //30.5分钟
                h =date.getHours() % 12 + m / 60 ;//9.5小时
                second.style.WebkitTransform = "rotate(" +s*6+ "deg)"//变化属性，旋转deg度。
                minute.style.WebkitTransform = "rotate(" +m*6+ "deg)";
                hour.style.WebkitTransform = "rotate(" +h*30+ "deg)";
                //
           },1000);           

        }

  **兼容问题WebkitTransform谷歌不认识，MozTransform火狐不认识。**

二、短信验证

1.按钮不可用：
btn.disabled = "disabled" || btn.disabled =true;
2.关闭定时器：clearInterval(定时器名称)
3.实例

  <script type="text/javascript">
       window.onload = function () {
         var btn = document.getElementById('btn');
         var m = 3;
         btn.onclick = function(){
           clearInterval(timer);//先清除以防中途点击调用定时器
           this.disabled = true;
           var that = this; //事件的调用者
           var timer = setInterval(send,1000);
           function send(){
             m--;
             if(m>=0){
             that.innerHTML = "还剩余 "+m+"秒";
             }
             else{
               that.innerHTML = "点击重新发送短信";
               that.disabled = false;
               clearInterval(timer); //清除定时器，否则会一直调用ifelse下去
               m = 3;
             }
           }
         }
       }
   </script>

4.因为 button是个双标签所以要更改他的值，使用 innerHTML 的，不是value。

三、定时器之setTimeout

1.类似于定时炸弹，只执行一次。
setTimeout("函数",时间) 时间:多长时间后执行
3秒关闭广告总结：设置隐藏函数，当调用定时函数执行隐藏函数。

<script>
function $(id) {
 return document.getElementById(id);
}
function hide(id){
 $(id).style.display = "none";
}
function show(id){
 $(id).style.display = "block";
}
setTimeout(close,2000);
function close(){
 hide("right");
 hide("left");
}
</script>

2.setInterval()和setTimeout()的区别：

setInterval() 是排队执行的不管间隔时间，执行时间为主。
假如间隔时间是1秒，而执行的程序的时间是2秒上次还没执行完的代码会排队, 上一次执行完下一次的就立即执行, 这样实际执行的间隔时间为2秒。
setTimeout() 间隔时间+执行时间。
延迟时间为1秒执行, 要执行的代码需要2秒来执行,那这段代码上一次与下一次的执行时间为3秒.。
JS 页面跳转: window.location.href = ”#” ; BOM
函数自己调用自己：递归调用
用if else再次调用settimeout ：模拟使用 settimeout 来实现setinterval 的效果
arguments 对象
arguments.length; 返回的是实参的个数。
arguments.callee; 返回的是正在执行的函数，也是在函数体内使用。
在使用函数递归调用时推荐使用arguments.callee代替函数名本身。
例如： function fn() { console.log(arguments.callee); }
这个callee 就是： function fn() { console.log(arguments.callee); }

四、定时器之小米手机展示实例

```
 写了三遍，写到头晕。
```

总结：把图片分成两部分，鼠标放在上面时，执行定时器，执行的函数为满足条件时图片top变化，然后终止定时器。下面相同。鼠标离开时停止上面定时器。

       function $(id) {
                return document.getElementById(id);
            }
            var num = 0;
            var timer = null;
            $("picup").onmouseover = function(){
                clearInterval(timer);//如果不先清除其他定时器，会打架 不知道执行哪一个
               timer = setInterval(function(){
                     num -= 3;//出错，num应该在定时器中一直变化
                    num >= -1070 ? $("pic").style.top = num+"px" : clearInterval(timer);
                },20);
            }
            $("picdown").onmouseover = function(){
                clearInterval(timer);
                timer = setInterval(function(){
                     num += 3;
                    num < 0 ? $("pic").style.top = num+"px" : clearInterval(timer);
                },20);
            }
            $("picdown").parentNode.onmouseout = function(){
                clearInterval(timer);
            }

定时器的时间如果设置为0，不代表立即执行，代表立即插入队列，等所有程序执行完毕再执行！

五、运算符补充

1.一元操作符 ++， --， + ，- +5 -6
2.逻辑操作符 !， &&， ||
3.基本运算符 +, -, *, /, %
4.关系操作符 >, <, >=, <=, ===, ==, !=, !== ；
= 赋值 == 判断 === 全等
5.条件操作符（三元运算符） ? :
6.赋值运算符 +=, -=, *=, /=, %=
a+=5 a= a + 5
7.逗号运算符 , var a=0,b=0;

顺序

1. ()
2. !、-、++、--    (-10)  负号  正号
3.*、/、% 
4. +、-         （10-5）
5. <、<=、<、>=    
6. ==、!=、===、!==、  
7.&& 
8. || 
9.?: 
10. =、+=、-=、*=、/=、%=     赋值   1+2*3

题：

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;

六、字符串对象常用方法

转换成字符串的几种方式

+'' " 2+"ab"= "2ab"
String() 转换为字符串
toString(基数) 基数 = 进制
var txt = 10; txt.toString(2) ; 二进制结果是1010

获取字符位置方法
charAt()；根据位置返回字符
var txt = "; txt.charAt(2); 返回 c
charCodeAt ()：获取字符编码

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

图片1.png

检测字符串长度
思路：定义的判断函数中，先存储总的字符串长度，再定义一个存储字符编码的变量，for循环判断，当i小于字符串长度时，继续判断，字符编码0 - 127时长度加一，否则长度加二，最后返回字符串长度，在输出字符串长度判断函数！

    <script type="text/javascript">
        window.onload = function () {
        var txt = "abc哈哈哈"
        console.log(txt.length);  
        function panduan(str){
        var len = 0;
        var x = 0;
        for( i = 0 ;i <str.length;i++){
          x= str.charCodeAt(i); 
          if(x>=0 &&x<= 127)
         {
           len++;
         }
          else
         {
           len+=2;
         }
      }
        return len;
    }
        console.log(panduan(txt));
}
    </script>