前端程序——猜数字游戏

项目样式

在这里插入图片描述

项目说明

通过在输入框中输入数字，并且按“猜”的按钮，可以进行猜的动作
在结果中显示猜的是大是小
通过开始新的一局按钮，重新开始游戏

代码

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>Documenttitle>
head>
<body>
    <button class = 'reset'>开始新的一局button>
    <div>请输入你猜的数字：
        <input type="text" class="number">
        <button class="guess">猜！button>
    div>
    <div> 猜的次数： <span class="count">0span> div>
    <div>结果：<span class="result">span>div>

    <script>
        let number = document.querySelector('.number');
        let count = document.querySelector('.count');
        let result = document.querySelector('.result');
        let reset = document.querySelector('.reset');
        let guess = document.querySelector('.guess');

        let numberToGuess = parseInt(Math.random() * 100 + 1);
        console.log(numberToGuess);
        let tmp = 0;
        guess.onclick = function(){
            tmp++;
            count.innerText = tmp;
            console.log(tmp);

            let userGuessNumber = parseInt(number.value);
            if(userGuessNumber == numberToGuess){
                result.innerHTML = 'bingo！';
                result.style = 'color: orange';
            } else if (userGuessNumber < numberToGuess){
                result.innerHTML = '猜小了！';
                result.style = 'color: green';
            } else {
                result.innerHTML = '猜大了！';
                result.style = 'color: red';
            }
        };

        reset.onclick = function(){
            numberToGuess = parseInt(Math.random() * 100 + 1);
            tmp = 0;
            count.innerText = tmp;
            result.innerText = "";
            number.value = "";
        }
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

相关阅读:
Uniapp 电子签名包含返回撤回颜色线条等功能
我如何使用工具学习网络技术？
Unity ML-Agents默认接口参数含义
redis笔记
交互式表达式求值（支持多种类型的运算符）
【spring cloud】(七)消息驱动——springcloud Stream
RFID-科技的“隐秘耳语者”
Matlab_文件读写_串口通信
扬帆际海：个人如何做跨境电商
STC89C51基础及项目第10天：LCD显示字符（非标协议外设）

原文地址：https://blog.csdn.net/m0_60867520/article/details/127712234