Javascript

js与定时器

本文主要是介绍js与定时器，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！ 
<script>
    var a = 1;
    //do while循环每次都会先去执行一次,不论条件是否满足
    do{
        console.log(a)
        a++;
    }while (a<10);
</script>
======================
<script>
    // 计算1-100的和
    var i = 1;
    var sum = 0;
    while (i<=100){
        sum += i;
        i ++;
    }
// 控制台打印
console.log(sum)
</script>
======================
<script>
    var str1 = 'helloworld'
    // console.log(typeof str1);

    // length
    console.log(str1.length);
    // split() 切割
    // console.log(str1.split('l'));

    // indexOf()  跟python的find方法一样
    // console.log(str1.indexOf('o'));
    // 查询元素,返回索引,如果元素不存在,则返回-1
    // console.log(str1.indexOf('l',3,6));
</script>
==========================
<script>
    // 定义数组
    // var list1 = ['赵嗯','蛮夷','谢涛','牧民'];
    // console.log(list1[2]);//查询索引为2的元素

    //list1[2] ='魔创';  //修改索引为2的值
    // console.log(list1)

    // push 追加元素     //在后面添加,可以添加多个
    // list1.push('搁浅','嘚瑟');
    // console.log(list1)

    // unshift 向左添加
    // list1.unshift('笨拉拉','艾博');
    // console.log(list1);

    // pop 删除最后一个元素
    // list1.pop();
    // console.log(list1);

    // shift 删除最左边的一个元素
    // list1.shift();
    // console.log(list1)

    // indexOf 查询指定元素

    //slice 切片 左闭右开  不可以加入步长
    // console.log(list1.slice(0,4));

    // splice 删除  删除后面2个
    // console.log(list1.splice(2));

    //join 拼接
    // console.log(list1.join('$'));

    // sort 排序 reverse 反序
    // list2 = [5,8,3,1,6]
    // list2.sort() //升序
    //list2.sort().reverse()  //反序
    // console.log(list2)

    // concat 合并
    list3 = [2,3,4,]
    list4 = [5,6,7]
    list5 = [8,9,10,11]
    list = list4.concat(list3).concat(list5);
    console.log(list)

</script>
=======================
<script>
    // π
    // var x = Math.PI;
    // console.log(x);

    // 开方
    // var y = Math.sqrt(25);
    // console.log(y);

    //绝对值
    // var a = -5.98;
    // console.log(Math.abs(a));

    // 取整  四舍五入
    // var c =Math.round(2.4);
    // console.log(c);

    // 向上取整  值为(7)
    // var d = Math.ceil(6.3);
    // console.log(d);

    // 向上取整  值为(6)
    // var e = Math.floor(6.3);
    // console.log(e);


    // max min
    // console.log(Math.max(1,8,7,9));
    // console.log(Math.min(1,8,7,9));

    // 随机数 random 生成0-1之间的随机数
    // console.log(Math.random());
     // 随机数 random 生成10-100之间的随机数
    console.log(Math.random()*100);

    var str1 = '122.2helkp123';
    // parseInt 转换为整数
    console.log(parseInt(str1))
    // parseFloat 转换为小数
    console.log(parseFloat(str1))

    // toFixed(保留的位数) 保留小数
</script>
===================
<script>
     var data = new Date();

    // 获取年
    console.log(data.getFullYear());

    // 获取月 加1才是当前的月份
    // console.log(data.getMonth()+1);

    // 获取日
    // console.log(data.getDate());

    // 获取时
    // console.log(data.getHours());

    // 获取分
    // console.log(data.getMinutes());

    // 获取秒
    // console.log(data.getSeconds());

    // 时间搓 Date.now  当前时间-格林威治时间
    // var now = Date.now()
    // console.log(now)

    // //00天02小时30分钟02秒
    // var mon = data.getMonth()+1;
    // console.log(mon);
    // if (mon<10){
    //     mon = '0' + mon;
    // }
    // console.log(mon);
</script>
============================
<script>
    var btn = document.querySelector('div');
    // function func1() {
    //     alert('我是一个函数')
    // }
    // func1();
    // btn.onclick = func1;

    // 匿名函数
    var func = function () {
        console.log('我是一个匿名函数')
    }
    func();
