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 相关文章推荐
一些mootools的学习资源
Feb 07 Javascript
javascript学习笔记(十八) 获得页面中的元素代码
Jun 20 Javascript
jQuery.extend 函数的详细用法
Jun 27 Javascript
js给dropdownlist添加选项的小例子
Mar 04 Javascript
24款热门实用的jQuery插件推荐
Dec 24 Javascript
js使用DOM设置单选按钮、复选框及下拉菜单的方法
Jan 20 Javascript
深入了解JavaScript的逻辑运算符(与、或)
Dec 20 Javascript
基于EasyUI的基础之上实现树形功能菜单
Jun 28 Javascript
react实现一个优雅的图片占位模块组件详解
Oct 30 Javascript
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
如何在vue里添加好看的lottie动画
Aug 02 Javascript
vue实现点击按钮“查看详情”弹窗展示详情列表操作
Sep 09 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
PHP 替换模板变量实现步骤
2009/08/24 PHP
sae使用smarty模板的方法
2013/12/17 PHP
php_imagick实现图片剪切、旋转、锐化、减色或增加特效的方法
2014/12/15 PHP
使用PHP免费发送定时短信的实例
2016/10/24 PHP
PHP7 mongoDB扩展使用的方法分享
2019/05/02 PHP
在Laravel 的 Blade 模版中实现定义变量
2019/10/14 PHP
一些不错的js函数ajax
2008/08/20 Javascript
javascript 进度条 实现代码
2009/07/30 Javascript
Jquery常用的方法汇总
2015/09/01 Javascript
JS实现的另类手风琴效果网页内容切换代码
2015/09/08 Javascript
jquery Deferred 快速解决异步回调的问题
2016/04/05 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
2016/10/01 Javascript
vue 2.0组件与v-model详解
2017/03/27 Javascript
js学使用setTimeout实现轮循动画
2017/07/17 Javascript
node.js利用mongoose获取mongodb数据的格式化问题详解
2017/10/06 Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
2018/02/06 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
2019/03/16 Javascript
js实现弹出框的拖拽效果实例代码详解
2019/04/16 Javascript
vue实现点击按钮下载文件功能
2019/10/11 Javascript
vue实现的封装全局filter并统一管理操作示例
2020/02/02 Javascript
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
2020/09/12 Javascript
js实现有趣的倒计时效果
2021/01/19 Javascript
python画图把时间作为横坐标的方法
2019/07/07 Python
详解python变量与数据类型
2020/08/25 Python
html5 Canvas绘制线条 closePath()实例代码
2012/05/10 HTML / CSS
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
2021/01/19 HTML / CSS
JD Sports德国官网:英国领先的运动鞋和运动服饰零售商
2018/02/26 全球购物
基督教卡片、励志礼品、家居装饰等:DaySpring
2018/10/12 全球购物
香港彩色隐形眼镜在线商店:Stunninglens(全球免费送货)
2019/05/10 全球购物
小学生环保演讲稿
2014/04/25 职场文书
自主招生学校推荐信
2014/09/26 职场文书
给病人的慰问信
2015/03/23 职场文书
2015年派出所工作总结
2015/04/24 职场文书
先进教师个人主要事迹材料
2015/11/03 职场文书
Golang 实现 WebSockets 之创建 WebSockets
2022/04/24 Golang
Nginx报错104:Connection reset by peer问题的解决及分析
2022/07/23 Servers