https://loof.ca/tags/javascript/Recent content in Javascript on LOØFHugozhhttps://loof.ca/projects/life-game/Mon, 01 Jan 0001 00:00:00 +0000https://loof.ca/projects/life-game/<div id="project-content"> <div id="grid"></div> <div id="controlPanel"> <button id="controlBtn">开始</button> <button id="reset">清空</button> </div> <p id="gameState"> 使用说明：1. 请点击网格来设置生命的起始分布 2. 点击开始 </p> </div> <style> #project-content { margin: 50px auto; } #controlPanel { display: flex; justify-content: center; margin: 10px auto; } #controlPanel > * { margin: 10px; background-color: inherit; border: solid medium #a14639; font-size: 15px; } #controlPanel #controlBtn:hover, #reset:hover { background-color: #eca4a9; } #grid { margin: 10px auto; } .cell { height: 15px; width: 15px; display: inline-block; box-sizing: border-box; border: 0.1px lightblue solid; transition-delay: 0.1s; transition: background-color 0.2s; } .cell:hover { cursor: pointer; border: solid thin lightcoral; } </style>