【JavaScript】jQuery 使用案例

使用JS实现猜数字游戏

【JavaScript】jQuery 使用案例_第1张图片

原生JS版:

DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
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="

恭喜:猜对了

"
; }else{ msg="

抱歉:猜错了,正确的数字是:"+randomNum+"

"
; } document.getElementById("result_div").innerHTML = msg; }
script> body> html>

jquery改进版

DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
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="

恭喜:猜对了

"
; }else{ msg="

抱歉:猜错了,正确的数字是:"+randomNum+"

"
; } // document.getElementById("result_div").innerHTML = msg; jQuery("#result_div").html(msg); }
script> body> html>

你可能感兴趣的:(javaee,javascript,jquery,开发语言)