HTML+CSS+JS 简单应用小案例

VIP文章 Emperor10

已于 2022-02-22 16:02:25 修改

阅读量2.9k

点赞数 3

分类专栏： Web 文章标签： javascript html css

于 2022-02-22 16:02:09 首次发布

本文链接：https://blog.csdn.net/Emperor10/article/details/123070492

版权

猜数字

<!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>猜数字游戏</title>
</head>
<body>
    <input type="button" id="reset" value="重新开始一局游戏">
    <div>
        <span>请输入要猜的数字:</span>
        <input type="text" id="num">
        <input type="button" value="猜" id="guess">
    </div>
    <div>
        <span>已经猜的次数: </span>
        <span id="count"> 0 </span>
    </div>
    <div>
        <span>猜的结果: </span>
        <span id="result"></span>
    </div>
    <script>
        // 先获取要用到的 JS 的 DOM 对象
        let resetButton =  document.querySelector("#reset") /* 参数时选择器，所以要通过特殊符号指定是哪种选择器*/
        let numInput = document.querySelector('#num');
        let guessButton = document.querySelector('#guess');
        let countSpan = document.querySelector('#count');
        let resultSpan = document.querySelector('#result');

        //生成一个1~100之间的随机整数
        let toGuess = Math.floor(Math.random()*100) + 1;
        let count = 0;
        console.log("toGuess: " + toGuess);

        guessButton.onclick = function(){
   
            // 用户点击 [猜] 这个按钮, 首先先更新点击次数的显示.
             count++;
             countSpan.innerHTML = count;
             // 读取到输入框的内容, 进行判定
             /* parseInt() 函数解析字符串并返回整数 */
             let num = parseInt(numInput.value);
             console.log("num: " + num);
             if(num < toGuess){
   
                 resultSpan.innerHTML = '猜低了';
                 resultSpan.style.color = 'red';
             }else if(num > toGuess){
   
                 resultSpan.innerHTML = '猜高了';
                 resultSpan.style.color = 'green';
             }else{
   
                 resultSpan.innerHTML = '猜对了';
                 resultSpan.style.color = 'orange';
             }
        }
        resetButton.onclick = function(){
   
            // 把 toGuess 和 count 清空, 同时重新生成一个随机的整数
            toGuess = Math.floor(Math.random()

最低0.47元/天解锁文章

Emperor10

关注

3
点赞
踩
37

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS+JS 简单应用小案例

猜数字<!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&gt
复制链接

扫一扫