JavaScript03—Window对象

最新推荐文章于 2024-11-05 22:07:06 发布

阿鑫君_ty

最新推荐文章于 2024-11-05 22:07:06 发布

阅读量228

点赞数

分类专栏： javaScript 文章标签： javascript 对象

本文链接：https://blog.csdn.net/qq_34807258/article/details/74418569

版权

javaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Window对象

window表示浏览器窗口
常用方法：
- alert()提示对话框,confirm()确认对话框
- setInterval(执行语句，时间周期毫秒)：周期性触发代码
- clearInterval(启动的定时器对象)：停止启动的定时器对象
- setTimeout(执行语句，间隔时间毫秒)：一次性触发代码
- clearTimeout(启动的定时器对象)：停止启动的定时器对象

动态时钟的启动停止(周期性定时器)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>定时时钟</title>
    <script type="text/javascript">
        //定义一个定时器变量
        var timer;

        function start(){
            timer = window.setInterval(function () {
                var now = new Date().toLocaleTimeString();
                document.getElementById("textClock").value = now;
            },1000);
        }
        function stop(){
            clearInterval(timer);
        }
    </script>
</head>
<body>
<h1>定时时钟</h1>
<p>
    <input type="text" id="textClock" />
</p>
<p>
    <input type="button" value="开始时钟" onclick="start();"/>
    <input type="button" value="停止时间" onclick="stop();"/>
</p>
</body>
</html>

倒计时(周期性定时器)


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>倒计时</title>
<style type="text/css">
div {
    padding: 10px;
    margin: 5% auto;
    border: 1px solid black;
    text-align: center;
    background-color: black;
}
#d1 {
    width: 300px;
    color: #aaa;
}
#d2 {
    font-size: 100pt;
    color: red;
}

</style>
<script type="text/javascript">
function start(){
    var seconds = document.getElementById("inputTxt").value;
    var div = document.getElementById("d2");

    var timer = setInterval(function(){
        div.innerHTML = seconds;
            //取得/设置 前标签 和 后标签之间的内容
        seconds--;

        if( seconds<0 ){
            clearInterval(timer);
        }
    }, 1000);

}
</script>
</head>
<body>
    <div id="d1">
        <div id="d2">00</div>
        <div>
            输入秒数：
            <input type="text" id="inputTxt" size="5" value="15"/>
            <input type="button" value="开始倒计时" onclick="start();"/>
        </div>
    </div>
</body>
</html>

动态提示信息(一次性定时器)弹出提示框自动关闭

首先div的display属性设置为none，同时position值设为：fixed(固定定位，参考HTML04—定位、显示方式)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>一次性定时器</title>
    <style type="text/css">
        div{
            display: none;
            border:2px #CCC solid;
            width:400px;
            height:200px;
            text-align: center;
            position: fixed;
            margin: 150px 150px auto;
        }
    </style>
    <script type="text/javascript">
        function start() {
            document.getElementById("divbox").style.display ="block";
            setTimeout("codefans()",2000);//2秒，可以改动
        }

        function codefans(){
            var box=document.getElementById("divbox");
            box.style.display="none";
        }

    </script>
</head>
<body>
<h1>一次性定时器</h1>
<p>
<div id="divbox">请稍等2秒。。。</div>
<p>
    <input type="button" value="提示" onclick="start();"/>
</p>
</body>
</html>