简单的JS时钟实例讲解,js实现Form栏显示全格式时

2019-09-02 15:55 来源:未知

本文实例介绍了JS挂钟达成代码,分享给大家供我们参谋,具体内容如下

本文实例呈报了js完成Form栏显示全格式时间机械钟效果代码。分享给大家供大家参考。具体如下:

效果图:

这里演示的Form栏特效时钟,显示整日期格式的日子日期效果,可展现星期几、几月几号,未来都以平昔浮以后网页中,而本代码是将时间呈现在表单的文本框中,看一下代码就清楚了。

图片 1

运作效果截图如下:

实际代码:

图片 2

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="gb2312">
  <title>Document</title>
  <script type="text/javascript">

    function startTime () {
       var today=new Date();
    var y=today.getFullYear();
    var mon=today.getMonth()+1;
       mon=changNum(mon);
    var d=today.getDay();
       d=changNum(d);
    var h=today.getHours();
    var m=today.getMinutes();
       m=changNum(m);
    var s=today.getSeconds();
       s=changNum(s);
    document.getElementById("timeid").innerHTML=y+"年"+mon+"月"+d+"日"+h+":"+m+":"+s;
    t=setTimeout(function(){
      startTime();
    },500);
    }    

   function changNum(i){   //月、日、秒如果小于10数字前加0
       if(i<10){
          return "0"+i;
       }
       return i;
   }

  </script>
</head>
<body onload="startTime()">

<h1 id="timeid"></h1>

</body>
</html>

在线演示地址如下:

期待本文所述对大家学习javascript程序设计具备帮衬。

你也许感兴趣的作品:

  • javascript入门·动态的石英时钟,显示完整的一对方法,新年倒计时
  • JavaScript达成轻便的石英钟实例代码
  • js达成倒计时机械钟的演示代码
  • js石英钟翻牌效果落实代码分享
  • js完毕轻易的秒表走动的石英钟特效
  • javascript结合Canvas 达成简易的圆形石英钟
  • 纯js代码制作的网页石英钟特效【附实例】
  • javascript数字时钟示例分享
  • js达成Form栏显示全格式时间石英钟效果代码
  • JS实现简易刻度石英钟示例代码

实际代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Form栏特全时钟</TITLE>
</HEAD>
<body bgcolor="#ffffff" onLoad="startclock()">
<script language="JavaScript">
<!-- Hide
 var timerID = null
 var timerRunning = false
 function MakeArray(size) 
 {
 this.length = size;
 for(var i = 1; i <= size; i++)
 {
 this[i] = "";
 }
 return this;
 }
 function stopclock (){
 if(timerRunning)
 clearTimeout(timerID);
 timerRunning = false
 }
 function showtime () {
 var now = new Date();
 var year = now.getFullYear();
 var month = now.getMonth() + 1;
 var date = now.getDate();
 var hours = now.getHours();
 var minutes = now.getMinutes();
 var seconds = now.getSeconds();
 var day = now.getDay();
 Day = new MakeArray(7);
 Day[0]="星期天";
 Day[1]="星期一";
 Day[2]="星期二";
 Day[3]="星期三";
 Day[4]="星期四";
 Day[5]="星期五";
 Day[6]="星期六";
 var timeValue = "";
 timeValue += year + "年";
 timeValue += ((month < 10) ? "0" : "") + month + "月";
 timeValue += date + "日 ";
 timeValue += (Day[day]) + " ";
 timeValue += ((hours <= 12) ? hours : hours - 12);
 timeValue += ((minutes < 10) ? ":0" : ":") + minutes;
 timeValue += ((seconds < 10) ? ":0" : ":") + seconds;
 timeValue += (hours < 12) ? "上午" : "下午";
 document.jsfrm.face.value = timeValue;
 timerID = setTimeout("showtime()",1000);
 timerRunning = true
 }
 function startclock () {
 stopclock();
 showtime()
 }
 //-->
</script>
<form name='jsfrm'>
<input type=text name='face' size=34 value=''>
</form>
</BODY>
</HTML>

企望本文所述对大家的javascript程序设计具有协助。

您只怕感兴趣的小说:

  • javascript入门·动态的挂钟,显示完整的一些措施,新禧倒计时
  • JavaScript兑现简单的石英钟实例代码
  • js完成倒计时时钟的示范代码
  • js石英钟翻牌效果达成代码分享
  • js实现简单的秒表走动的石英表特效
  • 简单的JS挂钟实例批注
  • javascript结合Canvas 完成简易的圆形石英钟
  • 纯js代码制作的网页石英钟特效【附实例】
  • javascript数字时钟示例共享
  • JS达成简易刻度石英钟示例代码
TAG标签:
版权声明:本文由990888藏宝阁发布于关于计算机,转载请注明出处:简单的JS时钟实例讲解,js实现Form栏显示全格式时