要么改变世界,要么适应世界

JavaScript语法三

2020-03-16 12:20:00
125
目录

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.计时方法

  1. 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);
    
  2. 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()方法。

利用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>
历史评论
开始评论