012day定时器，行内操作样式，内外部样式的获取，DOM的用法

一、定时器方法
定时器方法：setInterval. window对象的方法。直接调用。
作用：用于间隔执行某个函数。
语法：setInterval(callback,time);
callback：可以是有名函数的名字，或者是匿名函数。
time：callback 函数被间隔执行的时间，单位毫秒。
返回：返回定时器对象编号。该编号是唯一的。是一个整数。
定时器编号是一个从1开始的自然数。递增的。
如果想停止定时器函数。clearInterval(timer);
timer：想要停止的定时器的编号。
注意：定时器对象可以设置任意个。
定时器方法和循环使用的区别：
1：定时器方法是异步的。循环是同步的。
2：定时器回调的函数可以指定间隔的时间，循环没有办法指定循环间隔执行的时间。
3：定时器方法的停止需要依赖于clearInterval方法。循环的结束依赖于
break，或者是循环条件。

<button id="start">开始点名</button>
<button id="stop">停止点名</button>

<script>
    //每隔一秒页面随机输出一个学生的名字
    function test() {
    
        //获得页面元素
        var btn = document.getElementById ("start");
        var stop = document.getElementById("stop");
        var timer = 0;
        const INTERVAL = 100;
        var stopTimer = [];
        //开始按钮
        btn.onclick = function () {
    
            // if(timer >0 )
            //     return;
            timer = setInterval (shwoRandomName,INTERVAL);
            stopTimer.push(timer);
            console.log (timer);
        }
        //停止按钮
        stop.onclick = function () {
    
            while(stopTimer.length > 0){
    
                clearInterval(stopTimer.pop());
            }
        }
    };


    var shwoRandomName = function () {
    
        var names = ["洋洋", "小朱", "小超", "小亚", "阔气"];
        var index = ~~(Math.random () * names.length);
        //获得span
        var span = document.querySelector ("span");
        span.innerHTML = names[index];
    }
    shwoRandomName();
    test();
</script>

二、DOM操作行内样式
DOM 操作css行内样式
通过修改元素对象的style属性来实现对元素样式的修改。
语法：
设置：
元素对象.style.css样式名 = 样式值;
获得
元素对象.style.css样式名
注意：
使用js获得和修改元素对象的样式属性通过style属性。如果样式名由多个单词构成
不能使用- 中划线 分隔，使用驼峰命名法。
style的一个属性：
style.cssText : 得到的是元素对象的样式的字符串表示形式。
补充：元素对象.style.css样式名 = 样式值; 这种方式没设置一个样式，就会造成页面重新的渲染。
通过 元素对象.style.cssText = “全部样式内容”；只会产生一次的重绘。效率更好。

<script>
    var box = document.getElementById("box");
    //获得div的样式
    console.log (box.style.width);//200px
    console.log (box.style.height);//200px
    console.log (box.style.backgroundColor);//red

    //设置
    box.style.width = "100px";
    box.style.height = "100px";
    box.style.fontSize = "70px";
    box.style.backgroundColor = "#ffffff";
    box.style.textAlign = "center";
    box.style.lineHeight = box.style.height;

    //
   /* width: 100px; height: 100px; background-color: rgb(255, 255, 255); font-size: 20px; border: 1px solid black; text-align: center; line-height: 100px;*/
    console.log (box.style.cssText);
    //通过cssText，修改样式。之前的内容会被覆盖掉。
    box.style.cssText = "width: 200px; height: 200px; background-color: rgb(255, 255, 255);";
    box.style.cssText += "line-height: 200px;";
    box.style.cssText += "text-align: center;";

    //随机的得到一个颜色
    var randomColor = function () {
    
        var ran = ~~(Math.random()*(0xffffff+1));
        var hexColor = '#'+ran.toString(16);
        box.style.backgroundColor = hexColor;
    };
    //需求：每隔100ms随机设置div的背景色
    var timer = setInterval(randomColor,100);

</script>

三、通过style的方法来操作样式
通过style样式对象的方法来操作元素的样式
1:设置样式：元素.style.setProperty(样式名,样式值).
2:获得样式：元素.style.getPropertyValue(样式名)
3:删除样式: 元素.style.removeProperty(样式名)
注意：样式名，如果多个单词，使用中划线分隔。

<script>
    //获得div
    var div = document.querySelector ("div");
    div.innerHTML = "上课别睡觉";
    //添加设置样式
    div.style.width = "200px";
    div.style.setProperty