js实现Form栏显示全格式时间时钟效果代码


Posted in Javascript onAugust 19, 2015

本文实例讲述了js实现Form栏显示全格式时间时钟效果代码。分享给大家供大家参考。具体如下:

这里演示的Form栏特效时钟,显示全日期格式的时间日期效果,可显示星期几、几月几号,以往都是直接显示在网页中,而本代码是将时间显示在表单的文本框中,看一下代码就明白了。

运行效果截图如下:

js实现Form栏显示全格式时间时钟效果代码

在线演示地址如下:

具体代码如下:

<!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 相关文章推荐
js静态作用域的功能。
Dec 25 Javascript
浅谈tudou土豆网首页图片延迟加载的效果
Jun 23 Javascript
jquery实现背景墙聚光灯效果示例分享
Mar 02 Javascript
JQuery学习总结【一】
Dec 01 Javascript
jQuery Plupload上传插件的使用
Apr 19 jQuery
jQuery正则验证注册页面经典实例
Jun 10 jQuery
一步步教你利用Canvas对图片进行处理
Sep 19 Javascript
结合mint-ui移动端下拉加载实践方法总结
Nov 08 Javascript
node 使用 async 控制并发的方法
May 07 Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
Jan 24 Javascript
记录一次开发微信网页分享的步骤
May 07 Javascript
简单使用webpack打包文件的实现
Oct 29 Javascript
easyui Droppable组件实现放置特效
Aug 19 #Javascript
js实现简单的联动菜单效果
Aug 19 #Javascript
javascript 使用for循环时该注意的问题-附问题总结
Aug 19 #Javascript
jQuery满意度星级评价插件特效代码分享
Aug 19 #Javascript
easyui Draggable组件实现拖动效果
Aug 19 #Javascript
使用CamanJS在Web页面上处理图像的技巧
Aug 18 #Javascript
JS实现下拉菜单赋值到文本框的方法
Aug 18 #Javascript
You might like
博士208HAF收音机实习报告
2021/03/02 无线电
打造计数器DIY三步曲(中)
2006/10/09 PHP
php下intval()和(int)转换使用与区别
2008/07/18 PHP
Win下如何安装PHP的APC拓展
2013/08/07 PHP
PHP 登录完成后如何跳转上一访问页面
2014/01/14 PHP
php实现汉字验证码和算式验证码的方法
2015/03/07 PHP
nginx+thinkphp下解决不支持pathinfo模式
2015/07/01 PHP
PHP常用排序算法实例小结【基本排序,冒泡排序,快速排序,插入排序】
2017/02/07 PHP
PHP图片水印类的封装
2017/07/06 PHP
js图片闪动特效可以控制间隔时间如几分钟闪动一下
2014/08/12 Javascript
基于NodeJS的前后端分离的思考与实践(四)安全问题解决方案
2014/09/26 NodeJs
jQuery实现类似老虎机滚动抽奖效果
2015/08/06 Javascript
jQuery选择器及jquery案例详解(必看)
2016/05/20 Javascript
jQuery根据表单name获取值的方法
2016/05/24 Javascript
JavaScript编码风格指南(中文版)
2016/08/26 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
2016/11/26 Javascript
JS原生带小白点轮播图实例讲解
2017/07/22 Javascript
轻松理解vue的双向数据绑定问题
2017/10/30 Javascript
jQuery中元素选择器(element)简单用法示例
2018/05/14 jQuery
Node.js使用supervisor进行开发中调试的方法
2019/03/26 Javascript
JavaScript中工厂函数与构造函数示例详解
2019/05/06 Javascript
解决vue中使用proxy配置不同端口和ip接口问题
2019/08/14 Javascript
JS中的算法与数据结构之列表(List)实例详解
2019/08/16 Javascript
Element Dropdown下拉菜单的使用方法
2020/07/26 Javascript
[15:56]Heroes18_暗影萨满(完美)
2014/10/31 DOTA
django+js+ajax实现刷新页面的方法
2017/05/22 Python
python 给DataFrame增加index行名和columns列名的实现方法
2018/06/08 Python
python中的colorlog库使用详解
2019/07/05 Python
Keras使用tensorboard显示训练过程的实例
2020/02/15 Python
python实现打砖块游戏
2020/02/25 Python
Python操作Elasticsearch处理timeout超时
2020/07/17 Python
Canvas 文本转粒子效果的实现代码
2019/02/14 HTML / CSS
基于HTML5的齿轮动画特效
2016/02/29 HTML / CSS
优秀团支部事迹材料
2014/02/08 职场文书
合同意向书范本
2014/07/30 职场文书
区长工作作风个人整改措施
2014/10/01 职场文书