js_practice_7.html 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <style>
  7. #container {
  8. width: 800px;
  9. height: 400px;
  10. margin: 10px auto;
  11. border: 1px solid black;
  12. overflow: hidden;
  13. }
  14. #buttons {
  15. width: 800px;
  16. margin: 10px auto;
  17. text-align: center;
  18. }
  19. #add, #fla {
  20. border: none;
  21. outline: none;
  22. width: 80px;
  23. height: 30px;
  24. background-color: red;
  25. color: white;
  26. font-size: 16px;
  27. cursor: pointer;
  28. }
  29. .small {
  30. width: 80px;
  31. height: 80px;
  32. float: left;
  33. }
  34. </style>
  35. </head>
  36. <body>
  37. <div id="container"></div>
  38. <div id="buttons">
  39. <button id="add">添加</button>
  40. <button id="fla">闪烁</button>
  41. </div>
  42. <script src="js/hello.js"></script>
  43. <script src="js/jquery.min.js"></script>
  44. <script>
  45. $(() => {
  46. $('#add').on('click', (evt) => {
  47. $('#container').prepend(
  48. $('<div class="small">')
  49. .css('background-color', randomColor())
  50. )
  51. })
  52. $('#fla').on('click', (evt) => {
  53. setInterval(() => {
  54. $('#container>div').each((index, div) => {
  55. $(div).css('background-color', randomColor())
  56. })
  57. }, 200)
  58. })
  59. })
  60. </script>
  61. </body>
  62. </html>