How to use JavaScript to create a dynamic clock-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

How to use JavaScript to create a dynamic clock

Sep 26, 2017 am 10:02 AM

javascript js make

1:clock.js

/** *  动态显示当前时间 */function showDateTime(){    
var sWeek=new Array("日","一","二","三","四","五","六");  //声明数组存储一周七天    
var myDate=new Date(); //获取当天日期    
var sYear=myDate.getFullYear(); //获取年    
var sMonth=myDate.getMonth()+1; //获取月    
var sDate=myDate.getDate(); //获取日    
var sDay=sWeek[myDate.getDay()]; //根据得到的数字星期,利用数组转化为星期    
var h=myDate.getHours(); //获取小时    
var m=myDate.getMinutes(); //获取分钟    
var s=myDate.getSeconds(); //获取秒    //输入日期和星期    
document.getElementById("date").innerHTML=(sYear+"年"+sMonth+"月"+sDate+"日"+"星期"+sDay+"&lt;br/&gt;");    h = formatTwoDigits(h);  //格式化小时,如果不足两位在前面补0    m = formatTwoDigits(m); //格式化分钟,如果不足两位在前面补0    s = formatTwoDigits(s); //格式化秒钟后,如果不足两位在前面补0    //显示时间    document.getElementById("msg").innerHTML=(h+":"+m+":"+s+"&lt;br/&gt;");    setTimeout("showDateTime()",1000);//每秒执行一次showDateTime函数}window.onload=showDateTime;//在整个页面加载完成后执行此函数//如果输入数是一位数,则在十位上补0function formatTwoDigits(s) {    if (s&lt;10)        return &quot;0&quot;+s;    else        return s;
}

Copy after login

2:clock.html

&lt;!DOCTYPE html&gt;&lt;html lang=&quot;en&quot;&gt;&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;title&gt;制作动态时钟&lt;/title&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;clock.js&quot;&gt;&lt;/script&gt;&lt;/head&gt;&lt;body&gt;
    &lt;h1 id=&quot;date&quot;&gt;&lt;/h1&gt;
    &lt;span id=&quot;msg&quot; style=&quot;font-size: 30px;background-color: greenyellow;&quot;&gt;
    &lt;/span&gt;
  &lt;/body&gt;
&lt;/html&gt;

Copy after login

The above is the detailed content of How to use JavaScript to create a dynamic clock. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn