- 擲骰子決定做什么（1點唱歌、2點學(xué)狗叫、3點念繞口令、……）
要求：點擊頁面上的按鈕，顯示搖出了幾點，彈框顯示做什么。
提示：
~ 獲取按鈕 let btn = document.querySelect('#ID')
~ 綁定點擊事件回調(diào) btn.addEventListener('click', () => {})
~ 用隨機(jī)數(shù)模擬擲骰子 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('學(xué)狗叫'); break;
case '3': window.alert('繞口令'); break;
case '4': window.alert('跳舞'); break;
case '5': window.alert('喝酒'); break;
case '6': window.alert('吃檸檬'); break;
}
})
</script>
</body>
</html>
擲骰子結(jié)果
- 在頁面上打印各種三角形形狀，如下所示：
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 // 列數(shù)
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 // 列數(shù)
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 // 列數(shù)
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 // 列數(shù)
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>
畫三角形
- 在頁面上輸出二組數(shù)據(jù)，每行10個數(shù)字，兩組數(shù)據(jù)用<hr>分隔：
第一組：1-1000之間的質(zhì)數(shù)
第二組：前20個斐波拉切數(shù)
<!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之間的質(zhì)數(shù)為: `)
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個斐波那契數(shù)列為: `)
for(let i=1; i < 20; i += 1){
document.write(`${fab(i)}, `)
}
document.write(`${fab(20)}</strong>`)
</script>
</body>
</html>
輸出質(zhì)數(shù)和斐波那契數(shù)列
