JS控制日期显示的小例子


Posted in Javascript onNovember 23, 2013

我们在项目中一般会遇到显示时间的问题,一般的处理方式是在前台通过JS控制,JS控制显示时间的代码如下,各种不同的显示方式:

function Clock() {
 var date = new Date();
 this.year = date.getFullYear();
 this.month = date.getMonth() + 1;
 this.date = date.getDate();
 this.day = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六")[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; 
 };//现在是<SPAN id=clock>现在是:2013年3月6日 13:54:17 星期三</SPAN>
<SPAN></SPAN>
 this.toSimpleDate = function() {
  return this.year + "-" + this.month + "-" + this.date;
 };//2013-03-06 this.toDetailDate = function() {
  return this.year + "-" + this.month + "-" + this.date + " " + this.hour + ":" + this.minute + ":" + this.second;
 };//2013-03-06 13:45:43
 this.display = function(ele) {
  var clock = new Clock();
  ele.innerHTML = clock.toString();//显示方式调用
  window.setTimeout(function() {clock.display(ele);}, 1000);
 };
}
Javascript 相关文章推荐
jQuery中removeProp()方法用法实例
Jan 05 Javascript
JS判断客服QQ号在线还是离线状态的方法
Jan 13 Javascript
javascript设计模式之module(模块)模式
Aug 19 Javascript
JavaScript中this的四个绑定规则总结
Sep 26 Javascript
vue.js初学入门教程(2)
Nov 07 Javascript
JS触摸与手势事件详解
May 09 Javascript
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
Jun 20 Javascript
JS按钮闪烁功能的实现代码
Jul 21 Javascript
利用Javascript获取选择文本所在的句子详解
Dec 03 Javascript
layui实现点击按钮给table添加一行
Aug 10 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
Dec 11 Javascript
MutationObserver在页面水印实现起到的作用详解
Jul 07 Javascript
Jquery 动态循环输出表格具体方法
Nov 23 #Javascript
基于jquery异步传输json数据格式实例代码
Nov 23 #Javascript
JavaScript Ajax Json实现上下级下拉框联动效果实例代码
Nov 23 #Javascript
javascript阻止浏览器后退事件防止误操作清空表单
Nov 22 #Javascript
js获取电脑分辨率的思路及操作
Nov 22 #Javascript
JS+CSS 制作的超级简单的下拉菜单附图
Nov 22 #Javascript
Mac/Windows下如何安装Node.js
Nov 22 #Javascript
You might like
php数字转汉字代码(算法)
2011/10/08 PHP
PHP实现根据浏览器跳转不同语言页面代码
2013/08/02 PHP
一漂亮的PHP图片验证码实例
2014/03/21 PHP
Laravel5.7 Eloquent ORM快速入门详解
2019/04/12 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
返回上一页并自动刷新的JavaScript代码
2014/02/19 Javascript
jQuery仿天猫实现超炫的加入购物车
2015/05/04 Javascript
JavaScript为事件句柄绑定监听函数实例详解
2015/12/15 Javascript
Angular.js回顾ng-app和ng-model使用技巧
2016/04/26 Javascript
jsonp跨域请求实现示例
2017/03/13 Javascript
微信小程序实战之自定义抽屉菜单(7)
2017/04/18 Javascript
js推箱子小游戏步骤代码解析
2018/01/10 Javascript
在vue中给列表中的奇数行添加class的实现方法
2018/09/05 Javascript
js实现网页同时进行多个倒计时功能
2019/02/25 Javascript
Webpack的Loader和Plugin的区别
2020/11/09 Javascript
跟老齐学Python之永远强大的函数
2014/09/14 Python
Python入门_浅谈字符串的分片与索引、字符串的方法
2017/05/16 Python
python数据抓取分析的示例代码(python + mongodb)
2017/12/25 Python
python3使用scrapy生成csv文件代码示例
2017/12/28 Python
Django数据库连接丢失问题的解决方法
2018/12/29 Python
django 多对多表的创建和插入代码实现
2019/09/09 Python
Keras模型转成tensorflow的.pb操作
2020/07/06 Python
Python如何输出警告信息
2020/07/30 Python
python爬取股票最新数据并用excel绘制树状图的示例
2021/03/01 Python
css3 media 响应式布局的简单实例
2016/08/03 HTML / CSS
HTML5触摸事件实现移动端简易进度条的实现方法
2018/05/04 HTML / CSS
美国首屈一指的礼品篮供应商:GiftTree
2018/01/06 全球购物
西班牙自行车和跑步商店:Alltricks
2018/07/07 全球购物
Theflamel意大利:女士奢华服装、鞋子和配件
2020/01/11 全球购物
致长跑运动员加油稿
2014/02/20 职场文书
建筑工程造价专业自荐信
2014/07/08 职场文书
团队会宣传标语
2014/10/09 职场文书
销售员工作检讨书(推荐篇)
2014/10/18 职场文书
打架赔偿协议书范本
2014/10/26 职场文书
单位更名证明
2015/06/18 职场文书
护士岗前培训心得体会
2016/01/08 职场文书