使用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 相关文章推荐
用javascript获取当页面上鼠标光标位置和触发事件的对象的代码
Dec 09 Javascript
dotopAlert 提示用户需安装播放器的代码
Sep 17 Javascript
jquery遍历checkbox的注意事项说明
Feb 21 Javascript
js阻止事件追加的具体实现
Oct 15 Javascript
解决js下referer兼容各大浏览器的方法
Nov 03 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
Mar 23 Javascript
AngularJS基础学习笔记之控制器
May 10 Javascript
jQuery实现iframe父窗体和子窗体的相互调用
Jun 17 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
Sep 20 Javascript
vue.js element-ui tree树形控件改iview的方法
Mar 29 Javascript
微信小程序单选框自定义赋值
May 26 Javascript
Vue 电商后台管理项目阶段性总结(推荐)
Aug 22 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 MsSql server时遇到的中文编码问题
2009/06/11 PHP
基于PHPExcel的常用方法总结
2013/06/13 PHP
php自定义扩展名获取函数示例
2016/12/12 PHP
PHP bin2hex()函数基础实例讲解
2019/02/11 PHP
javascript 得到变量类型的函数
2010/05/19 Javascript
基于jQuery的仿flash的广告轮播
2010/11/05 Javascript
浅谈javascript中自定义模版
2015/01/29 Javascript
jQuery动态星级评分效果实现方法
2015/08/06 Javascript
JavaScript精炼之构造函数 Constructor及Constructor属性详解
2015/11/05 Javascript
使用PHP+JavaScript将HTML页面转换为图片的实例分享
2016/04/18 Javascript
Node.js的环境安装配置(使用nvm方式)
2016/10/11 Javascript
Vue.js Ajax动态参数与列表显示实现方法
2016/10/20 Javascript
angular十大常见问题
2017/03/07 Javascript
Node.js学习之地址解析模块URL的使用详解
2017/09/28 Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
2017/12/01 Javascript
vue2中的keep-alive使用总结及注意事项
2017/12/21 Javascript
尝试自己动手用react来写一个分页组件(小结)
2018/02/09 Javascript
深入理解Vue nextTick 机制
2018/04/28 Javascript
浅析Vue 和微信小程序的区别、比较
2018/08/03 Javascript
jquery 动态遍历select 赋值的实例
2018/09/12 jQuery
webpack4 升级迁移的实现
2018/09/12 Javascript
jQuery.validate.js表单验证插件的使用代码详解
2018/10/22 jQuery
利用JS如何获取form表单数据
2019/12/19 Javascript
vue-video-player视频播放器使用配置详解
2020/10/23 Javascript
Python使用functools模块中的partial函数生成偏函数
2016/07/02 Python
Python实现两个list对应元素相减操作示例
2017/06/09 Python
PyCharm配置mongo插件的方法
2018/11/30 Python
python序列类型种类详解
2020/02/26 Python
Python常用类型转换实现代码实例
2020/07/28 Python
美国知名的旅游网站:OneTravel
2018/10/09 全球购物
好的自荐信的要求
2013/10/30 职场文书
环境工程专业自荐信
2014/03/03 职场文书
工作决心书
2014/03/11 职场文书
理想点亮人生演讲稿
2014/05/21 职场文书
死亡赔偿协议书
2015/01/28 职场文书
党支部半年考察意见
2015/06/01 职场文书