目录

一、猜数字

html代码：

点击 猜 按钮的js代码：

点击 重开游戏 按钮的js代码：

整体代码：

页面效果：

二、留言板

css代码：

html代码：

js代码（主逻辑在这）：

整体代码：

页面效果：

一、猜数字

        页面如下：

        我们想在文本框输入我们想猜的数字，点击猜后下面就会提示我们猜的数字是否正确，以及大了还是小了。

html代码：

重新开始一局游戏

请输入要猜的数字：

猜

已经猜的次数：

结果：

点击 猜 按钮的js代码：

var number = Math.floor(Math.random() * 100) + 1;//要猜的数字

console.log("number：" + number);//答案

var count = 0;

//点击猜，看看猜的数字对不对

$(document).ready(function() {

$("#userGuess").click(function() {

count++;

$("#count").text(count);

var guessNum = $("#guessNum").val();

if(guessNum > number) {

$("#result").text("猜大了");

$("#result").css("color", "red");

} else if(guessNum < number) {

$("#result").text("猜小了");

$("#result").css("color", "red");

} else {

$("#result").text("猜对了");

$("#result").css("color", "green");

}

});

});

点击 重开游戏 按钮的js代码：

//点击重开游戏

$(document).ready(function() {

$("#reset").click(function() {

number = Math.floor(Math.random() * 100) + 1;

console.log("要猜的数字：" + number);

count = 0;

$("#count").text("");

$("#result").text("");

$("#result").css("color", "");

$("#guessNum").val("");

});

});

整体代码：

重新开始一局游戏

请输入要猜的数字：

猜

已经猜的次数：

结果：

页面效果：

        猜几次：

        重开游戏：

        ​​​​​​​

        猜几次：

        没有问题。

二、留言板

        页面如下：

        ​​​​​​​

css代码：

html代码：

js代码（主逻辑在这）：

整体代码：

页面效果：

        点击提交，留言就会显示到下方。

        多提交几次：

都看到这了，点个赞再走吧，谢谢谢谢谢

参考文章