这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文主要介绍了通过 js 实现页面的倒计时功能的思路与方法,具有一定的参考价值,下面跟着小编一起来看下吧
通过 js 实现页面的倒计时功能。
思路: 传入一个秒数 c,c/60 可以得到分钟 m, c` 可以得到显示的秒数 s,同理,再将 m/60 可是得到小时数, m/% 可以得到分钟数。通过 setInterval 每次将总秒数 - 1,并将计算所得时间显示到页面上。
第一版的肮脏代码如下, 可以作为反面教材思考一下
- <html>
- <head>
- <title>
- Tomato
- </title>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <script type="text/javascript">
- var vTimeLength = 5;
- var vHour;
- var vMinutes;
- var vSeconds;
- var vRemainingTime;
- function countDown() {
- vTimeLength = vTimeLength - 1;
- vMinutes = Math.floor(vTimeLength / 60);
- vSeconds = Math.floor(vTimeLength`);
- if (vMinutes >= 60) {
- vHour = Math.floor(vMinutes / 60);
- var vMinutesNew = Math.floor(vMinutes`);
- vRemainingTime = vHour + ":" + vMinutesNew + ":" + vSeconds;
- } else {
- vRemainingTime = vMinutes + ":" + vSeconds;
- }
- document.getElementById("div_countDown").innerHTML = vRemainingTime;
- if (vTimeLength < 1) {
- alert('do sth');
- }
- }
- </script>
- </head>
- <body>
- <div id="div_countDown">
- </div>
- <script type="text/javascript">
- setInterval("countDown()", 1000);
- </script>
- </body>
- </html>
缺陷:
1、定义了众多的全局变量,
2、没有复用性,
3、setInterval 容易导致队列过多, 结束事件如果是非阻塞事件, 倒计时会继续执行出现负数,
4、不符合面向对象思想。。。
针对缺陷 1 的解决方案是, 定义一个函数, 将相关全局变量放到函数内部,使之成为局部变量
针对缺陷 2:为函数指定参数,提高复用性。 这里定义了 3 个参数 vTimeLength 为倒计时总秒数,showTagId 为显示到页面元素的 id, callback 为倒计时结束后的回掉方法
针对缺陷 3:用 setTimeout 替代 setInterval
优化后的代码如下:
- <html>
- <head>
- <title>
- countdown
- </title>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <script type="text/javascript">
- function countDown(vTimeLength, showTagId, callback) {
- var vHour;
- var vMinutes;
- var vMinutesNew
- var vSeconds;
- var vRemainingTime;
- function countDownInner(vTimeLength) {
- vMinutes = Math.floor(vTimeLength / 60);
- vSeconds = Math.floor(vTimeLength`);
- if (vMinutes >= 60) {
- vHour = Math.floor(vMinutes / 60);
- vMinutesNew = Math.floor(vMinutes`);
- vRemainingTime = vHour + ":" + vMinutesNew + ":" + vSeconds;
- } else {
- vRemainingTime = vMinutes + ":" + vSeconds;
- }
- document.getElementById(showTagId).innerHTML = vRemainingTime;
- vTimeLength = vTimeLength - 1;
- if (vTimeLength > 0) {
- setTimeout(function() {
- countDownInner(vTimeLength);
- },
- 1000);
- } else {
- callback();
- }
- }
- countDownInner(vTimeLength);
- }
- </script>
- </head>
- <body>
- <div id="div_countDown">
- </div>
- <script type="text/javascript">
- countDown(5, "div_countDown",
- function() {
- alert('do sth');
- });
- </script>
- </body>
- </html>
这里有一点需要注意
- setTimeout(function(){countDownInner(vTimeLength);}, 1000);
第一次我将此句写成了
- setTimeout(countDownInner(vTimeLength), 1000);
结果函数直接执行了, 没有等待 1 秒的时间。如果没有入参, 即 setTimeout("countDownInner()", 1000); 则可正常执行。
至于前面提到的不够面向对象的缺陷, 也是刚刚接触, 这里贴出代码,希望能够互相交流
- <html>
- <head>
- <title>
- count_down
- </title>
- <script type="text/javascript">
- var countDown = {
- flag: true,
- hour: 0,
- minutes: 0,
- minutesNew: 0,
- seconds: 0,
- show: 0,
- current: 0,
- length: 0,
- showTagId: null,
- // callback: null,
- countDownInner: function(vTimeLength) {
- if (!this.flag) {
- return;
- }
- var that = this;
- this.current = vTimeLength;
- minutes = Math.floor(vTimeLength / 60);
- seconds = Math.floor(vTimeLength`);
- if (minutes >= 60) {
- hour = Math.floor(minutes / 60);
- minutesNew = Math.floor(minutes`);
- show = hour + ":" + minutesNew + ":" + seconds;
- } else {
- show = minutes + ":" + seconds;
- }
- document.getElementById(this.showTagId).innerHTML = show;
- vTimeLength = vTimeLength - 1;
- if (vTimeLength > 0) {
- setTimeout(function() {
- that.countDownInner(vTimeLength);
- },
- 1000);
- } else {
- setTimeout(function() {
- that.callback();
- },
- 1000);
- }
- },
- run: function(vTimeLength, showTagId, callback) {
- if (!this.flag) {
- this.flag = true;
- this.countDownInner(this.current);
- } else if (showTagId) {
- this.length = vTimeLength;
- this.showTagId = showTagId;
- this.callback = callback;
- this.countDownInner(vTimeLength);
- }
- },
- stop: function() {
- this.flag = false;
- },
- restart: function() {
- this.flag = true;
- this.countDownInner(this.length);
- }
- };
- function countDownStart() {
- countDown.run();
- }
- function countDownStop() {
- countDown.stop();
- }
- </script>
- </head>
- <body>
- <div id="div_countDown">
- </div>
- <script type="text/javascript">
- countDown.run(5, 'div_countDown',
- function() {
- alert('12')
- });
- </script>
- <span>
- <button onclick="countDownStart();">
- start
- </button>
- <button onclick="countDownStop();">
- stop
- </button>
- </span>
- </body>
- </html>
一个难点是 this 的使用, 在函数内部, this 是调用当前函数范围,所以 setTimeout(function(){this.countDownInner(vTimeLength);}, 1000); 会出现 undefined。
解决方案是定义一个 that 变量接收外部函数的 this 指针,然后通过 that 即可调用外部域。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持 phperz!
来源: http://www.phperz.com/article/17/0601/328819.html