- 浏览: 13638808 次
- 性别:
- 来自: 洛杉矶
文章分类
- 全部博客 (1994)
- Php / Pear / Mysql / Node.js (378)
- Javascript /Jquery / Bootstrap / Web (435)
- Phone / IOS / Objective-C / Swift (137)
- Ubuntu / Mac / Github / Aptana / Nginx / Shell / Linux (335)
- Perl / Koha / Ruby / Markdown (8)
- Java / Jsp (12)
- Python 2 / Wxpython (25)
- Codeigniter / CakePHP (32)
- Div / Css / XML / HTML5 (179)
- WP / Joomla! / Magento / Shopify / Drupal / Moodle / Zimbra (275)
- Apache / VPN / Software (31)
- AS3.0/2.0 / Flex / Flash (45)
- Smarty (6)
- SEO (24)
- Google / Facebook / Pinterest / SNS (80)
- Tools (22)
最新评论
-
1455975567:
xuezhongyu01 写道wocan23 写道我想问下那个 ...
Mysql: LBS实现查找附近的人 (两经纬度之间的距离) -
xuezhongyu01:
wocan23 写道我想问下那个111.1是怎么得来的我也看不 ...
Mysql: LBS实现查找附近的人 (两经纬度之间的距离) -
18335864773:
试试 pageoffice 在线打开 PDF 文件吧. pag ...
jquery在线预览PDF文件,打开PDF文件 -
青春依旧:
opacity: 0.5; 个人喜欢这种方式!关于其他css特 ...
css透明度的设置 (兼容所有浏览器) -
July01:
推荐用StratoIO打印控件,浏览器和系统的兼容性都很好,而 ...
搞定网页打印自动分页问题
A: setTimeout( )
setTimeout( ) 是属于 window 的 method, 但我们都是略去 window 这顶层对象名称 , 这是用来设定一个时间 , 时间到了 , 就会执行一个指定的 method 。请先看以下一个简单 , 这是没有实际用途的例子 , 只是用来示范 setTimeout( ) 的语法。
1. setTimeout( ) 语法例子
等候三秒才执行的 alert( )
1. 请用浏览器开启示范磁盘中的 timeout1.htm, 这档案有以下内容 :
<html> <body bgcolor=lightcyan text=red> <h1> <font color=blue> 示范网页 </font> </h1> <p> </br> <p> 请等三秒! <script> setTimeout("alert(‘对不起, 要你久候’)", 3000 ) </script> </body> </html>
2. 留意网页开启后三秒 , 就会出现一个 alert 对话盒。
setTimeout( ) 是设定一个指定等候时间 ( 单位是千分之一秒 , millisecond), 时间到了 , 浏览器就会执行一个指定的 method 或 function, 有以下语法 :
今次例子是设定等 3 秒 (3000 milliseconds), 浏览器就会执行 alert( ) 这一个 method 。
2. 用 setTimeout( ) 来执行 function
setTimeout( ) 通常是与 function 一起使用 , 以下是一个较上个练习复杂的例子。
状态栏中自动消失的文字
1. 请用浏览器开启示范磁盘中的 timeout2.htm, 这档案有以下内容 :
<html> <body bgcolor=lightcyan text=red> <h1> <font color=blue> 示范网页 </font> </h1> <p> </br> <script> function clearWord() { window.status="" } </script> <form> <input type=”button” value="在状态栏显示文字" onClick=”window.status='hello' , setTimeout('clearWord()', 3000) “> </form> </body> </html>
2. 请在按钮上单击 , 你应见到状态栏出现 Hello 这字 , 留意过了三秒 , 这字就会消失。
1. 这处先设定一个名为 clearWord( ) 的 function, 作以下定义 :
window.status=”"
这是用来消除状态栏的文字 ( 请看练习 -20 的说明 ), 浏览器执行 clearWord( ) , 就会消除状态栏的文字。
2. 今次按钮设定了启动以下两项工作 , 用 , 分隔 , 浏览器会顺序执行这两项工作 :
onClick=”window.status=’Hello’ , setTimeout(‘clearWord( )’, 3000) ”
3. 今次的 setTimeout( ) 有以下设定 :
这是设定等 3 秒 (3000 milliseconds) 浏览器就会执行 clearWord( ) 这一个 function 。
在第 2 章 , 你看过如何使到父窗口开启时自动开启一个子窗口 , 若观看者不关闭这子窗口 , 这子窗口就会一路开启。看过以上的练习 , 请你设计一个会开启子窗口的网页 , 而这子窗口在开启后两秒 , 就会自动关闭。
3. 不断重复执行的 setTimeout( )
setTimeout( ) 预设只是执行一次 , 但我们可以使用一个循环方式 , 使到一个 setTimeout( ) 再启动自己一次 , 就会使到第二个 setTimeout( ) 执行 , 第二个又启动第三个 , 这样循环下去 , 这 setTimeout( ) 就会不断执行。
自动每秒加 1 的 function
在这练习 , 你看到如何使用 setTimeout( ) 令文字框的数值每秒就加 1, 当然你也可以设定其他递增的速度 , 例如每五秒就加 5, 或每五秒就加 1 。
1. 请用浏览器开启示范磁盘中的 timeout3.htm, 这档案有以下内容 :
<html> <head> <script> x = 0 function countSecond( ) { x = x+1 document.fm.displayBox.value=x setTimeout(“countSecond( )”, 1000) } </script> </head> <body bgcolor=lightcyan text=red> <p> </br> <form name=fm> <input type=”text” name=”displayBox” value=”0″ size=4 > </form> <script> countSecond( ) </script> </body> </html>
2. 网页开启后 , 请你留意文字框中的数值转变。
3. 请你将这档案复制去硬盘 , 更改一些设定 , 例如 x = x+5, 或将等候时间改为 5000, 看有什么反应。
1. 这网页有两个 script, 第一个是设定 countSecond( ) 这个 function, 第二个在后的是在网页完全加载后 , 就启动这 function 。
2. 留意今次以下的设定 :
function countSecond( )
{ x = x+1
document.fm.displayBox.value = x
setTimeout( “ countSecond( ) ” , 1000)
}
当 countSecond( ) 启动后 , 就会启动 setTimeout( ), 这个 method 在一秒后又启动 countSecond( ), countSecond( ) 启动后又启动 setTimeout( ) , 所以得出的结果是 countSecond( ) 每秒执行一次。
3. 在 JavaScript, 我们是使用这处说的方法使到一些事项不断执行 , 其中一个用途是显示转动时间 , 另一个用途是设定跑动文字 , 随后的章节会有例子。
用上述的方法设定时间 , setTimeout( ) 虽然设定了是一秒 , 但浏览器还有另外两项功能要执行 , 所以一个循环的时间是稍多于一秒 , 例如一分钟可能只有 58 个循环。
4. 设定条件使 setTimeout( ) 停止
setTimeout( ) 的循环开始后 , 就会不断重复 , 在上个练习 , 你看到文字框的数字不断跳动 , 但我们是有方法使到数字跳到某一个数值就停下来 , 其中一个方法是用 if … else 设定一个条件 , 若是 TRUE 就继续执行 setTimeout( ) , 若是 FALSE 就停止。
例如要使到上个练习的 counter 跳到 20 就停下 , 可将有关的 function 作以下的更改。
function countSecond( )
{ if ( x < 20 )
{ x = x + 1
document.displaySec.displayBox.value = x
setTimeout( “ countSecond( ) ” , 1000)
}
}
5. 计分及计秒的 counter
在前面的练习 , 相信你已学识如何使用 setTimeout( ), 现在请你看一个较复习的例子。
计时的 counter
在这练习 , 你要设定两个文字框 , 一个显示分钟 , 另一个显示秒 , 网页开启后 , 就会在这两个文字框中自动计时。
1. 请用浏览器开启示范磁盘中的 timeout4.htm, 这档案有以下内容 :
<html> <head> <script> x=0 y=-1 function countMin( ) { y=y+1 document.displayMin.displayBox.value=y setTimeout("countMin( )",60000) } function countSec( ) { x = x + 1 z =x % 60 document.displaySec.displayBox.value=z setTimeout(“countSec( )”, 1000) } </script> </head> <body bgcolor=lightcyan text=red> <p> </br> <table> <tr valign=top> <td> 你在本网页的连接时间是: </td> <td> <form name=displayMin> <input type=”text” name=”displayBox” value=”0″ size=4 > </form> </td> <td> 分 </td> <td> <form name=displaySec> </td> <td> <input type=”text” name=”displayBox” value=”0″ size=4 > </form> </td> <td> 秒。</td> </tr> </table> <script> countMin( ) countSec( ) </script> </body> </html>
2. 请你留意两个文字框中的数字转变。
1. 这网页有两个 function, 一个用来计分钟 , 一个用来计秒。在这处 , 笔者只是示范 setTimeout( ) 的操作 , 因为定时器有其他更精简的写法。 ( 留意 : 这方式的计时并不准确。 )
2. 留意计秒的 function:
function countSec( )
{ x = x + 1
z = x % 60
document.displaySec.displayBox.value=z
setTimeout( “ countSec( ) ” , 1000)
}
这处的 % 符号是 modulus ( 余数 ), 例如 z = x % 60 表示先进行 x / 60, 得出的余数作为 z 这变量 , 例如 82 秒 , modulus 就是 22, 所以文字框会显示 22 而不是 82 。
3. 若你要将单位数字在前加上 0, 例如 01, 02, 03 等 , 可用以下方法 :
function countSec( )
{ x = x + 1
z = x % 60
if (z < 10) { z = “ 0 ″ + z }
document.displaySec.displayBox.value=z
setTimeout( “ countSec( ) ” , 1000)
}
——————————————————————————–
B: clearTimeout( )
在前一节 , 你看过如何使用 setTimeout( ) 来使到浏览器不断执行一个 function, 当一个 setTimeout( ) 开始了循环的工作 , 我们要使它停下来 , 可使用 clearTimeout( ) 这 method 。
clearTimout( ) 有以下语法 : clearTimeout(timeoutID)
要使用 clearTimeout( ), 我们设定 setTimeout( ) 时 , 要给予这 setTimout( ) 一个名称 , 这名称就是 timeoutID , 我们叫停时 , 就是用这 timeoutID 来叫停 , 这是一个自定义名称 , 但很多程序员就以 timeoutID 为名。
在下面的例子 , 笔者设定两个 timeoutID, 分别命名为 meter1 及 meter2, 如下 :
timeoutID
↓
meter1 = setTimeout(“count1( )”, 1000)
meter2 = setTimeout(“count2( )”, 1000)
使用这 meter1 及 meter2 这些 timeoutID 名称 , 在设定 clearTimeout( ) 时 , 就可指定对哪一个 setTimeout( ) 有效 , 不会扰及另一个 setTimeout( ) 的操作。
可停止的 setTimeout( )
这练习以练习 -71 为蓝本 , 但作了两个改变 : (1) 有两个 setTimeout( ), (2) 有两个按钮 , 分别可停止这两个 setTimout( ) 。
1. 请用浏览器开启示范磁盘中的 clear.htm, 这档案有以下内容 :
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script> x = 0 y = 0 function count1() { x = x + 1 document.display1.box1.value = x meter1=setTimeout("count1()", 1000) } function count2() { y = y + 1 document.display2.box2.value = y meter2=setTimeout("count2()", 1000) } </script> </head> <body bgcolor=lightcyan text=red> <p> </br> <form name="display1"> <input type="text" name="box1" value="0" size=4 > <input type=button value="停止计时" onClick="clearTimeout(meter1) " > <input type=button value="继续计时" onClick="count1() " > </form> <p> <form name="display2"> <input type="text" name="box2" value="0" size=4 > <input type=button value="停止计时" onClick="clearTimeout(meter2) " > <input type=button value="继续计时" onClick="count2() " > </form> <script> count1() count2() </script> </body> </html>
2. 留意网页中的两个文字框及内里变动的数字 , 每个文字框旁有两个按钮 , 请你试试两个按钮的反应。
3. 请你连续按多次 [ 继续计时 ] 的按钮 , 留意数值的跳动加快了 , 原因是每按一次就启动 function 一次 , 每个 function 都令数值跳动 , 例如启动同一的 function 四次 , 就会一秒跳四次。 ( 请看下一节 )
——————————————————————————–
C: Set flag
前个练习说到我们用一个按钮来启动一个 function, 每单击就会启动这 function 一次 , 请看以下例子。
效果重复的 setTimeout( )
这练习实际是将 练习 -73 简化 , 只有一个定时器 , 笔者想示范的是每按 [ 继续计时 ] 一次 , 就会启动 count( ) 这 function 一次。
1. 请用浏览器开启示范磁盘中的 flag1.htm, 这档案有以下内容 :
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script> x=0 function count() { x = x + 1 document.display.box.value= x timeoutID=setTimeout("count()", 1000) } </script> </head> <body bgcolor=lightcyan text=red> <p> </br> <form name=display> <input type="text" name="box" value="0" size=4 > <input type=button value="停止计时" onClick="clearTimeout(timeoutID) " > <input type=button value="继续计时" onClick="count() " > </form> <p> <script> count() </script> </body> </html>
2. 网页开启后 , 你应见到文字框中的数字跳动 , 请你按四次 [ 继续计时 ], 留意这会加快数字跳动 , 原因是有关的 function 被开启了多个 , 每个都会使数字转变。
3. 按了四次 [ 继续计时 ] 的按钮后 , 请你按 [ 停止计时 ] 的按钮 , 你会发现要按五次才能停止数字跳动。
在编写程序时 , 我们常要提防使用者作出一些特别动作 , 例如使用者按两次 [ 继续计时 ] 按钮 , 这定时器就失准了。我们是否有办法使到一个按钮被按一次就失效呢 ? 这就不会产生重复效果。
笔者藉这处的例子 ( 随后还有多个例子 ), 解说程序中一个 set flag ( 设定旗标 ) 的概念 , flag 是一个记认 , 一般来说 , 这可以是 0 或是 1 ( 也可用 on 或 off, 或任何两个自选的名称或数字 ), 但也可以是 2 、 3 、 4 或更大的数字 , 在这例子有以下设定 :
1. 程序开启时 flag=0 。
2. 当 counter( ) 执行时会顺便将 flag 变为 1 。
3. 在 [ 继续计时 ] 这按钮的反应中 , 会先检查 flag 是 0 或是 1, 若是 0 就会产生作用 , 若是 1 就没有反应。
4. 使用这 flag 的方式 , count( ) 这 function 开启后 , [ 继续计时 ] 这按钮就没有作用。
这处的 flag 是一个变量 , 可任意取名 , 我们用 flag 来称呼这变量的原因 , 是因为这变量好处一支旗 , 将旗竖起 (flag is on), 就会产生一个作用 , 将旗放下 (flag is off), 就产生另一个作用。
只可开启一次的 function
这练习是将上个练习加多一个 flag, 使到每次只能有一个 count( ) 这 function 在进行。
1. 请用浏览器开启示范磁盘中的 flag2.htm, 这档案有以下内容 :
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script> x = 0 flag = 0 function count() { x = x + 1 document.display.box.value = x timeoutID=setTimeout("count()", 1000) flag = 1 } function restart() { if (flag==0) { count() } } </script> </head> <body bgcolor=lightcyan text=red> <p> </br> <form name="display"> <input type="text" name="box" value="0" size=4 > <input type=button value="停止计时" onclick="clearTimeout(timeoutID); flag=0 " > <input type=button value="继续计时" onclick="restart() " > </form> <p> <script> count() </script> <form> <input type=button value="Show flag" onClick="alert('The flag now is '+ flag) " > </form> </body> </html>
2. 在网页中 , 你应见到三个按钮及文字框中的数字跳动。
3. 请你按 [Show flag] 这按钮 , 应见到一个话对盒显示 flag 是 1 。
4. 请你按 [ 停止计时 ] 这按钮 , 数字停止跳动 , 请你按 [Show flag] 这按钮 , 应见到话对盒显示 flag 是 0 。
5. 请你按多次 [ 继续计时 ] 这按钮 , 你应见到数字不会加快 , 请你按 [Show flag] 这按钮 , 应见到话对盒显示 flag 变回 1 。
1. 这网页第 4 行有这一句 : flag=0 , 这是设定 flag 这变量及将初始值定为 0, 你也可将初始值定为 1, 随后有关的 0 和 1 对调。
2. count( ) 这 function 最后一句是 flag=1 , 所以启动 count( ) 后 , flag 就会变为 1 。
3. [ 继续计时 ] 的按钮是用来启动 restart( ), 这 function 有以下设定 :
function restart( )
{ if (flag==0)
{ count( ) }
}
这处的 if statement 检查 flag 是否等于 0, 若是 0 就启动 count( ), 若是 1 ( 即不是 0) 就没有反应 , 使用这方法 , 若 count( ) 已在执行中 , [ 继续计时 ] 这按钮不会有作用。
这处的 flag=1 设定 , 实际设为 1 或 2 或 3 等数值都是一样的 , 只要不是 0 就可以了 , 所以这两个相对的旗标 , 看似是 “ 0 ″ 和 “ 1 ″ , 实际是 “ 0 ″ 和 “ non-zero ” ( 非 -0) 。
4. [ 停止计时 ] 的按钮有以下设定 :
onClick=”clearTimeout(timeoutID); flag=0 ”
这是停止 setTimeout( ) 的操作时 , 同时将 flag 转回 0, 这使到 restart( ) 这 function 可以重新启动 count( ) 。
发表评论
-
使用jQuery和Pure.CSS创建一个可编辑的表格
2016-08-26 02:24 1178使用开源组件真的可以 ... -
2016十大优秀jQuery插件推荐
2016-08-26 02:24 2262当有限的开发知识限制了设计进展,你无法为自己插上创新的翅膀时 ... -
jQuery .tmpl() 用法
2016-08-26 02:22 1175参考效果: DEMO 下载: jquery-tmpl-ma ... -
jQuery:从零开始,DIY一个jQuery(2)
2016-08-19 03:06 1014在上篇文章我们简单实 ... -
jQuery:从零开始,DIY一个jQuery(1)
2016-08-19 03:00 943从本篇开始会陪大家一起从零开始走一遍 jQuery 的奇妙旅 ... -
Bootstrap 3: 菜单居中 Center content in responsive bootstrap navbar
2016-08-18 06:15 1549先看上面图片的效果,下面是代码: .navbar .nav ... -
jQuery: 操作select option方法集合
2016-08-18 06:06 3298每一次操作select的时候,总是要谷歌一下资料,真是太不爽 ... -
jQuery: 插件开发模式详解 $.extend(), $.fn, $.widget()
2016-08-16 05:31 1203原文:http://www.codeceo.com/arti ... -
jQuery: 选择器(DOM,name,属性,元素)
2016-08-11 01:17 4458出处:http://www.cnblogs.com/star ... -
jQuery: 合并表格中相同文本的相邻单元格
2016-08-01 08:02 1340一、效果 二、代码 <!DOCTYPE ... -
Bootstrap 3: 使用注意box-sizing细节及解决方法
2016-08-01 07:58 1557一、bootstrap样式 在Bootstrap v3.3 ... -
域名详解
2016-07-29 12:51 823域名 域名就是用来唯 ... -
Bootstrap 3: 图标转换事件 Change icons when toggle
2016-07-20 13:39 2276代码: <link href="http: ... -
Bootstrap 3: 图标转换事件 Change icons when toggle
2016-07-19 07:12 717代码: <link href=" ... -
jQuery:无限循环两个或者多个事件 click / toggle between two functions
2016-07-19 07:12 1593插件: (function($) { $.fn. ... -
javascript 中面向对象实现 如何继承
2016-07-14 01:01 504上一篇博客已经说了关于javascript中的封装, 其中也 ... -
javascript 中的面向对象实现 如何封装
2016-07-12 12:27 1181javascript 是一门很灵活的语言,也是一门有缺陷的语 ... -
AngularJS jQuery 共存法则
2016-06-14 05:26 3574寻找正确的方法,如何在AngularJS里使用jQuery ... -
七步从Angular.JS菜鸟到专家(3):数据绑定和AJAX
2016-06-04 05:28 1102AngularJS学习列表:七步 ... -
七步从Angular.JS菜鸟到专家(2):Scopes
2016-06-04 05:27 691AngularJS学习列表:七步走 Angular.js 从 ...
相关推荐
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。 注:调用过程中,可以使用clearTimeout(id_of_settimeout)终止 参数 描述 code 必需,要调用的函数后要执行的 JavaScript 代码串。 ...
java后台定时器最简单用法实例,类似于js里的setTimeOut
js中settimeout方法加参数的使用实例.docx
setTimeout和setInterval的语法相同。它们都有两个参数,一个是将要执行的代码字符串,还有一个是以毫秒为单位的时间间隔,当过了那个时间段之后就将执行那段代码。不过这两个函数还是有区别的,setInterval在执行完...
setTimeout()从载入后延迟指定的时间去执行一个表达式或者是函数;仅执行一次 ;和window.clearTimeout一起使用.我在 代码如下:$(document).ready(function(){setTimout(test(),200); function test() { alert(1&#...
js中setTimeout()与clearTimeout()用法实例浅析.docx
本文实例讲解了JS中setTimeout()的用法,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> &...
setTimeout这个JS内置函数其用法也很简单,下面是setTimeout()的函数说明以及用法详解和实例、示例代码:setTimeout()的作用是指定在多少毫秒后执行一个JS函数或者表达式代码 setTimeout的用法、语法、参数:...
JS里设定延时: 使用SetInterval和... clearTimeout(对象) 清除已设置的setTimeout对象 clearInterval(对象) 清除已设置的setInterval对象 使用定时器实现JavaScript的延期执行或重复执行 window对象提供了两个方法来
详解CocosCreator中几种计时器的使用方法 一、setTimeOut 3秒后打印abc。只执行一次。 setTimeout(()=>{console.log("abc"); }, 3000); 删除计时器,3秒后不会输出abc。 let timeIndex; timeIndex = ...
js中SetInterval与setTimeout用法.pdf
js中的setInterval和setTimeout使用实例.docx
setTimeout setTimeout 语法例子 用 setTimeout 来执行 function 不断重复执行的 setTimeout 设定条件使 setTimeout 停止 计分及计秒的 counter clearTimeout Set flag 1. SetTimeOut() 1.1 SetTimeOut()语法例子 ...
前言 setTimeout,前端工程师必定会打交道的一个函数。...实例代码如下: var time1=new Date().getTime(); console.log(1,time1); setTimeout(function(){ var time4=new Date().getTime(); console.log
详细讲解SetInterval与setTimeout的区别和用法
使用setTimeout()方法模拟进度条
使用SetInterval和设定延时函数setTimeout 很类似。setTimeout 运用在延迟一段时间,再进行某项操作。