使用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 相关文章推荐
给moz-firefox下添加IE方法和属性
Apr 10 Javascript
CSS+jQuery实现的一个放大缩小动画效果
Sep 24 Javascript
jQuery实现的多屏图像图层切换效果实例
May 07 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
Oct 10 Javascript
JS实现的判断方法、变量是否存在功能示例
Mar 28 Javascript
解决vue 表格table列求和的问题
Nov 06 Javascript
mpvue微信小程序开发之实现一个弹幕评论
Nov 24 Javascript
js 数组当前行添加数据方法详解
Jul 28 Javascript
nginx部署多个vue项目的方法示例
Sep 06 Javascript
Vue实现简单的留言板
Oct 23 Javascript
vant 解决tab切换插件标题样式自定义的问题
Nov 13 Javascript
详细聊聊vue中组件的props属性
Nov 02 Vue.js
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
在smarty模板中使用PHP函数的方法
2011/04/23 PHP
php5.3 注意事项说明
2013/07/01 PHP
getJSON跨域SyntaxError问题分析
2014/08/07 PHP
php使用正则表达式去掉html中的注释方法
2016/11/03 PHP
jQuery中:hidden选择器用法实例
2014/12/30 Javascript
JavaScript与ActionScript3两者的同性与差异性
2016/09/22 Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
2016/12/31 Javascript
详解angular如何调用HTML字符串的方法
2018/06/30 Javascript
webpack4.x开发环境配置详解
2018/08/04 Javascript
jQuery实现获取及设置CSS样式操作详解
2018/09/05 jQuery
基于Nodejs的Tcp封包和解包的理解
2018/09/19 NodeJs
如何基于JavaScript判断图片是否加载完成
2019/12/28 Javascript
Vue.js仿Select下拉框效果
2020/02/18 Javascript
详解Python的迭代器、生成器以及相关的itertools包
2015/04/02 Python
详解python之多进程和进程池(Processing库)
2017/06/09 Python
基于hashlib模块--加密(详解)
2017/06/21 Python
python list元素为tuple时的排序方法
2018/04/18 Python
Python实现的读取/更改/写入xml文件操作示例
2018/08/30 Python
Python判断有效的数独算法示例
2019/02/23 Python
python使用opencv对图像mask处理的方法
2019/07/05 Python
详解Python3 pandas.merge用法
2019/09/05 Python
python 串行执行和并行执行实例
2020/04/30 Python
keras训练曲线,混淆矩阵,CNN层输出可视化实例
2020/06/15 Python
python 解决selenium 中的 .clear()方法失效问题
2020/09/01 Python
StubHub哥伦比亚:购买和出售您的门票
2016/10/20 全球购物
彪马美国官网:PUMA美国
2017/03/09 全球购物
friso美素佳儿官方海外旗舰店:荷兰原产原罐
2017/07/03 全球购物
简述进程的启动、终止的方式以及如何进行进程的查看
2013/07/12 面试题
Java如何调用外部Exe程序
2015/07/04 面试题
房地产员工找工作的自我评价
2013/11/15 职场文书
领导检查欢迎词
2014/01/14 职场文书
拓展策划方案
2014/06/03 职场文书
红旗渠导游词
2015/02/09 职场文书
《春酒》教学反思
2016/02/22 职场文书
Vue Element-ui表单校验规则实现
2021/07/09 Vue.js
Go中的条件语句Switch示例详解
2021/08/23 Golang