首页做一个知识小课堂界面，里面分为四个区域，1为九九乘法表，2为1000以内的偶数，3为无限循环，循环输出“我爱学习”，4为1到1000之间的和，都是以document.write的形式输出结果

做一个知识小课堂界面，里面分为四个区域，1为九九乘法表，2为1000以内的偶数，3为无限循环，循环输出“我爱学习”，4为1到1000之间的和，都是以document.write的形式输出结果

时间: 2024-12-17 09:21:38 浏览: 7

做一个简单的知识小课堂界面可以采用HTML和JavaScript编写。以下是这个界面的基本结构和功能实现： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>知识小课堂</title> <style> .content { display: flex; justify-content: space-around; width: 100%; height: 500px; } </style> </head> <body> <div class="content"> <div id="multiplication">九九乘法表</div> <div id="even-numbers">1000以内偶数</div> <div id="loop">无限循环 "我爱学习"</div> <div id="sum">1到1000的和</div> </div> <script> // 1. 九九乘法表 function printMultiplicationTable() { const table = document.getElementById("multiplication"); for (let i = 1; i <= 9; i++) { let row = ''; for (let j = 1; j <= i; j++) { row += `${i} * ${j} = ${i * j}\n`; } table.innerHTML += `<p>${row}</p>`; } } printMultiplicationTable(); // 2. 1000以内偶数 function printEvenNumbers() { const evenNums = document.getElementById("even-numbers"); for (let i = 0; i <= 1000; i += 2) { evenNums.innerHTML += `${i}, `; } evenNums.innerHTML = evenNums.innerHTML.slice(0, -2); // 移除最后一个逗号 } printEvenNumbers(); // 3. 无限循环 "我爱学习" function infiniteLoop() { const loopDiv = document.getElementById("loop"); setInterval(() => { loopDiv.innerText = "我爱学习"; }, 1000); } infiniteLoop(); // 4. 1到1000的和 function sumOfNumbers() { let total = 0; for (let i = 1; i <= 1000; i++) { total += i; } const sumDiv = document.getElementById("sum"); sumDiv.innerText = `1到1000的和: ${total}`; } sumOfNumbers(); </script> </body> </html> ``` 在这个示例中，我们创建了四个`<div>`元素，每个对应一个小课堂的一个区域。然后通过JavaScript函数分别生成内容并写入对应的DOM元素。

阅读全文