JAVAscript学习笔记 js计时器与倒计时 第六节 (原创) 参考js使用表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>倒计时</title> </head> <body onload="getwin()"> <p id="ptime">现在时间</p> <p id="ptime1">距离2018年时间</p> <button id="btn" onclick="stopTime()">停止时间按钮</button> <button id="btn1" onclick="stopwin()">停止弹出框按钮</button> <script> var mytime = setInterval(function(){getTime();},1000);//间隔一秒执行一次该方法 function getTime() { var nowtime = new Date();//获取当前时间 var time = nowtime.toLocaleTimeString();//转换日期十分秒 var endTime=new Date("2018/1/1,0:00:00") //设定倒计时结束时间 var timeXX=(endTime.getTime()-nowtime.getTime())/(1000);//距离2018年的秒数 var date=parseInt(timeXX/(24*60*60)); //换算成天 var xs=parseInt(timeXX/(60*60)%24); //得到小时 var fz=parseInt(timeXX/60%60); //得到分钟 var ms=parseInt(timeXX%60); //得到秒数 var year=nowtime.getFullYear(); //获取现在的年 var month=nowtime.getMonth()+1; //获取现在的月 必须+1 var data=nowtime.getDate(); //获取现在的日 var h=nowtime.getHours();//获取现在的小时 var m=nowtime.getMinutes();//获取现在的分钟 var s=nowtime.getSeconds();//获取现在的秒数 h=checkTime(h); m=checkTime(m); s=checkTime(s); var d=nowtime.getDay(); //获取星期(因星期打印出事0~6,所以用数组形式转化成对应的星期) var weekday=['星期日','星期一','星期二','星期三','星期四','星期五','星期六']; document.getElementById("ptime").innerHTML=year+"年"+month+"月"+data+"日"+" "+weekday[d]+" "+h+":"+m+":"+s; //打印出当前年月日 document.getElementById('ptime1').innerHTML='离2018年:'+date+'天'+xs+'小时'+fz+'分钟'+ms+'秒'; } function getwin() { alert("我是3秒一个的弹出框"); win = setTimeout(function(){getwin();},3000);//延迟3秒出现一个提示框 } function stopTime() { clearInterval(mytime); } function stopwin() { clearTimeout(win); } function checkTime(i){ //设置小于10的时间数字格式,例如5秒显示成05秒 if(i<10){ return '0'+i; }else{ return i; } } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计时器</title> </head> <body onload="getwin()"> <p id="ptime"></p> <button id="btn" onclick="stopTime()">停止时间按钮</button> <button id="btn1" onclick="stopwin()">停止弹出框按钮</button> <script> var mytime = setInterval(function () {getTime();},1000);//间隔一秒执行一次该方法 function getTime() { var d = new Date();//获取当前事件 var t = d.toLocaleTimeString();//转换日期十分秒 var f = document.getElementById("ptime"); f.innerHTML = t; } function getwin() { alert("我是3秒一个的弹出框"); win = setTimeout(function(){getwin();},3000);//延迟3秒出现一个提示框 } function stopTime() { clearInterval(mytime); } function stopwin() { clearTimeout(win); } </script> </body> </html>
JAVAscript学习笔记 js计时器与倒计时 第六节 (原创) 参考js使用表的更多相关文章
- HTML学习笔记 CSS背景样式案例 第六节 (原创) 参考使用表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Java程序猿JavaScript学习笔记(14——扩大jQuery UI)
计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...
- javascript学习笔记(四) Number 数字类型
数字格式化方法toFixed().toExponential().toPrecision(),三个方法都四舍五入 toFixed() 方法指定小数位个数 toExponential() 方法 用科学 ...
- JavaScript:学习笔记(9)——Promise对象
JavaScript:学习笔记(9)——Promise对象 引入Promise Primose是异步编程的一种解决方案,比传统的解决方案回调函数和事件更加合理和强大.如下面为基于回调函数的Ajax操作 ...
- JavaScript:学习笔记(2)——基本概念与数据类型
JavaScript:学习笔记(2)——基本概念与数据类型 语法 1.区分大小写.Test 和 test 是完全不同的两个变量. 2.语句最好以分号结束,也就是说不以分号结束也可以. 变量 1.JS的 ...
- Javascript学习笔记二——操作DOM
Javascript学习笔记 DOM操作: 一.GetElementById() ID在HTML是唯一的,getElementById()可以定位唯一的一个DOM节点 二.querySelector( ...
- Java程序猿的JavaScript学习笔记(汇总文件夹)
最终完结了,历时半个月. 内容包含: JavaScript面向对象特性分析,JavaScript高手必经之路. jQuery源代码级解析. jQuery EasyUI源代码级解析. Java程序猿的J ...
- Java程序猿的JavaScript学习笔记(8——jQuery选择器)
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- Java程序猿JavaScript学习笔记(2——复制和继承财产)
计划和完成在这个例子中,音符的以下序列: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaSc ...
随机推荐
- VCL组件之TLabel、TStaticText和TLabeledEdit
TLabel.TStaticText.TLabeledEdit类的继承关系如下:
- 移动APP测试方法总结
移动APP测试,除了基础功能测试测试方法外,需要额外关注以下方面: 兼容性测试 流量测试 电量测试 弱网络测试 稳定性测试 安全测试 环境相关测试 兼容性测试 针对App通常会考虑这些方面: 1.操作 ...
- 想到一个赚钱的APP
通过APP上发布调查问卷的需求,鼓励人们注册,并给与一定的报酬.需求主要面向一些调查问卷,一类的需求发布
- 动态IP解析
本文介绍两种方便获取主机动态IP的方式(DDNS,IP报告网页),并给出相应的代码实现. shell脚本获取本机IP,执行上传操作和更新DNS操作.定期执行通过crontab或者systemd等服务. ...
- Python学习笔记(八)
Python学习笔记(八): 复习回顾 递归函数 内置函数 1. 复习回顾 1. 深浅拷贝 2. 集合 应用: 去重 关系操作:交集,并集,差集,对称差集 操作: 定义 s1 = set('alvin ...
- PHP中foreach()用法汇总
这篇文章主要给大家详细介绍了PHP中foreach()用法以及相关的示例,十分的细致,有需要的小伙伴可以参考下. PHP 4 引入了 foreach 结构,和 Perl 以及其他语言很像.这只是一种遍 ...
- SpringMvc 关于 EXCEL
概述 我在使用SpingMvc 的EXCEL的发现传统的 AbstractJExcelView jexcel api已经过时 AbstractView poi Api 通过阅读官方文档发现建议我们使用 ...
- Java基础-运算符(03)
概念: 运算符:就是对于常量和变量进行操作的符号. 表达式:用运算符连接起来的符合java语法的式子,不同的运算符连接的表达式是不同类型的表达式. 运算符分类: 算数运算符(+ - * / % ...
- Android Studio常见问题解决
1.Error:Execution failed for task ':XXXX:processDebugManifest'. > Manifest merger failed with mul ...
- css左侧固定宽度,右侧自适应的几种实现方法
左侧固定,右侧自适应或者右侧固定在,左侧自适应是一样的.这种布局很常见,而且面试过程中也经常会问到,这里我总结的方法一共有5种.要实现这种布局,也算比较简单.我们先给出html结构: <div ...