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 相关文章推荐
javascript实现轮显新闻标题链接
Aug 13 Javascript
浏览器打开层自动缓慢展开收缩实例代码
Jul 04 Javascript
三种检测iPhone/iPad设备方向的方法
Apr 23 Javascript
被遗忘的javascript的slice() 方法
Apr 20 Javascript
JavaScript中的getTime()方法使用详解
Jun 10 Javascript
javascript常用的方法整理
Aug 20 Javascript
微信小程序本作用域下调用全局JS详解及实例
Feb 22 Javascript
JS实现的随机排序功能算法示例
Jun 09 Javascript
JavaScript基本语法_动力节点Java学院整理
Jun 26 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
Jul 05 Javascript
vue基于两个计算属性实现选中和全选功能示例
Feb 08 Javascript
Vue性能优化的方法
Jul 30 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
《神奇女侠:血脉》神力女超人大战犯罪公司
2020/04/09 欧美动漫
PHP脚本数据库功能详解(上)
2006/10/09 PHP
php实现的简单压缩英文字符串的代码
2008/04/24 PHP
PHPMailer邮件类利用smtp.163.com发送邮件方法
2008/09/11 PHP
2014最热门的24个php类库汇总
2014/12/18 PHP
php生成rss类用法实例
2015/04/14 PHP
老生常谈PHP 文件写入和读取(必看篇)
2017/05/22 PHP
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
一个用js实现的页内搜索代码
2007/05/23 Javascript
javascript开发随笔二 动态加载js和文件
2011/11/25 Javascript
BootStrap Table对前台页面表格的支持实例讲解
2016/12/22 Javascript
利用Node.js编写跨平台的spawn语句详解
2017/02/12 Javascript
jQuery为某个div加入行样式
2017/06/09 jQuery
详解node.js中的npm和webpack配置方法
2018/01/21 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
2018/03/08 Javascript
Layui数据表格之获取表格中所有的数据方法
2018/08/20 Javascript
了解JavaScript中的选择器
2019/05/24 Javascript
Vue.js自定义指令学习使用详解
2019/10/19 Javascript
详解微信小程序(Taro)手动埋点和自动埋点的实现
2021/03/02 Javascript
[48:30]LGD vs infamous Supermajor小组赛D组 BO3 第一场 6.3
2018/06/04 DOTA
[01:10:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第一场 3月4日
2021/03/11 DOTA
python备份文件的脚本
2008/08/11 Python
Python制作爬虫采集小说
2015/10/25 Python
Python设计模式之抽象工厂模式
2016/08/25 Python
Anaconda2下实现Python2.7和Python3.5的共存方法
2018/06/11 Python
Python实现高斯函数的三维显示方法
2018/12/29 Python
关于tensorflow softmax函数用法解析
2020/06/30 Python
CSS3实现苹果手机解锁的字体闪亮效果示例
2021/01/05 HTML / CSS
请描述一下”is a”关系和”has a”关系
2015/02/03 面试题
shell程序如何生命变量?shell变量是弱变量吗?
2014/11/10 面试题
3D空间设计学生找工作的自我评价
2013/10/28 职场文书
函授毕业生自我鉴定
2013/11/06 职场文书
教育基金募捐倡议书
2014/05/14 职场文书
班主任先进事迹材料
2014/12/17 职场文书
有关水浒传的读书笔记
2015/06/25 职场文书
SqlServer: 如何更改表的文件组?(进而改变存储位置)
2021/04/05 SQL Server