综合案例
猜数字
预期效果
代码实现
<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.前端开发对于后端开发人员而言不是很重要,不必花费过多时间在这个上面.达到借助网络能阅读代码的水平即可