• js基本知识6


    1.2    复习
       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.3      时钟案例
    分两步进行的。 
    第一步:  要得到现在的 时 分 秒   
    但是这里面有一个小玄机 。  
      比如现在是 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 个 表盘没有24小时    每个小时 走   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>
    1.4     按钮不可用
    button  不可以用       disabled  不可用的意思
    btn.disabled = “disabled”     ||   btn.disabled = true;  
       灰色的
    注意:
    1. 因为 button是个双标签  所以要更改他的值, 使用 innerHTML 的,不是value。
    2. 关闭定时器   clearInterval(定时器名称);    定时器不再进行
    1.5      this  
        this 指向的是 事件的调用者 ,或者是函数的使用者。
         var  btn.onclick = function() {  this} 
     一般情况下,我们喜欢 var that = this;
    var that = this;  // 把 btn 对象 给 that  var _this = this
    1.6        定时器之  setTimeout()     
     时间去哪儿了   类似于定时炸弹 。。
     setTimeout(“函数”, 时间 )    
     setInterval(fn,5000);      每隔 5秒钟,就去执行函数fn一次
     setTimeout(fn,5000);     5秒钟之后,去执行 fn 函数, 只执行一次
    1.6.1    深层次的看待定时器区别
    setInterval是排队执行的
    假如 间隔时间是1秒, 而执行的程序的时间是2秒    上次还没执行完的代码会排队, 上一次执行完下一次的就立即执行, 这样实际执行的间隔时间为2秒
    setTimeout延迟时间为1秒执行, 要执行的代码需要2秒来执行,那这段代码上一次与下一次的执行时间为3秒. 
    1.7    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() {
            count--;
            demo.innerHTML = "<a href='http://www.baidu.com'>本页面将在第"+count+"秒钟之后跳转页面</a>";
            if(count <= 0)
            {
                // 如果 count 小于 0 就到了时间了   我们应该跳转页面
                 window.location.href = "http://www.baidu.com";
            }
            else
            {
                setTimeout(goIndexPage,speed);  //  递归调用  自己调用自己
            }
        }
          辞海    10万字      2500 汉字  1000次常用汉字   
    1.7.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.8     运算符
    一元操作符 ++-- + -       +5   -6
    逻操作符 ! && ||
    基本运算符 +, -, *, /, %
    关系操作符 >, <, >=, <=, ===, ==, !=, !==
     = 赋值    == 判断    === 全等     
    条件操作符 (三元运算符)  ? :
    赋值运算符 +=, -=, *=, /=, %= 
      a+=5    a= a + 5     
    逗号运算符 ,   var  a=0,b=0;  
    1.8.1    运算符顺序
        1  () 
    2  !-++--    (-10)  负号  正号
    3 */、% 
    4 +-         10-5
    5 <<=<>=    
    6 ==!====!==7 && 
    8 || 
    9?: 
    10 =+=-=*=/=、%=     赋值 
    1+2*3 
    1.8.2    几个面试题
     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
    2. 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.9    字符串对象常用方法
    我们工作中经常进行字符串操作。 
    1.9.1    转换为字符串
     1. + “”       2+ “”  =22+”ab”   =  “2ab” 
     2. String()    转换为字符串 
     3. toString(基数)  ;    基数就是进制  
     var txt = 10;
     txt.toString(2)       二进制      1010
    1.9.2    获取字符位置方法
       charAt,获取相应位置字符(参数: 字符位置) 
       charCodeAt获取相应位置字符unicode编码(参数: 字符位置)
       var txt = “abcedf”;     
       比如,  txt.charAt(4);    索引号一定是从0开始    返回的结果是 d
       我们根据我们输入的 位数 返回相应的 字符 。
       unicode编码  是我们字符的字符的唯一表示 。
  • 相关阅读:
    TextEdit 使用Mask验证输入格式为邮箱
    大牛博客收藏
    WPF的Dispatcher类里的BeginInvoke,Invoke,InvokeAsync
    DispatcherPriority 枚举
    WPF 线程处理
    Winform UI线程和处理线程交互(进度更新显示)
    C# DataTable 类使用
    string.Format对C#字符串格式化
    C# 线程学习记录
    WPF 控件库
  • 原文地址:https://www.cnblogs.com/yangguoe/p/8185209.html
Copyright © 2020-2023  润新知