1.写一个猜数字的游戏
代码展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>猜数字游戏</title>
</head>
<body>
<button id = "resetBtn">重新开始一局游戏</button><br>
<span>要猜的数字:</span>
<input type="text">
<button id = "guessBtn">猜</button><br>
<span>结果:</span><span id = "result"></span><br>
<span>已经猜的次数:</span><span id = "guessCount">0</span>
<script>
//1.先把上面的需要用到的元素都获取到
let resetBtn = document.querySelector('#resetBtn');
let input = document.querySelector('input');
let guessBtn = document.querySelector('#guessBtn');
let resultSpan = document.querySelector('#result');
let guessCountSpan = document.querySelector('#guessCount');
//2.生成一个1-100的随机数
let toGuess = Math.floor(Math.random()*100)+1;
console.log(toGuess);
//3.实现点击猜按钮的逻辑
guessBtn.onclick = function(){
//1.读取到input中输入的内容,并转成整数
if(input.value == ''){
return;
}
//2.将输入的字符串转换成整数
let curNum = parseInt(input.value);
if(curNum < toGuess){
resultSpan.innerHTML = '猜小了';
resultSpan.style.color = 'red';
}else if(curNum > toGuess){
resultSpan.innerHTML = '猜大了';
resultSpan.style.color = 'red';
}else{
resetBtn.innerHTML = '猜对了';
resultSpan.style.color = 'green';
}
//3.更新猜的次数
let guessCount = parseInt(guessCountSpan.innerHTML);
guessCountSpan.innerHTML = guessCount + 1;
}
//4.实现reset操作的逻辑(开始新游戏)
resetBtn.onclick = function(){
//让页面刷新即可
//location是和document并列关系的对象
location.reload();
//location是用来控制页面的链接/地址的,用来刷新页面
}
</script>
</body>
</html>
2.实现一个表白墙
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表白墙</title>
</head>
<body>
<style>
*{
/* 去除浏览器默认样式 */
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container{
width: 100%;
}
h3{
text-align: center;
padding: 30px 0;
font-size: 24px;
}
p{
text-align: center;
color: #666;
padding: 10px 0;
}
.row{
width: 400px;
height: 50px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.row span{
width: 60px;
font-size: 20px;
}
.row input{
width: 300px;
height: 40px;
line-height: 40px;
font-size: 30px;
text-indent: 0.5em;
/* 去掉输入框的轮廓线 */
outline: none;
}
.row #submit{
width: 200px;
height:40px;
font-size: 20px;
line-height: 40px;
margin: 0 auto;
color: white;
background-color: orange;
/* 去掉边框 */
border: none;
/* 提交框的圆角设计 */
border-radius: 10px;
}
/* 提交框点击之后会有灰色效果 */
.row #submit:active{
background-color: #666;
}
</style>
<div class="container">
<h3>表白墙</h3>
<p>输入后点击提交,会将信息显示在表格中</p>
<div class = "row">
<span>谁:</span>
<input type="text">
</div>
<div class = "row">
<span>对谁:</span>
<input type="text">
</div>
<div class = "row">
<span>说什么:</span>
<input type="text">
</div>
<div class="row">
<button id = "submit">提交</button>
</div>
</div>
<script>
//当用户点击submit,就会获取input中的内容,从而把内容构造成一个div,插入到页面末尾
let subminBtn = document.querySelector('#submit');
subminBtn.onclick = function(){
//1.获取到输入框的3个input中的内容
let inputs = document.querySelectorAll('input');
let from = inputs[0].value;
let to = inputs[1].val;
let msg = inputs[2].val;
if(from == '' || to == '' || msg == ''){
// 用户还没写完,暂时先不提交
return;
}
// 2.生成一个新的div,内容就是input里的内容,把这个新的div加载到页面中
let div = document.createElement('div');
div.innerHTML = from + '对' + to +'谁' + msg;
div.className = 'row';
let container = document.querySelector('.container');
container.appendChild(div);
//3.清空之前输入框的内容
for(let i = 0; i < inputs.length;i++){
inputs[i].value = '';
}
}
</script>
</body>
</html>