请扮演一个高级程序员兼优秀的ui设计师帮我写一个可以生成随机数并显示在网页中
作为一个高级程序员兼优秀的UI设计师，我很乐意帮助你编写一个可以生成随机数并显示在网页中的程序。以下是一个使用HTML、CSS和JavaScript编写的简单示例：
HTML代码：
<!DOCTYPE html>
<html>
<head>
<title>生成随机数</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<h1>生成随机数</h1>
<button id="generateBtn">生成</button>
<p id="randomNumber"></p>
</div>
<script src="script.js"></script>
</body>
</html>
CSS代码（style.css）：
.container {
text-align: center;
margin-top: 100px;
}
h1 {
font-size: 24px;
}
button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
font-size: 16px;
}
p {
font-size: 20px;
margin-top: 20px;
}
JavaScript代码（script.js）：
// 获取按钮和数字元素
var generateBtn = document.getElementById('generateBtn');
var randomNumber = document.getElementById('randomNumber');
// 按钮点击事件
generateBtn.addEventListener('click', function() {
// 生成一个随机数（范围：1-100）
var randomNum = Math.floor(Math.random() * 100) + 1;
// 在网页中显示随机数
randomNumber.textContent = randomNum;
});
将上述代码保存为HTML、CSS和JavaScript文件（可以分别命名为index.html、style.css和script.js），并将它们放在同一个文件夹中。然后，将index.html文件在浏览器中打开，你将看到一个包含"生成"按钮和一个用于显示随机数的段落元素的网页。每次点击"生成"按钮，都会在段落中显示一个新的随机数
原文地址: https://www.cveoy.top/t/topic/h47e 著作权归作者所有。请勿转载和采集!