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 相关文章推荐
解决IE6的PNG透明JS插件使用介绍
Apr 17 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
Apr 22 Javascript
Mvc提交表单的四种方法全程详解
Aug 10 Javascript
jQuery搜索框效果实现代码(百度关键词联想)
Feb 25 Javascript
详解JavaScript数组过滤相同元素的5种方法
May 23 Javascript
webpack打包单页面如何引用的js
Jun 07 Javascript
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
Sep 28 Javascript
使用pm2自动化部署node项目的方法步骤
Jan 28 Javascript
Vue组件通信的几种实现方法
Apr 25 Javascript
过滤器vue.filters的使用方法实现
Sep 18 Javascript
解决vue bus.$emit触发第一次$on监听不到问题
Jul 28 Javascript
Nuxt 项目性能优化调研分析
Nov 07 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
简单的页面缓冲技术
2006/10/09 PHP
解析php做推送服务端实现ios消息推送
2013/07/01 PHP
yii框架通过控制台命令创建定时任务示例
2014/04/30 PHP
CI(CodeIgniter)框架中的增删改查操作
2014/06/10 PHP
php调用自己java程序的方法详解
2016/05/13 PHP
php事务回滚简单实现方法示例
2017/03/28 PHP
php基于session锁防止阻塞请求的方法分析
2017/08/07 PHP
PHP创建XML的方法示例【基于DOMDocument类及SimpleXMLElement类】
2019/09/10 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
通过javascript设置css属性的代码
2009/12/28 Javascript
JavaScript定义类或函数的几种方式小结
2011/01/09 Javascript
ExtJS实现文件下载的方法实例
2013/11/09 Javascript
jQuery获得内容和属性方法及示例
2013/12/02 Javascript
javascript实现禁止鼠标滚轮事件
2015/07/24 Javascript
javascript实现密码验证
2015/11/10 Javascript
jQuery实现多级联动下拉列表查询框
2016/01/18 Javascript
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
2016/03/25 Javascript
最简单纯JavaScript实现Tab标签页切换的方式(推荐)
2016/07/25 Javascript
原生javascript实现的ajax异步封装功能示例
2016/11/03 Javascript
codeMirror插件使用讲解
2017/01/16 Javascript
100多个基础常用JS函数和语法集合大全
2017/02/16 Javascript
bootstrap中模态框、模态框的属性实例详解
2017/02/17 Javascript
Angular 4 指令快速入门教程
2017/06/07 Javascript
javascript将list转换成树状结构的实例
2017/09/08 Javascript
基于vue 动态加载图片src的解决方法
2018/02/05 Javascript
利用vue和element-ui设置表格内容分页的实例
2018/03/02 Javascript
jQuery easyui datagird编辑行删除行功能的实现代码
2018/09/20 jQuery
python中的一些类型转换函数小结
2013/02/10 Python
一键搞定python连接mysql驱动有关问题(windows版本)
2016/04/23 Python
pandas获取groupby分组里最大值所在的行方法
2018/04/20 Python
python文件操作seek()偏移量,读取指正到指定位置操作
2020/07/05 Python
介绍一下write命令
2014/08/10 面试题
审核会计岗位职责
2013/11/08 职场文书
幼儿园毕业家长感言
2014/02/10 职场文书
演讲稿格式
2014/04/30 职场文书
刑事申诉状范文
2015/05/20 职场文书