随机数生成器代码HTML5

小咪咪 2024-03-01 08:00 51阅读 0赞

代码如下

--------------------

<!DOCTYPE html>  
<html>  
<head>  
<title>随机数生成器</title>  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<style>  
body \{  
text-align: center;  
background-color: \#f2f2f2;  
font-family: Arial, sans-serif;  
\}

h1 \{  
color: \#333;  
\}

.container \{  
width: 300px;  
margin: 0 auto;  
padding: 20px;  
background-color: \#fff;  
border-radius: 5px;  
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);  
  
\}

label \{  
display: block;  
margin-bottom: 10px;  
\}

input\[type="number"\] \{  
width: 100%;  
padding: 8px;  
border: 1px solid \#ccc;  
border-radius: 4px;  
\}

input\[type="checkbox"\] \{  
margin-top: 5px;  
\}

button \{  
display: block;  
width: 100%;  
padding: 10px;  
margin-top: 20px;  
background-color: \#4CAF50;  
color: \#fff;  
border: none;  
border-radius: 4px;  
cursor: pointer;  
\}

.result \{  
margin-top: 20px;  
font-size: 18px;  
font-weight: bold;  
\}  
</style>  
</head>  
<body>  
<div class="container">  
<h1>随机数生成器</h1>  
<label for="length">字符数量:</label>  
<input type="number" id="length" min="1" max="100" value="8">

<label for="include-letters">  
<input type="checkbox" id="include-letters" checked>  
包含英文字母  
</label>

var letters = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";  
var symbols = "!@\#$%^&\*()";  
var digits = "0123456789";

var characters = "";  
if (includeLetters) \{  
characters += letters;  
\}  
if (includeSymbols) \{  
characters += symbols;  
\}  
if (includeDigits) \{  
characters += digits;  
\}

var result = "";  
for (var i = 0; i < length; i++) \{  
var randomIndex = Math.floor(Math.random() \* characters.length);  
result += characters.charAt(randomIndex);  
\}

document.getElementById("result").innerHTML = result;  
\}  
</script>  
</body>  
</html>