zoukankan      html  css  js  c++  java
  • 简易网页始终

    实现代码:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style>
        *{margin: 0px;padding: 0px;}
        body{padding: 100px;font-size: 16px;font-weight: bold;color: #fff;}
        #box{width:300px;text-align:center;background:#1a1a1a;padding:20px 0;}
        span{color:#000;width:80px;line-height:2;background:#fbfbfb;border:2px solid #b4b4b4;margin:0 10px;padding:0 10px;}
    
    </style>
    <script>
        window.onload=function(){
            var aSpan = document.getElementsByTagName('span');
    
            function getTimes(){
                var oDate = new Date();
                var aDate = [oDate.getHours(),oDate.getMinutes(),oDate.getSeconds()];
                for(var i in aDate){
                    aSpan[i].innerHTML = format(aDate[i]);
                }
            };
    
            function format(a){
                return a.toString().replace(/^(d)$/,'0$1');
            };
    
            getTimes();
            setInterval(getTimes,1000);
        }
    </script>
    </head>
    <body>
        <div id="box">
            <span>0</span><span>0</span><span>0</span></div>
    </body>
    </html>

    效果如下图所示:

    学习要点:

     Date()/toString()/定时器

    高否?富否?帅否? 否? 滚去学习!
  • 相关阅读:
    JS函数强化
    Javascript创建对象的方式
    call和apply的区别
    事件绑定和普通事件有什么区别
    又走一个
    风的季节
    关于Dictionary的线程安全问题
    进程管理简述
    开通
    WPF 音乐播放器界面
  • 原文地址:https://www.cnblogs.com/baixc/p/3428750.html
Copyright © 2011-2022 走看看