- 掷骰子决定做什么（1点唱歌、2点学狗叫、3点念绕口令、……）
要求：点击页面上的按钮，显示摇出了几点，弹框显示做什么。
提示：
~ 获取按钮 let btn = document.querySelect('#ID')
~ 绑定点击事件回调 btn.addEventListener('click', () => {})
~ 用随机数模拟掷骰子 let face = parseInt(Math.random() * 6 + 1)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
#container{
width: 400px;
height: 200px;
margin: 200px auto;
/* border: 1px solid black; */
}
#diceNum{
display: block;
width: 100px;
height: 100px;
background-color: lightblue;
position: relative;
left: 150px;
color: #5F9EA0;
line-height: 100px;
font-size: 100px;
text-align: center;
}
button{
border: none;
color: cadetblue;
font: 20px/20px '楷体',Georgia,Serif;
padding: 5px 10px;
margin-top: 30px;
margin-left: 10px;
position: relative;
left: 120px;
}
</style>
</head>
<body>
<div id="container">
<span id="diceNum"></span>
<button id="begin">开始</button>
<button id="stop">停止</button>
</div>
<script type="text/javascript">
let begin = document.querySelector("#begin")
var diceNum = document.querySelector("#diceNum")
// diceNum.textContent = '4'
let stop = document.querySelector("#stop")
// setInterval
var timer = null
begin.addEventListener("click", ()=>{
timer = window.setInterval(() => {
let num = parseInt(Math.random()*6) + 1
diceNum.textContent = num
},100)
})
stop.addEventListener("click", ()=>{
window.clearInterval(timer)
val = diceNum.textContent
console.log(val)
switch(val){
case '1': window.alert('唱歌'); break;
case '2': window.alert('学狗叫'); break;
case '3': window.alert('绕口令'); break;
case '4': window.alert('跳舞'); break;
case '5': window.alert('喝酒'); break;
case '6': window.alert('吃柠檬'); break;
}
})
</script>
</body>
</html>
掷骰子结果
- 在页面上打印各种三角形形状，如下所示：
A
BB
CCC
DDDD
EEEEE
A
BBB
CCCCC
DDDDDDD
EEEEEEEEE
A
BBB
CCCCC
DDDDDDD
EEEEEEEEE
A A A A A
B B B B
C C C
D D
E
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
font: 24px/24px courier,monospace;
}
</style>
</head>
<body>
<script type="text/javascript">
var letters = ['A', 'B', 'C', 'D', 'E']
function left(d1){
let col = 1 + (letters.length-1)*d1 // 列数
let row = 1
for(letter of letters){
let limit = 1 + (row - 1) * d1
for (let x = 0; x < limit; x += 1){
document.write(`${letter}`)
}
document.write('<br/>')
row += 1
}
} // left
left(1)
left(2)
function right(d1){
let col = 1 + (letters.length-1)*d1 // 列数
let row = 1
for(letter of letters){
let limit = 1 + (row - 1) * d1
for (let y = 0; y < col-limit; y += 1){
document.write(` `)
}
for (let x = 0; x < limit; x += 1){
document.write(`${letter}`)
}
document.write('<br/>')
row += 1
}
} // right
right(1)
right(2)
function topMiddle(d1){
let col = 1 + (letters.length-1)*d1 // 列数
let row = 1
if(d1&1){
for(letter of letters){
col = 1 + (letters.length-1)*(d1+1)
let limit = 1 + (row - 1) * (d1+1)
let blank = parseInt((col-limit)/2)
for (let y = 0; y < blank; y += 1){
document.write(` `)
}
for (let x = 0; x < limit; x += 2){
document.write(`${letter} `)
}
document.write('<br/>')
row += 1
}
}else{
for(letter of letters){
let limit = 1 + (row - 1) * d1
let blank = parseInt((col-limit)/2)
for (let y = 0; y < blank; y += 1){
document.write(` `)
}
for (let x = 0; x < limit; x += 1){
document.write(`${letter}`)
}
document.write('<br/>')
row += 1
}
}
} // topMiddle
topMiddle(1)
topMiddle(2)
function bottomMiddle(d1){
let col = 1 + (letters.length-1)*d1 // 列数
let row = letters.length
if(d1&1){
for(letter of letters){
col = 1 + (letters.length-1)*(d1+1)
let limit = 1 + (row - 1) * (d1+1)
let blank = parseInt((col-limit)/2)
for (let y = 0; y < blank; y += 1){
document.write(` `)
}
for (let x = 0; x < limit; x += 2){
document.write(`${letter} `)
}
document.write('<br/>')
row -= 1
}
}else{
for(letter of letters){
let limit = 1 + (row - 1) * d1
let blank = parseInt((col-limit)/2)
for (let y = 0; y < blank; y += 1){
document.write(` `)
}
for (let x = 0; x < limit; x += 1){
document.write(`${letter}`)
}
document.write('<br/>')
row -= 1
}
}
} // bottomMiddle
bottomMiddle(1)
bottomMiddle(2)
</script>
</body>
</html>
画三角形
- 在页面上输出二组数据，每行10个数字，两组数据用<hr>分隔：
第一组：1-1000之间的质数
第二组：前20个斐波拉切数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
body{
word-break: break-word;
padding: 30px;
}
</style>
</head>
<body>
<script>
function prime(n){
division = parseInt(Math.sqrt(n)) + 1
for(let i=2; i <= division; i += 1){
if(!(n % i)){
return false
}
}
return true
}
document.write(`<strong>1.1~1000之间的质数为: `)
for(let i=2; i <= 1000; i += 1){
judge = prime(i)
if (judge){
document.write(`${i}, `)
}
}
document.write(`</strong><br/><br/><hr/>`)
function fab(n){
if (n == 1 || n == 2){
return 1
}
return fab(n-1) + fab(n-2)
}
document.write(`<br/><br/><strong>2.前20个斐波那契数列为: `)
for(let i=1; i < 20; i += 1){
document.write(`${fab(i)}, `)
}
document.write(`${fab(20)}</strong>`)
</script>
</body>
</html>
输出质数和斐波那契数列
