【JavaScript】jQuery 使用案例

使用JS实现猜数字游戏

原生JS版:

html 复制代码
<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <h2>猜数字游戏</h2>
        玩家输入一个 1-10的数字:<input id="input_num" type="text"><br/>
        <input type="button" value="查看结果" onclick="selectResultJq()">
        <div id="result_div"></div>
    </div>


    <script>
        //原生JS猜数字游戏:
        function selectResultJq() {
            var randomNum = 1+Math.floor(Math.random()*10);
            var userInputNum = document.getElementById("input_num").value;
            var msg;
            if(randomNum==userInputNum){
                msg="<h4>恭喜:猜对了</h4>";
            }else{
                msg="<h4>抱歉:猜错了,正确的数字是:"+randomNum+"</h4>";
            }
            document.getElementById("result_div").innerHTML = msg;
        }
    </script>
</body>
</html>

jquery改进版

html 复制代码
<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <h2>猜数字游戏</h2>
        玩家输入一个 1-10的数字:<input id="input_num" type="text"><br/>
        <input type="button" value="查看结果" onclick="selectResultJq()">
        <div id="result_div"></div>
    </div>


    <script>
        //jQuery猜数字游戏:
        function selectResultJq() {
            var randomNum = 1+Math.floor(Math.random()*10);
            // var userInputNum = document.getElementById("input_num").value;
            var userInputNum = jQuery("#input_num"),value;
            var msg;
            if(randomNum==userInputNum){
                msg="<h4>恭喜:猜对了</h4>";
            }else{
                msg="<h4>抱歉:猜错了,正确的数字是:"+randomNum+"</h4>";
            }
            // document.getElementById("result_div").innerHTML = msg;
            jQuery("#result_div").html(msg);
        }
    </script>
</body>
</html>
相关推荐
white-persist11 分钟前
Python实例方法与Python类的构造方法全解析
开发语言·前端·python·原型模式
千里马-horse12 分钟前
Async++ 源码分析8--partitioner.h
开发语言·c++·async++·partitioner
新中地GIS开发老师1 小时前
Cesium 军事标绘入门:用 Cesium-Plot-JS 快速实现标绘功能
前端·javascript·arcgis·cesium·gis开发·地理信息科学
Superxpang1 小时前
前端性能优化
前端·javascript·vue.js·性能优化
左手吻左脸。1 小时前
解决el-select因为弹出层层级问题,不展示下拉选
javascript·vue.js·elementui
李白的故乡1 小时前
el-tree-select名字
javascript·vue.js·ecmascript
Rysxt_1 小时前
Element Plus 入门教程:从零开始构建 Vue 3 界面
前端·javascript·vue.js
隐含1 小时前
对于el-table中自定义表头中添加el-popover会弹出两个的解决方案,分别针对固定列和非固定列来隐藏最后一个浮框。
前端·javascript·vue.js
Lucis__1 小时前
再探类&对象——C++入门进阶
开发语言·c++
007php0071 小时前
某大厂跳动面试:计算机网络相关问题解析与总结
java·开发语言·学习·计算机网络·mysql·面试·职场和发展