Javascript 实现计算器时间功能详解及实例(二)


Posted in Javascript onJanuary 08, 2017

Javascript 计算器:

系列文章:

JS 实现计算器详解及实例代码(一)

Javascript计算器 -> 添加时间在屏显区左上角添加时间显示

效果图如下:

Javascript 实现计算器时间功能详解及实例(二)

代码

初始化

// 计算器初始化
Calculator.prototype.init = function () {
 this.addTdClick();

 // 时间显示
 this.showDate();
};

时间显示

// 在屏显区左上角显示时间日期
Calculator.prototype.showDate = function () {
 $("result-date").innerText = new Date().format("hh:mm:ss EEE yyyy-MM-dd");

 var that = this;
 if (this.timer) clearTimeout(this.timer);
 this.timer = setTimeout(function(){
  that.showDate();
 }, 1000); 
};

时间格式化

Date.prototype.format = function (dateStr){}

通过定时器每隔一秒获取时间去显示

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
jQuery 判断元素上是否绑定了事件
Oct 28 Javascript
cookie.js 加载顺序问题怎么才有效
Jul 31 Javascript
js判断当页面无法回退时关闭网页否则就history.go(-1)
Aug 07 Javascript
JavaScript中的无阻塞加载性能优化方案
Oct 10 Javascript
jQuery中contents()方法用法实例
Jan 08 Javascript
js实现功能比较全面的全选和多选
Mar 02 Javascript
详解Vue-cli中的静态资源管理(src/assets和static/的区别)
Jun 19 Javascript
AngularJS修改model值时,显示内容不变的实例
Sep 13 Javascript
Vue路由history模式解决404问题的几种方法
Sep 29 Javascript
vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单
Nov 29 Javascript
在NPM发布自己造的轮子的方法步骤
Mar 09 Javascript
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
Oct 05 Javascript
JS 实现计算器详解及实例代码(一)
Jan 08 #Javascript
详解百度百科目录导航树小插件
Jan 08 #Javascript
Three.js基础部分学习
Jan 08 #Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
Jan 08 #Javascript
jQuery实现页面滚动时智能浮动定位
Jan 08 #Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
Jan 08 #Javascript
jquery实现文字单行横移或翻转(上下、左右跳转)
Jan 08 #Javascript
You might like
php 模拟GMAIL,HOTMAIL(MSN),YAHOO,163,126邮箱登录的详细介绍
2013/06/18 PHP
PHP可变变量学习小结
2015/11/29 PHP
PHP结合Ueditor并修改图片上传路径
2016/10/16 PHP
javascript suggest效果 自动完成实现代码分享
2012/02/17 Javascript
PHP+jQuery+Ajax实现多图片上传效果
2015/03/14 Javascript
常常会用到的截取字符串substr()、substring()、slice()方法详解
2015/12/16 Javascript
基于JavaScript如何实现ajax调用后台定义的方法
2015/12/29 Javascript
JavaScript编写带旋转+线条干扰的验证码脚本实例
2016/05/30 Javascript
Angular 应用技巧总结
2016/09/14 Javascript
用iframe实现不刷新整个页面上传图片的实例
2016/11/18 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
2017/02/13 Javascript
微信小程序 图片宽高自适应详解
2017/05/11 Javascript
详解vue-resource promise兼容性问题
2017/06/20 Javascript
解决AjaxFileupload 上传时会出现连接重置的问题
2017/07/07 Javascript
Angular.js中上传指令ng-upload的基本使用教程
2017/07/30 Javascript
Angular4学习笔记之准备和环境搭建项目
2017/08/01 Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
2017/12/14 Javascript
vue+eslint+vscode配置教程
2019/08/09 Javascript
微信小程序静默登录的实现代码
2020/01/08 Javascript
Python对CSV、Excel、txt、dat文件的处理
2018/09/18 Python
Python操作Sqlite正确实现方法解析
2020/02/05 Python
Python监听键盘和鼠标事件的示例代码
2020/11/18 Python
Python Selenium库的基本使用教程
2021/01/04 Python
漫威玩具服装及周边商品官方购物网站:Marvel Shop
2019/05/11 全球购物
波兰最大的宠物用品网上商店:FERA.PL
2019/08/11 全球购物
如何设定的weblogic的热启动模式(开发模式)与产品发布模式
2012/09/08 面试题
ORACLE第二个十问
2013/12/14 面试题
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/04/11 面试题
保护黄河倡议书
2014/05/16 职场文书
银行求职信怎么写
2014/05/26 职场文书
2014国庆节演讲稿:祖国在我心中(400字)
2014/09/25 职场文书
领导干部整治奢华浪费之风思想汇报
2014/10/07 职场文书
分居协议书范本(律师见证版)
2014/11/26 职场文书
幼儿园教师安全责任书
2015/05/08 职场文书
2016年重阳节慰问信
2015/12/01 职场文书
学习习近平主席讲话心得体会
2016/01/20 职场文书