| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <style>
- #container {
- width: 800px;
- height: 400px;
- margin: 10px auto;
- border: 1px solid black;
- overflow: hidden;
- }
- #buttons {
- width: 800px;
- margin: 10px auto;
- text-align: center;
- }
- #add, #fla {
- border: none;
- outline: none;
- width: 80px;
- height: 30px;
- background-color: red;
- color: white;
- font-size: 16px;
- cursor: pointer;
- }
- .small {
- width: 80px;
- height: 80px;
- float: left;
- }
- </style>
- </head>
- <body>
- <div id="container"></div>
- <div id="buttons">
- <button id="add">添加</button>
- <button id="fla">闪烁</button>
- </div>
- <script src="js/hello.js"></script>
- <script src="js/jquery.min.js"></script>
- <script>
- $(() => {
- $('#add').on('click', (evt) => {
- $('#container').prepend(
- $('<div class="small">')
- .css('background-color', randomColor())
- )
- })
- $('#fla').on('click', (evt) => {
- setInterval(() => {
- $('#container>div').each((index, div) => {
- $(div).css('background-color', randomColor())
- })
- }, 200)
- })
- })
- </script>
- </body>
- </html>
|