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实现可以编辑的表格
May 26 Javascript
Bootstrap实现提示框和弹出框效果
Jan 11 Javascript
Angular2关于@angular/cli默认端口号配置的问题
Jul 15 Javascript
JavaScript 判断对象中是否有某属性的常用方法
Jun 14 Javascript
Nuxt.js实现校验访问浏览器类型的中间件
Aug 24 Javascript
关于Vue项目跨平台运行问题的解决方法
Sep 18 Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
Sep 29 Javascript
vue favicon设置以及动态修改favicon的方法
Dec 21 Javascript
用Fundebug插件记录网络请求异常的方法
Feb 21 Javascript
Vue实现购物车基本功能
Nov 08 Javascript
JavaScript实现10秒后再次获取验证码
Dec 02 Javascript
通过vue.extend实现消息提示弹框的方法记录
Jan 07 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
js css样式操作代码(批量操作)
2009/10/09 Javascript
php gethostbyname获取域名ip地址函数详解
2010/01/24 Javascript
javascript之bind使用介绍
2011/10/09 Javascript
js前台判断开始时间是否小于结束时间
2012/02/23 Javascript
js 事件截取enter按键页面提交事件示例代码
2014/03/04 Javascript
JavaScript格式化日期时间的方法和自定义格式化函数示例
2014/04/04 Javascript
javascript学习笔记之10个原生技巧
2014/05/21 Javascript
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
2014/08/18 Javascript
jQuery实现下滑菜单导航效果代码
2015/08/25 Javascript
vue双向数据绑定原理探究(附demo)
2017/01/17 Javascript
jQuery实现动态添加、删除按钮及input输入框的方法
2017/04/27 jQuery
JS触摸事件、手势事件详解
2017/05/04 Javascript
vue使用pdfjs显示PDF可复制的实现方法
2018/12/14 Javascript
js实现全选反选不选功能代码详解
2019/04/24 Javascript
通过循环优化 JavaScript 程序
2019/06/24 Javascript
layui实现tab的添加拒绝重复的方法
2019/09/04 Javascript
如何构建一个Vue插件并生成npm包
2020/10/26 Javascript
使用Vue实现一个树组件的示例
2020/11/06 Javascript
Python MD5加密实例详解
2017/08/02 Python
python爬取个性签名的方法
2018/06/17 Python
浅谈Python中eval的强大与危害
2019/03/13 Python
pycharm new project变成灰色的解决方法
2019/06/27 Python
python Pandas如何对数据集随机抽样
2019/07/29 Python
python爬虫selenium和phantomJs使用方法解析
2019/08/08 Python
PyQt5 closeEvent关闭事件退出提示框原理解析
2020/01/08 Python
Python气泡提示与标签的实现
2020/04/01 Python
python将音频进行变速的操作方法
2020/04/08 Python
基于html5 DeviceOrientation 实现微信摇一摇功能
2015/09/25 HTML / CSS
西班牙香水和化妆品连锁店:Druni
2019/05/05 全球购物
大学生冰淇淋店商业计划书
2014/01/14 职场文书
导购员的岗位职责
2014/02/08 职场文书
《灯光》教学反思
2014/02/08 职场文书
学生会副主席竞聘书
2014/03/31 职场文书
校车安全管理责任书
2015/05/11 职场文书
2016公司年会主持词
2015/07/01 职场文书
P站美图推荐——变身女主角特辑
2022/03/20 日漫