57 lines
1.4 KiB
HTML
57 lines
1.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>双色球随机选号</title>
|
|
<style>
|
|
p {
|
|
width: 100px;
|
|
height: 100px;
|
|
color: white;
|
|
font: 60px/100px Arial;
|
|
border-radius: 50px;
|
|
text-align: center;
|
|
float: left;
|
|
margin-left: 10px;
|
|
}
|
|
.red {
|
|
background-color: red;
|
|
}
|
|
.blue {
|
|
background-color: blue;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- 浏览器中的JavaScript包含以下三样内容 -->
|
|
<!-- ECMAScript - ES6 - 核心语法 -->
|
|
<!-- BOM - 浏览器对象模型 - window -->
|
|
<!-- DOM - 文档对象模型 - document -->
|
|
<script>
|
|
function outputBall(num, color='red') {
|
|
document.write(`<p class="${color}">`)
|
|
if (num < 10) {
|
|
document.write('0')
|
|
}
|
|
document.write(num)
|
|
document.write('</p>')
|
|
}
|
|
|
|
var selectedBalls = []
|
|
while (selectedBalls.length < 6) {
|
|
let num = parseInt(Math.random() * 33 + 1)
|
|
if (selectedBalls.indexOf(num) == -1) {
|
|
selectedBalls.push(num)
|
|
}
|
|
}
|
|
// 给红色球排序 - 需要传入一个匿名函数给出比较元素的规则
|
|
// ES6开始支持使用箭头函数(Lambda函数 - 匿名函数)
|
|
selectedBalls.sort((x, y) => x - y)
|
|
// 代码有很多种坏味道 重复是最坏的一种 - Martin Fowler
|
|
selectedBalls.forEach(item => outputBall(item))
|
|
let num = parseInt(Math.random() * 16 + 1)
|
|
outputBall(num, 'blue')
|
|
</script>
|
|
</body>
|
|
</html>
|