CSS结合JavaScript编写的一段在网页上动态显示时间的代码

使用CSS结合JavaScript可以很方便地实现在网页上动态显示时间的功能,主要应用了CSS的input方法,JavaScript的Date对象中的设置时间间隔setInterval()方法.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text" id="clock">
    <input type="button" value="begin" onclick="begin_click()">
    <input type="botton" value="end" onclick="end_click()" sytle="width:20px">

    <script>
        function gettime(){
            var d=new Date();
            var year=d.getFullYear();
            var month=d.getMonth()+1;
            var day=d.getDate();
            var hour=d.getHours();
            var minute=d.getMinutes();
            var second=d.getSeconds();
            ret=year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second;
            return(ret)
            }
        function begin(){
            var current_time=gettime();
            var ret=document.getElementById("clock");
            ret.value=current_time;

            }
        function end_click(){
            var ret=document.getElementById("clock");
            ret.value=null;
            clearInterval(ID);
        }
        function begin_click(){
                 ID=setInterval(begin,1000);
        }


    </script>
</body>
</html>

程序运行后,点击屏幕上begin按钮,则开始动态显示日期和时间,间隔为1秒更新一次,若点击end按键则停止显示,并清空左边时间,如下图

CSS结合JavaScript编写的一段在网页上动态显示时间的代码

相关推荐