HTML会动的时钟(简单又好玩)

最新推荐文章于 2024-07-12 20:49:16 发布

好好学习泰酷辣

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量1.2k

点赞数 3

文章标签： html

本文链接：https://blog.csdn.net/weixin_42529276/article/details/104337500

版权

代码如下(为了方便看我把css代码和javascript代码都放在html文件中):

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>会动的时钟</title>
    <style>
        #time{
            color: blue;
            border: 1px solid gray;
            width: 320px;
            height: 30px;
            font-size: 30px;
            padding-left: 15px;
        }
        #start{
            height: 50px;
            width: 100px;
            font-size: 30px;
        }
        #stop{
            height: 50px;
            width: 100px;
            font-size: 30px;
        }
        .one{
            /*左对齐*/
            text-align: left;
        }
        .two{
            /*右对齐*/
            text-align: right;
        }
        .boss{
            /*将整个table放在中间*/
            margin: auto;
        }
    </style>
</head>
<body>
    <table cellspacing="0" cellpadding="0" border="0" class="boss">
        <tr>
            <td colspan="2">
                <h1 id="time"></h1>
            </td>
        </tr>
        <tr>
            <td class="one">
                <!--创建开始按钮-->
                <input type="button" id="start" value="开始" disabled="disabled" οnclick="start()">
            </td>
            <td class="two">
                <!--创建暂停按钮-->
                <input type="button" id="stop" value="暂停" οnclick="stop()">
            </td>
        </tr>
    </table>
</body>

javascript代码:

<script type="text/javascript">
    var date = new Date();
    // 在页面中显示出时间
    document.getElementById("time").innerHTML = date.toLocaleString();
    // 全局变量
    var clear;
    // 调用方法执行时间的变动
    begin();
    function begin(){
        // 创建计时器，每过一秒调用一次放到setTime()
        clear = window.setInterval("setTime()",1000);
    }
    function setTime(){
        // 这里需要新创建一个Data类来更新时间
        document.getElementById("time").innerHTML = new Date().toLocaleString();
    }
    function stop() {
        //清除计时器
        window.clearInterval(clear);
        //暂停键不可按，开始按键可以按
        document.getElementById("stop").disabled = true;
        document.getElementById("start").disabled = false;
    }
    function start(){
        begin();
        //开始键不可按，暂停键可以按
        document.getElementById("start").disabled = true;
        document.getElementById("stop").disabled = false;
    }
</script>
</html>

效果:
在这里插入图片描述

好好学习泰酷辣

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML会动的时钟(简单又好玩)

`在这里插入代List item码片`会动的时钟/左对齐/text-align: left;}.two{/右对齐/text-align: right;}.boss{/将整个table放在中间/margin: auto;} ...
复制链接

扫一扫