javascript实现动态时钟的启动和停止

javascript实现动态时钟的启动和停止,点击开始按钮,获取当前时间,点击停止按钮,时间停止


<html>
    <head>
        <meta charset="UTF-8">
        <title>动态时钟的启动和停止title>
    head>
    <body background="img/2.jpg" style="background-repeat: no-repeat;margin-left: 180px;">
    
    <h1>动态时钟h1>
    <p>
        当前时间:<span id="clock" style="color: #FF0000;"/> span>
    p>
    <p>
    <input type="button" value="start" onclick="start()" style="color: #FF0000;"/>
    <input type="button" value="stop" onclick="stop()" style="color: #FF0000;"/>
    p>
    body>
    <script type="text/javascript">
        var timer;
        function start(){
            //设置定时器(方法的实现,毫秒数)
             timer=setInterval(function(){
                var now=new Date();
                var time=now.toLocaleTimeString();
                var c=document.getElementById("clock");
                c.innerHTML=time;
            },1000);
        }
        function stop(){
            //暂停  清楚定时器
            clearInterval(timer);
        }
    script>
html>

效果截图:
javascript实现动态时钟的启动和停止_第1张图片

你可能感兴趣的:(JavaScript学习)