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 相关文章推荐
JavaScript 继承详解(四)
Jul 13 Javascript
JS 对象介绍
Jan 20 Javascript
用JSON做数据传输格式中的一些问题总结
Dec 21 Javascript
js获得页面的高度和宽度的方法
Feb 23 Javascript
使用JavaScript为Kindeditor自定义按钮增加Audio标签
Mar 18 Javascript
利用jquery实现下拉框的禁用与启用
Dec 07 Javascript
深入理解在JS中通过四种设置事件处理程序的方法
Mar 02 Javascript
基于vue-cli配置lib-flexible + rem实现移动端自适应
Dec 26 Javascript
解决element-ui中下拉菜单子选项click事件不触发的问题
Aug 22 Javascript
JavaScript时间日期操作实例小结【5个示例】
Dec 22 Javascript
vue2.0 如何在hash模式下实现微信分享
Jan 22 Javascript
Vue ​v-model相关知识总结
Jan 28 Vue.js
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
Views rows style模板重写代码
2011/05/16 PHP
laravel创建类似ThinPHP中functions.php的全局函数
2016/11/26 PHP
完美解决thinkphp唯一索引重复时出错的问题
2017/03/31 PHP
通过PHP设置BugFree获取邮箱通知
2019/04/25 PHP
php框架CI(codeigniter)自动加载与自主创建对象操作实例分析
2020/06/06 PHP
textarea不能通过maxlength属性来限制字数的解决方法
2014/09/01 Javascript
js随机生成网页背景颜色的方法
2015/02/26 Javascript
JavaScript实现的浮动层框架用法实例分析
2015/10/10 Javascript
javascript获取网页各种高宽及位置的方法总结
2016/07/27 Javascript
浅谈jquery采用attr修改form表单enctype不起作用的问题
2016/11/25 Javascript
ES6新特性五:Set与Map的数据结构实例分析
2017/04/21 Javascript
Three.js实现简单3D房间布局
2018/12/30 Javascript
Node.js fs模块(文件模块)创建、删除目录(文件)读取写入文件流的方法
2019/09/03 Javascript
[44:50]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第二局
2016/02/26 DOTA
[01:03:09]完美世界DOTA2联赛PWL S2 Forest vs SZ 第二场 11.25
2020/11/26 DOTA
python 不关闭控制台的实现方法
2011/10/23 Python
对python中UDP,socket的使用详解
2019/08/22 Python
Python如何通过百度翻译API实现翻译功能
2020/04/02 Python
pygame实现弹球游戏
2020/04/14 Python
Python pip安装模块提示错误解决方案
2020/05/22 Python
Pycharm安装python库的方法
2020/11/24 Python
PyQt5中QSpinBox计数器的实现
2021/01/18 Python
亚马逊墨西哥站:Amazon.com.mx
2018/08/26 全球购物
手工制作的音乐盒:Music Box Attic
2019/09/05 全球购物
写自荐信的七个技巧
2013/10/15 职场文书
主管职责范文
2013/11/09 职场文书
法务专员岗位职责
2014/01/02 职场文书
教师队伍管理制度
2014/01/14 职场文书
大学生个人事迹材料
2014/01/21 职场文书
大学毕业生求职自荐信
2014/02/20 职场文书
竞争与合作演讲稿
2014/05/12 职场文书
优秀少先队员主要事迹材料
2014/05/28 职场文书
赤壁观后感(2)
2015/06/15 职场文书
战友聚会致辞
2015/07/28 职场文书
python使用pygame创建精灵Sprite
2021/04/06 Python
如何用JavaScript学习算法复杂度
2021/04/30 Javascript