前端小练习————表白墙+猜数字小游戏
1，猜数字游戏
实现一个这个样式的
要猜的目标数字
点击重新开始游戏之后：
代码实现
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
</head>
<body><button type="button" id="reset">重新开始一局游戏</button><br>请输入要猜的数字:<input type="text" id="number"><button type="button" id="guess">猜</button><br>已经猜的次数: <span id="count">0</span><br>结果: <span id="result"></span><script>$(function(){let guessnumber = Math.floor(Math.random()*100)let count = 0;console.log(guessnumber);$("#guess").click(function(){count++;$("#count").text(count);let inputnumber = parseInt($("#number").val());if(inputnumber==guessnumber){$("#result").text('猜对了')$("#result").css("color","yellow")}else if(inputnumber>guessnumber){$("#result").text('猜大了')$("#result").css("color","red")}else{$("#result").text('猜小了')$("#result").css("color","blue")}})$("#reset").click(function(){guessnumber = Math.floor(Math.random()*100);count = 0;$("#number").val("");$("#count").text(count);$("#result").text("");})})</script>
</body>
</html>注意要引入jQuery的依赖；
2，表白墙
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script><style>* {padding: 0;margin: 0;;}.container {width: 400px;margin: 0 auto;}h1 {text-align: center;padding: 20px 0;}p{color: #666;text-align: center;font-size: 14px;padding: 10px 0;}.row {height: 40px;display: flex;justify-content: center;align-items: center;}span {width: 100px;line-height: 40px;}.edit {width: 200px;height: 30px;}.submit {width: 304px;height: 40px;color: white;background-color: orange;border: none;}</style>
</head>
<body><div class="container"><h1>表白墙</h1><p>输入后点击提交，会将信息显示在表格中</p><div class="row"><span>谁：</span><input type="text" class="edit"></div><div class="row"><span>对谁：</span><input type="text" class="edit"></div><div class="row"><span>说什么：</span><input type="text" class="edit"></div><div class="row"><input type="button" value="提交" class="submit"></div></div><SCript>$(function(){$(".submit").click(function(){let from = $(".edit:eq(0)").val();let to = $(".edit:eq(1)").val();let message = $(".edit:eq(2)").val();var html = '<div class="row">' + from + '对'+ to +'说' + message + '</div>';$(".container").append(html);$(":text").val("")})})</SCript>
</body>
</html>