Javascript的第六天

    1. 复习

   1. 节点        网页是有很多的节点组成的  。 

   元素节点   指的是   标签     li  span    

   文本节点      属性节点    

   父子兄弟        parentNode        nextSibling   

   孩子    childNodes        nodeType == 1  来判断 是否是 元素节点

   <ul>

      <li>

   最喜欢用的  children    只得到   元素节点   

  1.获取节点属性    getAttribute“title”

  2.设置节点属性    setAttribute (“class”,”one”)

  3.删除节点属性    removeAttribute(“title”)

  4. 日期函数   Date(); 

    声明:  var  date = new Date();   

    使用:  得到现在的年分    date.getFullYear(); 

            月份:  date.getMonth(); 

            日子;  date.getDate();   

            星期:  date.getDay(); 

   5. 定时器

      定时器  不需要人工操作   按照一定的时间进行某种动作。

     setInterval(“函数”,间隔时间 )   每隔 n秒去执行一次函数

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)";

6、

    1.  按钮不可用

button  不可以用       disabled  不可用的意思

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

注意:

  1. 因为 button是个双标签  所以要更改他的值, 使用 innerHTML 的,不是value。
  2. 关闭定时器   clearInterval(定时器名称);    定时器不再进行

7、

    1.  this 

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

     var  btn.onclick = function() {  this}

       

       

 

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

var that = this//  btn 对象 给 that  var _this = this;

 

    1.     定时器之  setTimeout()    

 时间去哪儿了   类似于定时炸弹 。。

 setTimeout(“函数”, 时间 )   

 

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

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

      1. 深层次的看待定时器区别

setInterval是排队执行的

假如 间隔时间是1秒, 而执行的程序的时间是2秒    上次还没执行完的代码会排队, 上一次执行完下一次的就立即执行, 这样实际执行的间隔时间为2秒

setTimeout延迟时间为1秒执行, 要执行的代码需要2秒来执行,那这段代码上一次与下一次的执行时间为3秒.

 

点击定时器

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<input type="text"/>
<button id="btn">点击发送短信</button>
</body>
</html>
<script>
    var btn = document.getElementById("btn");
    var count = 5;  // 数据的 10
    var timer = null; // 定时器的名字
    btn.onclick = function() {
        clearInterval(timer);  // 先清除掉原来的定时器
        // alert(11);
        this.disabled = true;
         //alert(this);  // this 指向的是 btn
        var that = this;  // 把 btn 对象 给 that  var _this = this;
        timer = setInterval(sendTextMessage,1000);  // 开启定时器 名字  timer
        function sendTextMessage() {
            count--;
        //this.innerHTML = "还剩余"+count+"秒";
           // alert(this); // this 指向的是 定时器  window
            //alert(that);
            if(count >= 0 )
            {
                that.innerHTML =  "还剩余"+count+"秒";
            }
            else
            {
                that.innerHTML = "重新发送短信";
                that.disabled = false;
                clearInterval(timer);  // 清除定时器
                count = 5;
            }


        }

    }
</script>
      1. 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); }

    1.  运算符

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

 

逻辑操作符 ! && ||

 

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

 

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

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

条件操作符 (三元运算符)  ? :

 

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

  a+=5    a= a + 5    

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

      1. 运算符顺序

    1  ()

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

3 *、/、%

4 +、-         10-5

5 <、<=、<、>=   

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

7 &&

8 ||

9?:

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

1+2*3

      1. 几个面试题

 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

  1. 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. 字符串对象常用方法

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

      1. 转换为字符串

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

 2. String()    转换为字符串

 3. toString(基数)  ;    基数就是进制 

 var txt = 10;

 txt.toString(2)       二进制      1010

      1. 获取字符位置方法

   charAt,获取相应位置字符(参数: 字符位置)

   charCodeAt获取相应位置字符unicode编码(参数: 字符位置)

   var txt = “abcedf”;    

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

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

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

猜你喜欢

转载自blog.csdn.net/shisjieshoufu/article/details/81272191