作业：
-
掷骰子决定做什么（1点唱歌、2点学狗叫、3点念绕口令、……）
要求：点击页面上的按钮，显示摇出了几点，弹框显示做什么。
提示：
~ 获取按钮 let btn = document.querySelect('#ID')
~ 绑定点击事件回调 btn.addEventListener('click', () => {})
~ 用随机数模拟掷骰子 let face = parseInt(Math.random() * 6 + 1)
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>work01</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 80%;
height: 600px;
position: relative;
margin: 0 auto;
font-size: 40px;
}
body>div {
width: 200px;
height: 200px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
#ID {
width: 190px;
height: 200px;
border: none;
outline: none;
background-color: gray;
color: white;
font-size: 36px;
/* 可点击 */
cursor: pointer;
}
#ID+span{
display: block;
width: 190px;
text-align: center
}
</style>
</head>
<body>
<div>
<input id="ID" type="button" value="摇骰子"><span id="num"></span>
</div>
<script>
let btn = document.querySelector("#ID")
let num = document.querySelector("#num")
let event = ['唱歌', '学狗叫', '念绕口令', '跳舞', '倒立', '打滚']
btn.addEventListener('click', () => {
let face = parseInt(Math.random() * 6 + 1)
num.textContent = face
alert(`${event[face - 1]}`)
})
</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>
<head>
<meta charset="UTF-8">
<title>work02</title>
<style>
* {
margin: 0;
padding: 0;
font-family: 'Courier New', Courier, monospace;
font-size: 24px;
}
</style>
</head>
<body>
<script>
for (let i = 0; i < 5; i += 1) {
document.write('<p>')
for (let j = 0; j <= i; j += 1) {
document.write(String.fromCharCode(65 + i))
}
document.write('</p>')
}
document.write('<hr><br>')
for (let i = 0; i < 5; i += 1) {
document.write('<p>')
for (let j = (4 - i) * 2; j > 0; j -= 1) {
document.write(' ')
}
for (let j = 0; j < i * 2 + 1; j += 1) {
document.write(String.fromCharCode(65 + i))
}
document.write('</p>')
}
document.write('<hr><br>')
for (let i = 0; i < 5; i += 1) {
document.write('<p>')
for (let j = 4 - i; j > 0; j -= 1) {
document.write(' ')
}
for (let j = 0; j < i * 2 + 1; j += 1) {
document.write(String.fromCharCode(65 + i))
}
document.write('</p>')
}
document.write('<hr><br>')
for (let i = 0; i < 5; i += 1) {
document.write('<p>')
for (let j = 0; j < i; j += 1) {
document.write(' ')
}
for (let j = 5 - i; j > 0; j -= 1) {
document.write(String.fromCharCode(65 + i) + ' ')
}
document.write('</p>')
}
</script>
</body>
</html>
-
在页面上输出二组数据，每行10个数字，两组数据用
分隔：
第一组：1-1000之间的质数
第二组：前20个斐波拉切数
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>work03</title>
<style>
* {
margin: 0;
padding: 0;
font-family: 'Courier New', Courier, monospace;
font-size: 20px;
}
</style>
</head>
<body>
<script>
function isPrimeNumber(n) {
for (let i = 2; i < n ** 0.5 + 1; i++) {
if (n % i == 0) {
return false
}
}
return true
}
function getPrimeNumber(n) {
let counter = 1
document.write('<pre>')
for (let i = 2; i < n + 1; i += 1) {
if (isPrimeNumber(i)) {
document.write(i + ' ')
counter += 1
}
if (counter % 11 == 0) {
document.write('<br>')
counter = 1
}
}
document.write('</pre>')
}
function fib(n) {
if (n == 1 || n == 2) {
return 1
}
return fib(n - 1) + fib(n - 2)
}
function getFib(n) {
document.write('<pre>')
for (let i = 1; i < n + 1; i += 1) {
document.write(fib(i) + ' ')
if (i % 10 == 0){
document.write('<br>')
}
}
document.write('</pre>')
}
getPrimeNumber(1000)
document.write('<hr>')
getFib(20)
</script>
</body>
</html>
