14day-循环数组定时器

作者: crx彭彭 | 来源:发表于2018-11-04 20:00 被阅读0次

14day-循环数组定时器
前端
数组循环定时器
数组循环定时器
数组循环定时器
前端(数组，闭包，定时器)
2018-12-02
前端笔记12
定时器的作用和应用场景
高性能iOS应用开发笔记07

if语句

语法一：
if(条件表达式){
语句...

      if语句在执行时，会先对条件表达式进行求值判断，
      如果条件表达式的值为true，则执行if后的语句，
      如果条件表达式的值为false，则不会执行if后的语句。
          if语句只能控制紧随其后的那个语句,
              如果希望if语句可以控制多条语句，
              可以将这些语句统一放到代码块中
          if语句后的代码块（即{}）不是必须的，但是在开发中尽量写上代码块，即使if后只有一条语句
      - 语法二:
          if(条件表达式){
              语句...
          }else{
              语句...
          }
  
      if...else...语句
          当该语句执行时，会先对if后的条件表达式进行求值判断，
              如果该值为true，则执行if后的语句
              如果该值为false，则执行else后的语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件判断语句</title>
    <style type="text/css">
        .box{
            width: 300px;
            height: 300px;
            background-color: gold;
        }
    </style>
    <script type="text/javascript">
        window.onload = function(){
            var oBtn = document.getElementById('btn');
            var oDiv = document.getElementById('box');
            /*oBtn.onclick = function(){
                if(oDiv.style.display == 'none'){
                    oDiv.style.display = 'block';
                }else{
                    oDiv.style.display = 'none';
                }
            }*/
            
            // alert(oDiv.style.display);//弹出空白提示框，因为div没设置过style属性
            oBtn.onclick = function(){
                if(oDiv.style.display == 'block' || oDiv.style.display == ''){
                    oDiv.style.display = 'none';
                }else{
                    oDiv.style.display = 'block';
                }
            }
        }
    </script>
</head>
<body>
    <input type="button" value="切换" id="btn">
    <br>
    <div class="box" id="box"></div>
</body>
</html>

多重条件判断语句

if语句
语法三：
if(条件表达式){
语句...
}else if(条件表达式){
语句...
}else if(条件表达式){
语句...
}else{
语句...
}

        if...else if...else
            当该语句执行时，会从上到下依次对条件表达式进行求值判断
            如果值为true，则执行当前语句。
            如果值为false，则继续向下判断。
            如果所有的条件都不满足，则执行最后一个else后的语句
            该语句中，只会有一个代码块被执行，一旦代码块执行了，则直接结束语句

条件分支语句也叫switch语句
    语法：
        switch(条件表达式){
            case 表达式:
                语句...
                break;
        case 表达式:
                语句...
                break;
            default:
                语句...
                break;
        }

    执行流程：
        switch...case..语句
        在执行时会依次将case后的表达式的值和switch后的条件表达式的值进行全等比较，
            如果比较结果为true，则从当前case处开始执行代码。
                当前case后的所有的代码都会执行，我们可以在case的后边跟着一个break关键字，
                这样可以确保只会执行当前case后的语句，而不会执行其他的case
            如果比较结果为false，则继续向下比较
            如果所有的比较结果都为false，则只执行default后的语句

    switch语句和if语句的功能实际上有重复的，使用switch可以实现if的功能，同样使用if也可以实现switch的功能，所以我们使用时，可以根据自己的习惯选择。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多重条件判断语句</title>
    <script type="text/javascript">
        var today = 4;
        // if(today == 1){
        //  alert('语文');
        // }else if(today == 2){
        //  alert('数学');
        // }else if(today == 3){
        //  alert('英语');
        // }else if(today == 4){
        //  alert('美术');
        // }else if(today == 5){
        //  alert('舞蹈');
        // }else{
        //  alert('不补习');
        // }
        switch(today){
            case 1:
                alert('语文');
                break;//结束整个switch语句
            case 2:
                alert('数学');
                break;
            case 3:
                alert('英语');
                break;
            case 4:
                alert('美术');
                break;
            case 5:
                alert('舞蹈');
                break;
            default:
                alert('不补习');
                break;//最后一个default可以不写break，但建议写上
        }
    </script>
</head>
<body>
    
</body>
</html>

数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组</title>
    <script type="text/javascript">
        //面向对象的方式创建
        var aRr01 = new Array(1,2,3,'abc');
        //直接创建
        var aRr02 = [1,2,3,'def'];//推荐使用，性能更高
        //获取数组的成员数量（长度）
        // alert(aRr02.length);//弹出4
        // alert(aRr02[3]);//弹出cdf
        var aRr03 = [[1,2,3],['a','b','c','d'],[true,false]];
        // alert(aRr03.length);//弹出3
        // alert(aRr03[1].length);//弹出3
        alert(aRr03[1][2]);//弹出c
    </script>
</head>
<body>
    
</body>
</html>

数组常用方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组常用方法</title>
    <script type="text/javascript">
        var aRr = [1,2,3,4];
        //用-连接数组元素并转为字符串
        //var sTr = aRr.join("-");//用-连接数组元素并转为字符串，弹出1-2-3-4
        // var sTr = aRr.join('');//用空串连接
        // alert(sTr);//弹出1234
        //向数组最后追加元素
        // aRr.push(5);
        // alert(aRr);//1,2,3,4,5
        //删除末尾元素
        // aRr.pop();
        // alert(aRr);//1,2,3
        //向最前面插入元素0
        // aRr.unshift(0);
        // alert(aRr);//0,1,2,3,4
        //删除第一个（索引为0的）元素
        // aRr.shift();
        // alert(aRr);//2,3,4
        //反转
        // aRr.reverse();
        // alert(aRr);//4,3,2,1
        //查找字母'b'第一次出现的索引
        var aRr2 = ['a','b','c','d','a','b','c','d'];
        var num = aRr2.indexOf('b');
        // alert(num);//1
        //从第2索引元素开始，删除1个元素
        // aRr2.splice(2,1);//删除c
        // alert(aRr2);//a,b,d,a,b,c,d
        //从第2索引元素开始，删除1个元素，再插入e
        // aRr2.splice(2,1,'e');//把c替换成e
        // alert(aRr2);//a,b,e,d,a,b,c,d
        //删除后面的abcd，改为fghi
        aRr2.splice(4,4,'f','g','h','i');
        alert(aRr2);//a,b,c,d,f,g,h,i
    </script>
</head>
<body>
    
</body>
</html>

（1）通过标签获取元素

<!DOCTYPE html> |
<html lang="en"> |
<head> |
 <meta charset="UTF-8"> |
 <title>通过标签获取元素</title> |
 <script type="text/javascript"> |
 window.onload = function(){ |
// //获取页面上所有的li |
// var aLi = document.getElementsByTagName('li'); |
 |
 //获取id为list01的ul |
 var oList = document.getElementById('list01'); |
 //再获取这个ul下的所有li |
 var aLi = oList.getElementsByTagName('li'); |
 alert(aLi.length);//8 |
// aLi.pop();//错误用法，aLi是一个类似数组的选择集，没有数组通用的一些方法 |
|
 aLi[0].style.backgroundColor = 'gold'; |
 aLi[1].style.backgroundColor = 'gold'; |
} |
 </script> |
</head> |
<body> |
<ul id="list01"> |
<li>1</li> |
<li>2</li> |
 <li>3</li> |
 <li>4</li> |
 <li>5</li> |
 <li>6</li> |
 <li>7</li> |
<li>8</li> |
 </ul> |
 <ul id="list02"> |
 <li>9</li> |
 <li>10</li> |
 <li>11</li> |
 <li>12</li> |
 </ul> |
</body> |
</html>  |

do...while循环

//1.创初始化一个变量
var j = 0;
//2.在循环中设置一个条件表达式

```
     while(j < aLi.length){
```

     /*while(j < aLi.length){
         aLi[j].style.background = 'gold';
         //3.定义一个更新表达式，每次更新初始化变量
         j++;

```
     }
```

```
     }*/
```
```
     do{
```

         aLi[j].style.background = 'gold';

```
         j++;
```
```
     }while(j < 0)
```

定时器在javascript中的作用

1、制作动画
2、异步操作
3、函数缓冲与节流
定时器类型及语法

/*
定时器：
setTimeout 只执行一次的定时器
clearTimeout 关闭只执行一次的定时器
setInterval 反复执行的定时器
clearInterval 关闭反复执行的定时器

var time1 = setTimeout(myalert,2000);
var time2 = setInterval(myalert,2000);
/*
clearTimeout(time1);
clearInterval(time2);
*/
function myalert(){
alert('ok!');
}

定时器动画

<style type="text/css">
    .box{
        width: 100px;
        height: 100px;
        background-color: gold;
        position: fixed;
        left: 20px;
        top: 20px;
    }
</style>
<script type="text/javascript">
    window.onload = function(){
        var oBox = document.getElementById('box');
        var left = 20;
        //反复循环定时器，每30毫秒修改一次盒子的left值
        var timer = setInterval(function(){
            left += 2;
            oBox.style.left = left + 'px';
            //当left值大于700时停止动画（清除定时器）
            if(left > 700){
                clearInterval(timer);
            }
        },30);
    }
</script>
</head>
<body>
    <div class="box" id="box"></div>
</body>

定时器制作时钟

<script type="text/javascript">
    window.onload = function(){
        var oBox = document.getElementById('box');
        function timeGo(){
            var now = new Date();
            // alert(now);//弹出美式时间：Wed Jun 20 2018 15:27:13 GMT+0800 (中国标准时间)
            var year = now.getFullYear();//2018年
            var month = now.getMonth() + 1;//6月弹出5//范围0-11
            var date = now.getDate();//20号
            var week = now.getDay();//3//星期几，西半球时间，范围0-6，星期日为一周的第一天，为0
            var hour = now.getHours();
            var minute = now.getMinutes();
            var second = now.getSeconds();
            // alert(hour + ":" + minute + ":" + second);//15:33:9
            oBox.innerHTML = '当前时间是：' + year + '年' + toDouble(month) + '月' + toDouble(date) + '日 ' + toWeek(week) + ' ' + toDouble(hour) + ":" + toDouble(minute) + ":" + toDouble(second);
        }
        timeGo();
        setInterval(timeGo, 1000);
}
    //此函数将星期的数字转为汉字表示
    function toWeek(num){
        switch(num){
            case 0:
                return '星期天';
                break;
            case 1:
                return '星期一';
                break;
            case 2:
                return '星期二';
                break;
            case 3:
                return '星期三';
                break;
            case 4:
                return '星期四';
                break;
            case 5:
                return '星期五';
                break;
            case 6:
                return '星期六';
                break;
        }
    }
    //此函数将不足两位的数字前面补0
    function toDouble(num){
        if(num < 10){
            return '0' + num;
        }else{
            return num;
        }
    }
</script>

14day-循环数组定时器
if语句语法一：if(条件表达式){语句... if语句在执行时，会先对条件表达式进行求值判断， ...
前端
1.数组去重 2.循环语句 3.定时器
数组循环定时器
定时器定时器在javascript中的作用1、制作动画2、异步操作3、函数缓冲与节流定时器类型及语法 /*定时...
数组循环定时器
定时器的写法: setInterval(expression,milliseconds)； setTimeout(...
数组循环定时器
定时器定时器在javascript中的作用1、制作动画2、异步操作3、函数缓冲与节流定时器类型及语法 /*定时...
前端(数组，闭包，定时器)
数组定时器定时器弹框定时器的基本用法定时器动画闭包闭包存循环的索引值闭包做私有变量计数器闭包做选项卡
2018-12-02
数组数组常用方法通过标签获取元素循环语句数组去重字符串处理的方法字符串反转计算器定时器弹框
前端笔记12
循环语句数组去重字符串处理的方法字符串翻转计算器定时器弹框定时器弹框 .pop{width: 400...
定时器的作用和应用场景
一、作用数组分块数组分块是一种使用定时器分割循环的技术，为要处理的项目创建一个队列，然后使用定时器取出下一个要处...
高性能iOS应用开发笔记07
Timer循环引用对象持有定时器定时器持有对象运行循环也持有定时器因为循环引用 dealloc 永远不会被调用 ...

14day-循环数组定时器

相关文章

14day-循环数组定时器

前端

数组循环定时器

数组循环定时器

数组循环定时器

前端(数组，闭包，定时器)

2018-12-02

前端笔记12

定时器的作用和应用场景

高性能iOS应用开发笔记07

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读