</script>
============================
<script>
    // 定义函数的时候给了几个形参,调用的时候就传几个实参
    // 如果实参比形参多,那就取前面的实参 (后面的就会不要)
    //如果形参比实参多,结果不会报错,依旧会执行 (NaN)
    // function  fi(x,y,z) {
    //     console.log(x+yxz);
    // }
    // f1(10,20,30,40)

    // 不定长
    function f2() {
        console.log(arguments)
        console.log(arguments[0])
        // 返回值 函数的出口, 函数遇到return就结束了,下面的代码不会取执行
        return 2
    }
    f2(2,3,4,5,6,7);
</script>
===========================
<script>
    // 全局 局部
    // 写在script中的就是全局变量
    //写在函数中的就是局部变量

    // 在函数内部,没有声明的变量,直接定义的变量也是全局变量
    // var a = 20;
    // function f1() {
    //     //全局变量
    //     a = 10;
    //     return a
    // }
    // console.log(f1())
    // console.log(a)

    // a is not defined 报错
    // console.log(a);

    // undefined  未定义
    console.log(a);
    var a =10;

</script>
===========================
<script>
    // 预解析 代码you阅览器解析  js引擎 预解析 ,执行代码
    // 预解析,把js当中的所以的var,还有function提升倒当前作用域的最前面
    // 变量预解析     函数预解析
    // 变量预解析: 把所以声明var提升到当前作用域的最前面,不会提升赋值操作
    // 函数预解析: 把所以函数声明var放到作用域的最前面,不会调用函数

    // a is not defined 报错
    // console.log(a);

    // undefind (未被定义)
    // console.log(a);
    // var a = 10;
    // 相当于
    // var a;
    // console.log(a);
    // a = 10;


    // 10
    // fi()
    // function f1() {
    //     console.log(10)
    // }

    func()
    var func = function f2() {
        console.log(20)
    }
    // 相当于
    var func;
    func();
    func = function f2() {
        console.log()
    }


</script>
========================
<script>
    // 声明是对象? object  python的类
    // 对象有哪些东西? 属性 ,方法
    var  obj = {
        //属性
        'name':'zhaoen',
        'age':20,
        // 方法
        Sayhi:function () {
            console.log('我是赵嗯,hello')
        }
    }
    // 调用对象
    console.log(obj.name);
    console.log(obj['age']);
    obj.Sayhi();


    // 通过工厂模式创建对象
    function Preson() {
        this.name = name;
        this.age = age;
        this.Sayhi = function () {
            console.log('我是'+this.name+'我今年'+this.age+'岁')
        }
    }
    var zhaoe = new Person('赵嗯',20);
    console.log(zhaoe.name);
    zhaoe.Sayhi()
</script>
==================================
<button>清空定时器</button>
<script>
    var btn = document.querySelector('button');


    // setTimeout(函数,延迟毫秒数)

    var timer = setTimeout(function () {
        console.log('明天周末,想想好开心')
    },3000)

    // clearTimeout 清空定时器,根据定时器的名字进行清空
    btn.onclick = function () {
        clearTimeout(timer)
        console.log('成功清除!')
    }

</script>
=====================================
<button>开始计时</button>
<button>结束计时</button>
<script>
    // setInterval 每隔这个延迟时间,就取调用这个函数,重复使用
    //       清除定时器
    var begin = document.getElementsByTagName('button')[0];
    var end = document.getElementsByTagName('button')[1];

    begin.onclick = function () {
        timer = setInterval(function () {
            console.log('我执行了')
        },1000)
    }
    end.onclick=function () {
        clearInterval(timer)
    }
</script>
======================
<input type="button" value="获取验证码">
<script>
    var btn = document.querySelector('input');

    var surplus = 6;
    btn.onclick = function () {
        // 定时器
        timer = setInterval(function () {
            // 判断时间是否为0
            if (surplus===0){
                // 按钮不再是灰色,现在可以点击了
                btn.removeAttribute('disabled');
                surplus = 6;
                // 重新开始,清除上次的定时器
                clearInterval(timer);
            }else{
                // 不被点击
                btn.setAttribute('disabled',true);
                btn.value = '重新发送('+surplus+')'
                surplus --;
            }
        },1000)
    }
</script>
这篇关于js与定时器的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航