找回密码
当前位置：前端开发者 > JavaScript > 正文

前端开发js基础之秒表

2019-01-25 分类：JavaScript 阅读(661) 评论(0)
谷歌前端开发插件下载
前端开发视频下载
前端界面开发模板下载

html 代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset=”UTF-8″ />
        <title></title>
        <script type=”text/javascript”>
            onload = function() {
                var oBox = document.getElementById(‘time’)
                var bTn1 = document.getElementById(‘btn1’)
                var bTn2 = document.getElementById(‘btn2’)
                var bTn3 = document.getElementById(‘btn3’)
                var num = 0
                var num1 = 0
                oBox.innerHTML = ’00’ + ‘:’ + ’00’ + ‘:’ + ’00’
                //开始按钮
                bTn1.onclick = function() {
                    num1++
                    if (num1 == 1) {
                        function fn() {
                            num++
                            var h =
                                parseInt(num / 60 / 60) >= 10
                                    ? parseInt(num / 60 / 60)
                                    : ‘0’ + parseInt(num / 60 / 60)
                            var m =
                                parseInt(num / 60) % 60 >= 10
                                    ? parseInt(num / 60) % 60
                                    : ‘0’ + (parseInt(num / 60) % 60)
                            var s = num % 60 >= 10 ? num % 60 : ‘0’ + (num % 60)
                            oBox.innerHTML = h + ‘:’ + m + ‘:’ + s
                            time = setTimeout(fn, 10)
                            //暂停按钮
                            bTn2.onclick = function() {
                                clearTimeout(time)
                                num1 = 0
                            }
                            //清零按钮
                            bTn3.onclick = function() {
                                clearTimeout(time)
                                num = 0
                                num1 = 0
                                oBox.innerHTML = ’00’ + ‘:’ + ’00’ + ‘:’ + ’00’
                            }
                        }
                        fn()
                    }
                }
            }
        </script>
        <style type=”text/css”>
            #box {
                height: 400px;
                width: 400px;
                background: #a9b3d5;
                border: 8px double #ccc;
                position: fixed;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                margin: auto;
                border-radius: 50%;
            }
            #time {
                background: #fff;
                height: 100px;
                width: 300px;
                border-radius: 9px 9px;
                position: absolute;
                top: 110px;
                left: 50px;
                text-align: center;
                line-height: 100px;
                font-size: 50px;
                font-family: Lucida Console;
            }
            .input {
                width: 240px;
                position: absolute;
                bottom: 110px;
                margin: 0 80px;
                display: flex;
                justify-content: space-between;
            }
            .input .btn {
                width: 70px;
                height: 30px;
            }
        </style>
    </head>
    <body>
        <div id=”box”>
            <div id=”time”></div>
            <form class=”input”>
                <input
                    type=”button”
                    name=”btn1″
                    id=”btn1″
                    class=”btn”
                    value=”开始”
                />
                <input
                    type=”button”
                    name=”btn2″
                    id=”btn2″
                    class=”btn”
                    value=”暂停”
                />
                <input
                    type=”button”
                    name=”btn3″
                    id=”btn3″
                    class=”btn”
                    value=”清零”
                />
            </form>
        </div>
    </body>
</html>
web前端开发书籍 下载
珠峰前端开发视频下载
web前端开发电子书下载
赞(0)
前端开发者 » 前端开发js基础之秒表
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论