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的ajax jsonp的使用解惑
Oct 09 Javascript
jquery中ajax学习笔记3
Oct 16 Javascript
jQuery阻止事件冒泡具体实现
Oct 11 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
Apr 15 Javascript
jQuery实现腾讯信用界面(自制刻度尺)样式
Aug 15 jQuery
vue中配置mint-ui报css错误问题的解决方法
Oct 11 Javascript
Vue 项目部署到服务器的问题解决方法
Dec 05 Javascript
vue2.0 路由不显示router-view的解决方法
Mar 06 Javascript
js+css实现红包雨效果
Jul 12 Javascript
在NPM发布自己造的轮子的方法步骤
Mar 09 Javascript
js中offset,client , scroll 三大元素知识点总结
Sep 11 Javascript
Vue中插槽slot的使用方法与应用场景详析
Jun 08 Vue.js
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
实用函数9
2007/11/08 PHP
关于ob_get_contents(),ob_end_clean(),ob_start(),的具体用法详解
2013/06/24 PHP
CI框架中libraries,helpers,hooks文件夹详细说明
2014/06/10 PHP
PHP生成plist数据的方法
2015/06/16 PHP
PHP5.2中PDO的简单使用方法
2016/03/25 PHP
PHP自定义错误处理的方法分析
2018/12/19 PHP
YII框架行为behaviors用法示例
2019/04/26 PHP
jQuery :nth-child前有无空格的区别分析
2011/07/11 Javascript
jQuery.each()用法分享
2012/07/31 Javascript
js实现点击向下展开的下拉菜单效果代码
2015/09/01 Javascript
JQuery+EasyUI轻松实现步骤条效果
2016/02/22 Javascript
jQuery中 $ 符号的冲突问题及解决方案
2016/11/04 Javascript
jQuery扇形定时器插件pietimer使用方法详解
2017/07/18 jQuery
json2.js 入门教程之使用方法与实例分析
2017/09/14 Javascript
javaScript中"=="和"==="的区别详解
2018/03/16 Javascript
JS中用EL表达式获取上下文参数值的方法
2018/03/28 Javascript
从零学python系列之新版本导入httplib模块报ImportError解决方案
2014/05/23 Python
Python兔子毒药问题实例分析
2015/03/05 Python
Python正则表达式匹配HTML页面编码
2015/04/08 Python
Python while 循环使用的简单实例
2016/06/08 Python
Python用UUID库生成唯一ID的方法示例
2016/12/15 Python
python退出命令是什么?详解python退出方法
2018/12/10 Python
python实现基于信息增益的决策树归纳
2018/12/18 Python
python 堆和优先队列的使用详解
2019/03/05 Python
PyQt5固定窗口大小的方法
2019/06/18 Python
使用pandas 将DataFrame转化成dict
2019/12/10 Python
Python获取二维数组的行列数的2种方法
2020/02/11 Python
Python requests.post方法中data与json参数区别详解
2020/04/30 Python
使用HTML5和CSS3表单验证功能
2017/05/05 HTML / CSS
Html5 FileReader实现即时上传图片功能实例代码
2014/09/01 HTML / CSS
澳洲在线厨具商店:Kitchen Style
2018/05/05 全球购物
必须要使用游标的SQL语句有那些
2012/05/07 面试题
2014两会学习心得:榜样精神伴我行
2014/03/17 职场文书
环保倡议书怎么写
2014/05/16 职场文书
安全知识竞赛主持词
2015/06/30 职场文书
分析SQL窗口函数之聚合窗口函数
2022/04/21 Oracle