• 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>
  • 相关阅读:
    ES6学习,持续更新!!!
    如何实现图片自适应
    jquery判断元素是否存在
    JS基础_对象字面量
    JS基础_基本数据类型和引用数据类型
    JS基础_属性名和属性值
    JS基础_对象的简介、对象的基本操作
    JS基础_质数练习的改进,提高程序执行效率
    JS基础_break和continue
    JS基础_打印出1-100之间所有的质数
  • 原文地址:https://www.cnblogs.com/yiningfamily/p/4976435.html
Copyright © 2020-2023  润新知