综合案例
猜数字
预期效果
代码实现
<button type="button" id="reset">重新开始一局游戏</button>
<br>
请输入要猜的数字:<input type="text" id="number">
<button type="button" id="button">猜</button>
<br>
已经猜的次数:<span id="count">0</span>
<br>
结果:<span id="result"></span>
<script>
$(function(){
//先随机生成一个1-100的数字
var guessNumber = Math.floor(Math.random() * 100) + 1; //Math.random()会生成1-100的数字
var count = 0;
//click:点击
//事件驱动:只有真正发生了点击事件时,才会执行该函数
$("#button").click(function() {
count++;
$("#count").text(count);
var userGuess = parseInt($("#number").val());
if(userGuess == guessNumber) {
$("#result").text("猜对了");
$("#result").css("color", "green");
} else if(userGuess < guessNumber) {
$("#result").text("猜小了");
$("#result").css("color", "red");
} else {
$("#result").text("猜大了");
$("#result").css("color", "red");
}
$("#number").val("");
});
$("#reset").click(function(){
guessNumber = Math.floor(Math.random() * 100) + 1;
count = 0;
$("#count").text(count);
$("#result").text("");
$("#number").val("");
});
});
</script>表白墙
预期效果
需求:按要求在文本框中输入内容,点击提交按钮,输入内容显示在页面下方.
代码实现
1.提前准备如下HTML和CSS代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 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 class="edit" type="text">
</div>
<div class="row">
<span>对谁: </span>
<input class="edit" type="text">
</div>
<div class="row">
<span>说什么: </span>
<input class="edit" type="text">
</div>
<div class="row">
<input type="button" value="提交" class="submit">
</div>
</div>
</body>
</html>2.实现提交
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script>
$(function () {
// 给点击按钮注册点击事件
$(".submit").click(function () {
// 1. 获取到编辑框内容
var from = $('.edit:eq(0)').val();
var to = $('.edit:eq(1)').val();
var message = $('.edit:eq(2)').val();
console.log(from + "," + to + "," + message);
if (from == '' || to == '' || message == '') {
return;
}
// 2. 构造 html 元素
var html = '<div class="row">' + from + '对' + to + '说: ' + message + '<div class="row">';
// 3. 把构造好的元素添加进去
$('.container').append(html);
// 4. 同时清理之前输⼊框的内容
$(":text").val("");
});
});
</script>总结
1.HTML是一种超文本标记语言,主要用于页面内容的显示和排版.如果需要更漂亮的样式展示和页面效果,需要搭配CSS和JavaScript来使用
2.学习HTML主要是学习标签,HTML标签特别多,了解基本语法即可
3.CSS重点是学习CSS选择器的使用
4.JavaScript是一个脚本语言,与Java没有关系.JQuery是一个JavaScript框架,使用JQuery可以轻松地选择和操作HTML元素,提高我们的开发效率.
5.前端开发对于后端开发人员而言不是很重要,不必花费过多时间在这个上面.达到借助网络能阅读代码的水平即可
