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中的delete操作符详细介绍
Jun 06 Javascript
javascript 处理null及null值示例
Jun 09 Javascript
通过设置CSS中的position属性来固定层的位置
Dec 14 Javascript
延时加载JavaScript代码提高速度
Dec 27 Javascript
jQuery 实现评论等级好评差评特效
May 06 Javascript
jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
May 27 Javascript
完美解决js传递参数中加号和&amp;号自动改变的方法
Oct 11 Javascript
关于JS与jQuery中的文档加载问题
Aug 22 jQuery
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
Oct 12 Javascript
基于vue.js组件实现分页效果
Dec 29 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
Feb 26 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
Sep 02 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
Zend Framework教程之路由功能Zend_Controller_Router详解
2016/03/07 PHP
PHP实现的堆排序算法详解
2017/08/17 PHP
《JavaScript高级程序设计》阅读笔记(二) ECMAScript中的原始类型
2012/02/27 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
2014/09/03 Javascript
Javascript实现图片懒加载插件的方法
2016/10/20 Javascript
javascript实现table单元格点击展开隐藏效果(实例代码)
2017/04/10 Javascript
Chrome调试折腾记之JS断点调试技巧
2017/09/11 Javascript
详解react-redux插件入门
2018/04/19 Javascript
nuxt框架中路由鉴权之Koa和Session的用法
2018/05/09 Javascript
vue-cli2 构建速度优化的实现方法
2019/01/08 Javascript
ES6 对象的新功能与解构赋值介绍
2019/02/05 Javascript
layui使用数据表格实现购物车功能
2019/07/26 Javascript
Javascript实现鼠标点击冒泡特效
2019/12/24 Javascript
Nuxt的路由动画效果案例
2020/11/06 Javascript
[00:12]DAC SOLO赛卫冕冠军 VG.Paparazi灬展现SOLO技巧
2018/04/06 DOTA
[49:15]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第二场 1月19日
2021/03/11 DOTA
Python中__init__和__new__的区别详解
2014/07/09 Python
Python实现的一个自动售饮料程序代码分享
2014/08/25 Python
Python 实现购物商城,含有用户入口和商家入口的示例
2017/09/15 Python
python中reader的next用法
2018/07/24 Python
python3 tkinter实现点击一个按钮跳出另一个窗口的方法
2019/06/13 Python
django商品分类及商品数据建模实例详解
2020/01/03 Python
解决Keras中循环使用K.ctc_decode内存不释放的问题
2020/06/29 Python
python 通过 pybind11 使用Eigen加速代码的步骤
2020/12/07 Python
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
2013/01/30 HTML / CSS
美国餐厅用品和厨房设备批发网站:KaTom Restaurant Supply
2018/01/27 全球购物
法国二手MacBook销售网站:Okamac
2019/03/18 全球购物
英国在线药房和在线医生:LloydsPharmacy
2019/10/21 全球购物
中兴通讯全球官方网站:ZTE
2020/12/26 全球购物
《陋室铭》教学反思
2014/02/26 职场文书
工厂见习报告范文
2014/10/31 职场文书
教师自荐信范文
2015/03/06 职场文书
刑事附带民事代理词
2015/05/25 职场文书
妈妈再爱我一次观后感
2015/06/08 职场文书
Pyqt5将多个类组合在一个界面显示的完整示例
2021/09/04 Python
Python Matplotlib绘制条形图的全过程
2021/10/24 Python