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 相关文章推荐
jquery的index方法实现tab效果
Feb 16 Javascript
Jquery中val()表单取值赋值的实例代码
Aug 15 Javascript
Node.js中使用Log.io在浏览器中实时监控日志(等同tail -f命令)
Sep 17 Javascript
使用canvas实现仿新浪微博头像截取上传功能
Sep 02 Javascript
jQuery实现仿腾讯迷你首页选项卡效果代码
Sep 17 Javascript
JavaScript学习小结(7)之JS RegExp
Nov 29 Javascript
JQuery动态添加Select的Option元素实现方法
Aug 29 Javascript
javascript基础知识讲解
Jan 11 Javascript
微信小程序progress组件使用详解
Jan 31 Javascript
React Native 自定义下拉刷新上拉加载的列表的示例
Mar 01 Javascript
基于 vue-skeleton-webpack-plugin 的骨架屏实战
Aug 05 Javascript
Vue2.x-使用防抖以及节流的示例
Mar 02 Vue.js
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
外媒评选出10支2020年最受欢迎的Dota2战队
2021/03/05 DOTA
Apache2 httpd.conf 中文版
2006/12/06 PHP
Yii2.0预定义的别名功能小结
2016/07/04 PHP
Laravel相关的一些故障解决
2020/08/19 PHP
Laravel配合jwt使用的方法实例
2020/10/25 PHP
VBScript版代码高亮
2006/06/26 Javascript
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
2014/01/08 Javascript
node.js使用nodemailer发送邮件实例
2014/03/10 Javascript
node.js 开发指南 ? Node.js 连接 MySQL 并进行数据库操作
2014/07/29 Javascript
Javascript函数中的arguments.callee用法实例分析
2016/09/16 Javascript
JS使用正则实现去掉字符串左右空格的方法
2016/12/27 Javascript
nodejs实现发出蜂鸣声音(系统报警声)的方法
2017/01/18 NodeJs
移动端使用localResizeIMG4压缩图片
2017/04/22 Javascript
Three.js中网格对象MESH的属性与方法详解
2017/09/27 Javascript
在微信小程序中渲染HTML内容的方法示例
2018/09/28 Javascript
Vue学习之axios的使用方法实例分析
2020/01/06 Javascript
JS自定义滚动条效果
2020/03/13 Javascript
通过实例了解JS执行上下文运行原理
2020/06/17 Javascript
Element InputNumber 计数器的实现示例
2020/08/03 Javascript
[05:06]TI4西雅图DOTA2前线报道 海涛密探LGD训练
2014/07/09 DOTA
详解Python中for循环是如何工作的
2017/06/30 Python
Python 忽略warning的输出方法
2018/10/18 Python
python中数组和矩阵乘法及使用总结(推荐)
2019/05/18 Python
对Django项目中的ORM映射与模糊查询的使用详解
2019/07/18 Python
Python PyQt5运行程序把输出信息展示到GUI图形界面上
2020/04/27 Python
Python多线程正确用法实例解析
2020/05/30 Python
如何用Python 加密文件
2020/09/10 Python
python实现excel公式格式化的示例代码
2020/12/23 Python
python实现简单文件读写函数
2021/02/25 Python
高中生自我评价个人范文
2013/11/09 职场文书
给同事的道歉信
2014/01/11 职场文书
企业法人授权委托书
2014/04/03 职场文书
幼儿园端午节活动方案
2014/08/25 职场文书
环境卫生工作汇报材料
2014/10/28 职场文书
2015年少先队活动总结
2015/03/25 职场文书
张丽莉事迹观后感
2015/06/16 职场文书