使用js显示当前时间示例


Posted in Javascript onMarch 02, 2014

页面前台显示

<span id="clock" style="font-size:14px;"></span>

js脚本

$(document).ready(function () {
//第一种
showTime();
//第二种
var clock = new Clock();
clock.display($("#clock"));
});
//显示系统当前时间处理 第一种方法 
function showTime() {
 var myArray = new Array(7);
 var TD = new Date();
 myArray[0] = "星期日";
 myArray[1] = "星期一";
 myArray[2] = "星期二";
 myArray[3] = "星期三";
 myArray[4] = "星期四";
 myArray[5] = "星期五";
 myArray[6] = "星期六";
 weekday = TD.getDay();
 var h = TD.getHours();
 var m = TD.getMinutes();
 var s = TD.getSeconds();
 var hstr = h;
 var mstr = m;
 var istr = s;
 if (h < 10) { hstr = "0" + h };
 if (m < 10) { mstr = "0" + m };
 if (s < 10) { istr = "0" + s };
 $("#clock").innerHTML('当前时间:' + new Date().toLocaleDateString() + " " + myArray[weekday] + " " + hstr + ":" + mstr + ":" + istr);
 setTimeout(showTime, 1000);
}
//显示系统当前时间处理 第二种方法
function Clock() {
var date = new Date();
this.year=date.getFullYear();
this.month=date.getMonth()+1;
this.date=date.getDate();
this.day=newArray("星期日","星期一","星期二","星期三","星期四","星期五","星期六")[date.getDay()];
this.hour=date.getHours()<10?"0"+date.getHours():date.getHours();
this.minute=date.getMinutes()<10?"0"+date.getMinutes():date.getMinutes();
this.second=date.getSeconds()<10?"0"+date.getSeconds():date.getSeconds();
this.toString=function(){
return"现在时间是:"+this.year+"年"+this.month+"月"+this.date+"日"+this.hour+":"+this.minute+":"+this.second+""+this.day;
};
this.toSimpleDate=function(){
returnthis.year+"-"+this.month+"-"+this.date;
};
this.toDetailDate=function(){
returnthis.year+"-"+this.month+"-"+this.date+""+this.hour+":"+this.minute+":"+this.second;
};
this.display=function(ele){
varclock=newClock();
ele.innerHTML=clock.toString();
window.setTimeout(function(){clock.display(ele);},1000);
};
}
Javascript 相关文章推荐
学习YUI.Ext 第七天--关于View&amp;JSONView
Mar 10 Javascript
原生JavaScript实现合并多个数组示例
Sep 21 Javascript
JS返回iframe中frameBorder属性值的方法
Apr 01 Javascript
js完美解决IE6不支持position:fixed的bug
Apr 24 Javascript
jQuery Validate验证框架经典大全
Sep 23 Javascript
AngularJS 控制器 controller的详解
Oct 17 Javascript
微信小程序dom操作的替代思路实例分析
Dec 06 Javascript
微信小程序 Storage更新详解
Jul 16 Javascript
vue使用一些外部插件及样式的配置代码
Nov 18 Javascript
使用Angular9和TypeScript开发RPG游戏的方法
Mar 25 Javascript
vue通过v-html指令渲染的富文本无法修改样式的解决方案
May 20 Javascript
原生js实现表格循环滚动
Nov 24 Javascript
jquery实现背景墙聚光灯效果示例分享
Mar 02 #Javascript
jquery制作弹窗提示窗口代码分享
Mar 02 #Javascript
jquery中ajax函数执行顺序问题之如何设置同步
Feb 28 #Javascript
JavaScript获取当前页面上的指定对象示例代码
Feb 28 #Javascript
jquery获取当前点击对象的value方法
Feb 28 #Javascript
经过绑定元素时会多次触发mouseover和mouseout事件
Feb 28 #Javascript
判断某个字符在一个字符串中是否存在的js代码
Feb 28 #Javascript
You might like
PHP使用栈解决约瑟夫环问题算法示例
2017/08/27 PHP
Javascript 面向对象 命名空间
2010/05/13 Javascript
js parseInt(&quot;08&quot;)未指定进位制问题
2010/06/19 Javascript
关于JavaScript的with 语句的使用方法
2011/05/09 Javascript
Jquery css函数用法(判断标签是否拥有某属性)
2011/05/28 Javascript
select、radio表单回显功能实现避免使用jquery载入赋值
2013/06/08 Javascript
jquery高级编程的最佳实践详解
2014/03/23 Javascript
jquery attr方法获取input的checked属性问题
2014/05/26 Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
2015/12/30 Javascript
JS模仿手机端九宫格登录功能实现代码
2016/04/28 Javascript
9个让JavaScript调试更简单的Console命令
2016/11/14 Javascript
ztree简介_动力节点Java学院整理
2017/07/19 Javascript
Vue自定义指令详解
2017/07/28 Javascript
浅析vue深复制
2018/01/29 Javascript
JavaScript实现微信号随机切换代码
2018/03/09 Javascript
webstorm+vue初始化项目的方法
2018/10/18 Javascript
Vue 中的受控与非受控组件的实现
2018/12/17 Javascript
jQuery与原生JavaScript选择HTML元素集合用法对比分析
2019/11/26 jQuery
python numpy函数中的linspace创建等差数列详解
2017/10/13 Python
python 获取当天每个准点时间戳的实例
2018/05/22 Python
Pycharm取消py脚本中SQL识别的方法
2018/11/29 Python
Python实现决策树并且使用Graphviz可视化的例子
2019/08/09 Python
python自动化UI工具发送QQ消息的实例
2019/08/27 Python
美国在线鲜花速递:ProFlowers
2017/01/05 全球购物
日本最大级玩偶手办购物:あみあみ Amiami
2018/04/23 全球购物
全球领先的中国制造商品在线批发平台:DHgate
2020/01/28 全球购物
linux面试题参考答案(7)
2012/10/29 面试题
代码中finally中的代码会不会执行
2012/02/06 面试题
幼儿园教师师德师风演讲稿:爱我所爱 无悔青春
2014/09/10 职场文书
2014年化验室工作总结
2014/11/21 职场文书
医务人员医德考评自我评价
2015/03/03 职场文书
2015年度物业公司工作总结
2015/04/27 职场文书
趣味运动会广播稿
2015/08/19 职场文书
2016教师廉洁从教心得体会
2016/01/13 职场文书
党风廉政教育心得体会2016
2016/01/22 职场文书
Android Studio实现带三角函数对数运算功能的高级计算器
2022/05/20 Java/Android