JS(6)

时钟案例

分两步进行的。
第一步： 要得到现在的 时 分 秒
比如现在是 9点整，时针指向 9 是没错的
但是如果现在是 9点半 时针应该指向的是9到10之间 才对
所以，我们不但要得到现在的小时 ，还要得到已经过去了多少分
ms = date.getMilliseconds(); // 现在的毫秒数
s = date.getSeconds() + ms / 1000; // 得到秒 1.3 s
m = date.getMinutes() + s / 60; // 得到的是分数 45.6分钟
h = date.getHours() % 12 + m / 60 ;

秒针 一圈 360 ° 一共有 60 秒 每秒 6 °
分针 一圈 360 一圈走 60次 每次 6° 每分钟 6°
时针 一圈 360 一共 12 个 每个小时走30°
完整代码：

1   <script>
2    var hour = document.getElementById("hour");
3    var minute = document.getElementById("minute");
4    var second = document.getElementById("second");
5      // 开始定时器
6     var s = 0,m = 0, h = 0, ms = 0;
7      setInterval(function() {
8            // 内容就可以了
9          var date = new Date();  // 得到最新的时间
10          ms = date.getMilliseconds(); // 现在的毫秒数
11          s = date.getSeconds() + ms / 1000;  //  得到秒 1.3 s
12          m = date.getMinutes() + s / 60;  //  得到的是分数  45.6分钟
13          h = date.getHours() % 12 + m / 60 ;
14          // console.log(h);
15          // 旋转角度
16         // 一圈  360 °     一共有 60 秒       每秒  6 °   现在是 s秒
17          second.style.WebkitTransform = "rotate("+ s*6 +"deg)";
18                       //  变化            旋转    deg  度
19          minute.style.WebkitTransform = "rotate("+ m*6 +"deg)";
20          hour.style.WebkitTransform = "rotate("+ h*30 +"deg)";
21          second.style.MozTransform = "rotate("+ s*6 +"deg)";
22                       //  变化            旋转    deg  度
23          minute.style.MozTransform = "rotate("+ m*6 +"deg)";
24          hour.style.MozTransform = "rotate("+ h*30 +"deg)";
25  
26      },30);
27  </script>

按钮不可用

button 不可以用 –属性 disabled

btn.disabled = “disabled” || btn.disabled = true;
即按钮变成灰色的。
注意：
1. 因为 button是个双标签 所以要更改他的值， 使用 innerHTML 的，不是value。
2. 关闭定时器 clearInterval(定时器名称); 定时器不再进行

this

this 指向的是 事件的调用者 ，或者是函数的使用者。
var btn.onclick = function() { this}

一般情况下，我们喜欢 var that = this;
var that = this; // 把 btn 对象给that var _this = this;

定时器之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

函数自己调用自己的过程 我们称之为 ： 递归调用
但是这样用，一定要加一个退出 if 的条件，不然成为死循环了。
目的就是为了，模拟使用 settimeout 来实现setinterval 的效果。

<script>
    var demo = document.getElementById("demo");
    var count = 5;
    var speed = 1000;
    setTimeout(goIndexPage,speed);  //  1秒钟之后去执行  goIndexPage这个函数
    function goIndexPage() {
        demo.innerHTML = "<a href='http://www.baidu.com'>本页面将在第"+count+"秒钟之后跳转页面</a>";
        count--;
        if(count <= 0)
        {
            // 如果 count 小于 0 就到了时间了   我们应该跳转页面
             window.location.href = "http://www.baidu.com";
        }
        else
        {
            setTimeout(goIndexPage,speed);  //  递归调用--自己调用自己
        }
    }
</script>

arguments 对象

function fn(a,b,c) { console.log(a+b+c); alert(arguments.length;)}
fn(1,3,4,6);
arguments.length;返回的是 实参的个数。
但是这个对象有讲究，他只在正在使用的函数内使用。
arguments.callee;
返回的是正在执行的函数。 也是在函数体内使用。 在使用函数递归调用时推荐使用arguments.callee代替函数名本身。
function fn() { console.log(arguments.callee); }
这个callee 就是 ： function fn() { console.log(arguments.callee); }

运算符

一元操作符 ++， – + - +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 =、+=、-=、*=、/=、%= 赋值

几个面试题

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

字符串对象常用方法

我们工作中经常进行字符串操作。

转换为字符串

1.2+ “” = “2” 2+”ab” = “2ab”
2. String() 转换为字符串
3. toString（基数） ; 基数就是进制

 var txt = 10;
 txt.toString(2)       二进制      1010

获取字符位置方法

charAt，获取相应位置字符（参数： 字符位置）
charCodeAt获取相应位置字符unicode编码（参数： 字符位置）
var txt = “abcedf”;
比如， txt.charAt(4); 索引号一定是从0开始 返回的结果是 d
我们根据我们输入的 位数 返回相应的 字符 。
unicode编码 是我们字符的字符的唯一表示 。

案例

小米滚动宣传窗口特效

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .xiaomi {
            width: 512px;
            height: 400px;
            border: 1px solid #f00;
            margin: 100px auto;
            overflow: hidden;
            position: relative;
        }
        .xiaomi span {
            position: absolute;
            left: 0;
            width: 100%;
            height: 200px;
            cursor: pointer;
        }
        .up {
            top: 0;
        }
        .down {
            bottom: 0;
        }
        #pic {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
<div class="xiaomi">
    <img src="mi.png" alt="" id="pic"/>
    <span class="up" id="picUp"></span>
    <span class="down" id="picDown"></span>
</div>
</body>
</html>
<script>
    function $(id) { return document.getElementById(id);}
    var num = 0; // 控制图片的top值
    var timer = null; // 定时器名称
    $("picUp").onmouseover = function(){
         // alert(11);
        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);
    }
</script>

时钟效果

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .clock {
            width: 600px;
            height: 600px;
            margin:50px auto;
            background: url(images/clock.jpg) no-repeat;
            position: relative;
        }
        .clock div {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;

        }
        .h {
            background: url(images/hour.png) no-repeat center center;
        }
        .m {
            background: url(images/minute.png) no-repeat center center;
        }
        .s {
            background: url(images/second.png) no-repeat center center;
        }

    </style>
</head>
<body>
<div class="clock">
    <div class="h" id="hour"></div>
    <div class="m" id="minute"></div>
    <div class="s" id="second"></div>
</div>
</body>
</html>
<script>
  var hour = document.getElementById("hour");
  var minute = document.getElementById("minute");
  var second = document.getElementById("second");
    // 开始定时器
   var s = 0,m = 0, h = 0, ms = 0;
    setInterval(function() {
          // 内容就可以了
        var date = new Date();  // 得到最新的时间
        ms = date.getMilliseconds(); // 现在的毫秒数
        s = date.getSeconds() + ms / 1000;  //  得到秒 1.3 s
        m = date.getMinutes() + s / 60;  //  得到的是分数  45.6分钟
        h = date.getHours() % 12 + m / 60 ;
        //console.log(h);
        //旋转角度
       // 一圈  360 °     一共有 60 秒       每秒  6 °   现在是 s秒
        second.style.WebkitTransform = "rotate("+ s*6 +"deg)";
                     //  变化            旋转    deg  度
        minute.style.WebkitTransform = "rotate("+ m*6 +"deg)";
        hour.style.WebkitTransform = "rotate("+ h*30 +"deg)";
        second.style.MozTransform = "rotate("+ s*6 +"deg)";
                     //  变化            旋转    deg  度
        minute.style.MozTransform = "rotate("+ m*6 +"deg)";
        hour.style.MozTransform = "rotate("+ h*30 +"deg)";
    },100);


</script>