欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

点击弹出球

程序员文章站 2022-03-03 21:55:13
...
    

  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4. <title>html基础</title>
    5. 

  5. <meta charset="UTF-8">
    6. 

  6. </head>
    7. 

  7. <style>
    8. 

  8.     *{
    9. 

  9.         padding: 0;
    10. 

  10.         margin: 0;
    11. 

  11.     }
    12. 

  12.     .box{
    13. 

  13.         width: 500px;
    14. 

  14.         height: 500px;
    15. 

  15.         background-color: pink;
    16. 

  16.         position: relative;
    17. 

  17.     }
    18. 

  18. </style>
    19. 

  19. <body>
    20. 

  20. <button id="btn" onclick="fn()">弹出球</button>
    21. 

  21. <div class="box" id="box">
    22. 

    23. 

    24. 

  24.    </div>
    25. 

  25. </div>
    26. 

    27. 

  27. <script>
    28. 

  28.       var obox= document.getElementById('box')
    29. 

  29.       var colors=['red','black','white','green','yellow']
    30. 

    31. 

  31.       function fn() {
    32. 

  32.         var oball= document.createElement('div')
    33. 

  33.          oball.style.cssText='border-radius: 50%;box-shadow: 1px 2px #666;position: absolute;background-color:red'
    34. 

  34.          var wh=Math.floor(Math.random()*(50-20)+20)
    35. 

  35.          oball.style.width=wh+'px'
    36. 

  36.          oball.style.height=wh+'px'
    37. 

  37.          oball.style.backgroundColor=colors[Math.floor(Math.random()*colors.length)]
    38. 

  38.          obox.appendChild(oball)
    39. 

  39.          var top = obox.clientHeight/2 - oball.offsetHeight/2;//?
    40. 

  40.          var left = obox.clientWidth/2 - oball.offsetWidth/2;//?
    41. 

  41.          oball.style.left=left+'px'
    42. 

  42.          oball.style.top=top+'px'
    43. 

  43.          var x=Math.floor(Math.random()*(7-2)+2)
    44. 

  44.          var y=Math.floor(Math.random()*(7-2)+2)
    45. 

    46. 

  46.       setInterval(function () {
    47. 

    48. 

  48.           left+=x
    49. 

  49.           top+=y
    50. 

    51. 

    52. 

  52.           if (left<  obox.offsetLeft || left > (obox.offsetLeft+obox.offsetWidth-oball.offsetWidth)) {
    53. 

  53.              x = -x
    54. 

  54.           }
    55. 

  55.           if (top < obox.offsetTop || top > (obox.offsetTop+obox.offsetHeight-oball.offsetHeight-3)) {
    56. 

  56.              y = -y
    57. 

  57.           }
    58. 

  58.          oball.style.left=left+"px";
    59. 

  59.          oball.style.top=top+"px";
    60. 

  60.        }, 30)
    61. 

    62. 

  62.     }
    63. 

    64. 

  64. </script>
    65. 

    66. 

  66. </body>
    67. 

  67. </html>
    68.

上一篇： 数组的方法

下一篇： PHP 8.1.0 正式发布了

推荐阅读