黄阿信的个人博客

js对象控制CSS

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        p {
            color: brown;
            width: fit-content;
            height: auto;
            background-color: aquamarine;
        }
    </style>
</head>

<body>
    <p id="p_id">这是一段测试的文字</p>
    <button onclick="change()">改变背景颜色</button>
    <script>
        function change() {
            document.getElementById("p_id").style.backgroundColor = "#ffffff";
        }
    </script>
</body>

</html>

其他的效果类似，方法都是先找到要改变的元素，然后设置新的CSS样式。

计时器

1.计时事件

通过JavaScript，我们可以在一个需要的时间间隔之后执行我们的任务，而不是在函数被调用后立即执行，我们称之为计时事件。

2.计时方法

setInterval(code,millisec[,"lang"])：间隔指定的毫秒数不停地执行指定的代码

参数描述

code 必需。要调用的函数或要执行的代码串。

millisec 必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。

例如：
```
<p id="time_p"></p>
<script>
    var demo_time = setInterval( "getTime()",1000);
    function getTime(){
        var nowDate = new Date();
        var nowTime = nowDate.toLocaleTimeString();
        document.getElementById("time_p").innerHTML = nowTime;
    }
</script>
```
那我们想要停止执行怎么办？用下面这个方法就可以了
```
clearInterval(demo_time);
```
setTimeout(code,millisec[,"lang"])：延迟指定的毫秒数后执行指定的代码

例如
```
var demo_time = setTimeout( "getTime()",1000);//一秒后执行一次getTime()
```
虽然说是执行一次，但是我们可以利用递归进行不断调用，从而实现setInterval()类似的效果，如
```
<p id="time_p"></p>
<button onclick="stop_time()">停止计时</button>
<script>
    var demo_time;
    function getTime(){
        var nowDate = new Date();
        var nowTime = nowDate.toLocaleTimeString();
        document.getElementById("time_p").innerHTML = nowTime;
        demo_time = setTimeout( "getTime()",3000);
    }
    function stop_time(){
        clearTimeout(demo_time);
    }
    getTime();
</script>
```
但是”可以“并不代表着推荐这么做，想想调用函数的本质是什么？不就是压栈吗？我们永不断地进行压栈，而没有弹栈，计算机的资源不久就会被消耗殆尽。因此，对于周期性的工作，我们还是强烈推荐使用setInterval()方法。

参数	描述
code	必需。要调用的函数或要执行的代码串。
millisec	必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。

利用screen对象获取屏幕信息

<script>
    var a_height = screen.availHeight;
    var a_width = screen.availWidth;
    var height = screen.height;
    var width = screen.width;
    console.log("可用的屏幕高度："+a_height
                +"\n可用的屏幕宽度："+a_width
                +"\n屏幕的高度："+height
                +"\n屏幕的宽度："+width);
</script>

JavaScript语法三

js对象控制CSS

计时器

1.计时事件

2.计时方法

利用screen对象获取屏幕信息