1_test.html 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. </head>
  9. <body>
  10. <div>
  11. <button id="btn1">去底部</button>
  12. <div>hahahhhhhhhhhhhhhhhhhhhhhhh</div>
  13. <div>hahahhhhhhhhhhhhhhhhhhhhhhh</div>
  14. <div>hahahhhhhhhhhhhhhhhhhhhhhhh</div>
  15. <div>hahahhhhhhhhhhhhhhhhhhhhhhh</div>
  16. <div>hahahhhhhhhhhhhhhhhhhhhhhhh</div>
  17. <div>hahahhhhhhhhhhhhhhhhhhhhhhh</div>
  18. <div>hahahhhhhhhhhhhhhhhhhhhhhhh</div>
  19. <div>hahahhhhhhhhhhhhhhhhhhhhhhh</div>
  20. <div>hahahhhhhhhhhhhhhhhhhhhhhhh</div>
  21. <div>hahahhhhhhhhhhhhhhhhhhhhhhh</div>
  22. <div>hahahhhhhhhhhhhhhhhhhhhhhhh</div>
  23. <div>hahahhhhhhhhhhhhhhhhhhhhhhh</div>
  24. <div>hahahhhhhhhhhhhhhhhhhhhhhhh</div>
  25. <div>hahahhhhhhhhhhhhhhhhhhhhhhh</div>
  26. <div>hahahhhhhhhhhhhhhhhhhhhhhhh</div>
  27. <div>hahahhhhhhhhhhhhhhhhhhhhhhh</div>
  28. <div>hahahhhhhhhhhhhhhhhhhhhhhhh</div>
  29. <div>hahahhhhhhhhhhhhhhhhhhhhhhh</div>
  30. <div>hahahhhhhhhhhhhhhhhhhhhhhhh</div>
  31. <div>hahahhhhhhhhhhhhhhhhhhhhhhh</div>
  32. <div>hahahhhhhhhhhhhhhhhhhhhhhhh</div>
  33. <div>hahahhhhhhhhhhhhhhhhhhhhhhh</div>
  34. <div>hahahhhhhhhhhhhhhhhhhhhhhhh</div>
  35. <div>hahahhhhhhhhhhhhhhhhhhhhhhh</div>
  36. <div>hahahhhhhhhhhhhhhhhhhhhhhhh</div>
  37. <div>hahahhhhhhhhhhhhhhhhhhhhhhh</div>
  38. <div>hahahhhhhhhhhhhhhhhhhhhhhhh</div>
  39. <div>hahahhhhhhhhhhhhhhhhhhhhhhh</div>
  40. <div>hahahhhhhhhhhhhhhhhhhhhhhhh</div>
  41. <div>hahahhhhhhhhhhhhhhhhhhhhhhh</div>
  42. <div>hahahhhhhhhhhhhhhhhhhhhhhhh</div>
  43. <div>hahahhhhhhhhhhhhhhhhhhhhhhh</div>
  44. <div>hahahhhhhhhhhhhhhhhhhhhhhhh</div>
  45. <div>hahahhhhhhhhhhhhhhhhhhhhhhh</div>
  46. <div>hahahhhhhhhhhhhhhhhhhhhhhhh</div>
  47. <div>hahahhhhhhhhhhhhhhhhhhhhhhh</div>
  48. <div>hahahhhhhhhhhhhhhhhhhhhhhhh</div>
  49. <div>hahahhhhhhhhhhhhhhhhhhhhhhh</div>
  50. <div>hahahhhhhhhhhhhhhhhhhhhhhhh</div>
  51. <div>hahahhhhhhhhhhhhhhhhhhhhhhh</div>
  52. <div>hahahhhhhhhhhhhhhhhhhhhhhhh</div>
  53. <div>hahahhhhhhhhhhhhhhhhhhhhhhh</div>
  54. <div>hahahhhhhhhhhhhhhhhhhhhhhhh</div>
  55. <div>hahahhhhhhhhhhhhhhhhhhhhhhh</div>
  56. <div>hahahhhhhhhhhhhhhhhhhhhhhhh</div>
  57. <div>hahahhhhhhhhhhhhhhhhhhhhhhh</div>
  58. <div>hahahhhhhhhhhhhhhhhhhhhhhhh</div>
  59. <div>hahahhhhhhhhhhhhhhhhhhhhhhh</div>
  60. <div>hahahhhhhhhhhhhhhhhhhhhhhhh</div>
  61. <div>hahahhhhhhhhhhhhhhhhhhhhhhh</div>
  62. <div>hahahhhhhhhhhhhhhhhhhhhhhhh</div>
  63. <div>hahahhhhhhhhhhhhhhhhhhhhhhh</div>
  64. <div>hahahhhhhhhhhhhhhhhhhhhhhhh</div>
  65. <div>hahahhhhhhhhhhhhhhhhhhhhhhh</div>
  66. <div>hahahhhhhhhhhhhhhhhhhhhhhhh</div>
  67. <div>hahahhhhhhhhhhhhhhhhhhhhhhh</div>
  68. <div>hahahhhhhhhhhhhhhhhhhhhhhhh</div>
  69. <div>hahahhhhhhhhhhhhhhhhhhhhhhh</div>
  70. <div>hahahhhhhhhhhhhhhhhhhhhhhhh</div>
  71. <div>hahahhhhhhhhhhhhhhhhhhhhhhh</div>
  72. <button id="btn">回顶部</button>
  73. <button id="btn3"> 随机数</button>
  74. </div>
  75. <script>
  76. var btn = document.getElementById('btn')
  77. var btn1 = document.getElementById('btn1')
  78. var btn3 = document.getElementById('btn3')
  79. btn.onclick = function () {
  80. // console.log(scrollTop)
  81. // scrollTo(0,30) 相对于 右侧坐标
  82. // scrollBy(0,-30) // 相对于当前本身坐标
  83. var a = setInterval(function () {
  84. //滚动条滚动的距离
  85. var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
  86. if (scrollTop > 0) {
  87. scrollBy(0, -30)
  88. console.log(scrollTop)
  89. } else {
  90. clearInterval(a)
  91. console.log('我挂掉了')
  92. }
  93. }, 100)
  94. }
  95. btn1.onclick = function(){
  96. var b = setInterval(function(){
  97. var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
  98. if(scrollTop < 542.4000244140625){
  99. scrollBy(0,30)
  100. console.log(scrollTop)
  101. } else{
  102. clearInterval(b)
  103. console.log('我挂掉了')
  104. }
  105. },100)
  106. }
  107. btn3.onclick = function(){
  108. console.log(Math.random())//生成0-1之间的随机小数
  109. // var a = setTimeout(function(){
  110. // console.log(Math.random())
  111. // },5000)
  112. //setTimeout 只执行一次
  113. //setInterval 一直执行 除非清除 clearInterval
  114. //Math.random()
  115. //Math.floor() 向下取整 和四舍五入没关系
  116. var a = setInterval(function(){
  117. console.log(Math.floor(Math.random()*100))
  118. },1000)
  119. }
  120. </script>
  121. </body>
  122. </html>