Blogger Information
Blog 26
fans 1
comment 0
visits 22370
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
JS/Jquery第课 定义对象和定时器发送验证码
孤忆寻昔R
Original
802 people have browsed it
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>js 对象</title>
  6. </head>
  7. <body>
  8. <button id="btn" onclick="seng()">放松验证码</button>
  9. <script type="text/javascript">
  10. // 定义对象 有两种 new 动态加属性 ,直接赋值给变量
  11. /* var obj = new Object();
  12. obj.name = 'emagic';
  13. obj.age = '20';
  14. obj.spek = function(){
  15. console.log('我会看车');
  16. };
  17. //调用对象
  18. obj.spek();*/
  19. // 定义对象函数
  20. /*function spek()
  21. {
  22. console.log('看车');
  23. }
  24. spek()*/;
  25. // 直接赋值给对象
  26. // var obj = {age:'50',name:'张三'};
  27. // obj.addr = "shena shen";
  28. // 第二种调用方式
  29. /* var obj = {age:'50',name:'张三'};
  30. obj.add = "ks shen";
  31. obj.spek = function(){
  32. console.log('我会说话了');
  33. };
  34. obj.spek();*/
  35. /*// 第二种定义对象
  36. var obj = {
  37. name:'emagic',
  38. age:20,
  39. spek:function(){
  40. console.log('开测');
  41. },
  42. };
  43. obj.spek();*/
  44. /*// 对象传参
  45. var obj={
  46. name: '校长三',
  47. age: 20,
  48. keps:function(kes){
  49. console.log('开测'+kes);
  50. },
  51. };
  52. obj.keps('这是对象穿三');*/
  53. // 第二种动态定义加参数
  54. /*var obj = {
  55. name:"肇庆",
  56. age: 20,
  57. keop:function(ks){
  58. console.log('连接传参['+ks+']');
  59. },
  60. };
  61. obj.keop('hello word');*/
  62. // 定义多个方法
  63. /*var obj = {
  64. name:"张三",
  65. age: 30,
  66. kew:function (word){
  67. console.log('这是我的世界【'+word+'】');
  68. },
  69. kews:function(hello){
  70. console.log('你好世界'+hello);
  71. },
  72. };
  73. obj.kews("开始我的故事");
  74. obj.kew('创建世界');*/
  75. // 闭包 用的少
  76. /*function skep(){
  77. var name ='看了';
  78. var age=20;
  79. function bbb()
  80. {
  81. console.log('my name is aaa');
  82. }
  83. bbb();
  84. };
  85. skep();*/
  86. //方法调用方法 keps2调用keps
  87. /*var obj = {
  88. name: "张三",
  89. age: 18,
  90. keps: function(str,it){
  91. console.log('第一个'+str);
  92. console.log('第二个'+it);
  93. },
  94. keps2:function(){
  95. this.keps('keps2调用了keps','aaaa');
  96. }
  97. };
  98. obj.keps2();
  99. */
  100. // console.log(obj);
  101. // js定时器
  102. /* setTimeout(function(){
  103. console.log('页面加载完毕');
  104. },2000);
  105. // 匿名函数
  106. function kes(){
  107. console.log('my name is aa ');
  108. }
  109. // 调用方法时可以直接调用方法 不要加()
  110. setTimeout(kes,2000);
  111. */
  112. // setInterval设置时间段
  113. /* function tis()
  114. {
  115. console.log('my name is a');
  116. }
  117. var kess = setInterval(function (){
  118. console.log('this is setInterval');
  119. clearInterval(kess);
  120. },1000)*/;
  121. /* function tis()
  122. {
  123. console.log('my name is a');
  124. }
  125. var kess = setInterval(function (){
  126. console.log('this is setInterval');
  127. clearInterval(kess);
  128. },1000)*/
  129. // 设置定时13-14发布时间段
  130. /*var time = 24;
  131. var kers = setInterval(function(){
  132. if(time<13){
  133. return;
  134. }
  135. console.log('this is setInterval()');
  136. if(time>14){
  137. clearInterval(kers);
  138. }
  139. },1000);*/
  140. /*var flag = 0;
  141. var kowsd = setInterval(function(){
  142. console.log('this is setInterval()');
  143. },3000);*/
  144. // 发送验证码定时器
  145. function seng(){
  146. var flag = 60;
  147. var txt = document.getElementById('btn').textContent;
  148. var timer = setInterval(function(){
  149. document.getElementById('btn').textContent = flag +'秒后重试';
  150. flag--;
  151. if(flag ==0){
  152. document.getElementById('btn').textContent = txt;
  153. clearInterval(timer);
  154. }
  155. },1000);
  156. }
  157. </script>
  158. </body>
  159. </html>

总结

1、clearInterval设置预定义时间,出现一次继续往下执行
2、document.getElementById

Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post