web网页设计作业简单js
时间: 2023-08-06 21:18:56 浏览: 73
好的,我可以为你提供一个简单的JS作业题目:
编写一个程序,当用户单击一个按钮时,会在网页上显示一个随机数(1到100之间的整数)。
你可以使用以下代码作为参考:
HTML代码:
```html
<button onclick="generateRandomNumber()">生成随机数</button>
<p id="result"></p>
```
JS代码:
```js
function generateRandomNumber() {
var randomNumber = Math.floor(Math.random() * 100) + 1;
document.getElementById("result").innerHTML = "随机数:" + randomNumber;
}
```
这段代码会在单击按钮时调用 `generateRandomNumber()` 函数。该函数会生成一个随机数并将其显示在网页上的 `<p>` 元素中。
你可以将这段代码复制到一个HTML文件中,并在浏览器中打开,然后单击按钮来测试它是否正常工作。
相关问题
简单web网页设计作业代码
简单的Web网页设计作业代码可以包括HTML、CSS和JavaScript。以下是一个简单的HTML代码示例:
<!DOCTYPE html>
<html>
<head>
<title>我的网页</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="script.js"></script>
</head>
<body>
<header>
<h1>欢迎来到我的网页</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我</a></li>
<li><a href="#">联系我</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>最新消息</h2>
<p>这里是最新消息的内容。</p>
</section>
<section>
<h2>我的作品</h2>
<ul>
<li><a href="#">作品1</a></li>
<li><a href="#">作品2</a></li>
<li><a href="#">作品3</a></li>
</ul>
</section>
</main>
<footer>
<p>版权所有 © 2021 我的网页</p>
</footer>
</body>
</html>
CSS代码可以用来美化HTML页面,例如更改字体、颜色、背景等。以下是一个简单的CSS代码示例:
body {
font-family: Arial, sans-serif;
color: #333;
background-color: #f5f5f5;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
margin-right: 20px;
}
nav a {
color: #fff;
text-decoration: none;
}
main {
margin: 20px;
}
section {
margin-bottom: 20px;
}
h2 {
font-size: 24px;
margin-bottom: 10px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
margin-bottom: 10px;
}
a {
color: #333;
text-decoration: none;
}
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
JavaScript代码可以用来添加交互功能,例如点击按钮弹出提示框等。以下是一个简单的JavaScript代码示例:
var button = document.querySelector('button');
button.addEventListener('click', function() {
alert('你点击了按钮!');
});
web网页设计作业保护地球
非常好的主题!以下是一些可能有用的想法:
1. 采用绿色能源:为您的网站选择绿色的主机,使用可再生能源,如太阳能或风能,可以大大减少碳足迹。
2. 优化图片和视频:使用适当的格式和压缩技术来减小文件大小。这将减少网站的大小,使其更快,同时减少能源消耗。
3. 简化设计:简化您的网站设计可以减少页面数量和文件大小,从而减少能源消耗。使用简单的设计元素和颜色,确保页面的核心内容易于阅读和理解。
4. 减少广告:广告是网站上的主要能源消耗者之一。尝试减少广告数量或仅在必要时使用它们。
5. 启用能源节省的浏览器:一些浏览器可以启用节能模式,以减少电池消耗和电力消耗。这些浏览器可能会自动关闭不必要的标签,停止Flash和JavaScript等。
6. 宣传环保信息:在您的网站上展示环保信息和行动计划,鼓励用户采取行动来保护地球。
以上是一些想法,希望能对你的网页设计作业有所帮助!
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)