【JavaScript】jQuery 使用案例

news2025/7/14 10:41:21

使用JS实现猜数字游戏

在这里插入图片描述

原生JS版：

<!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改进版

<!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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1158077.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

视频编码转换技巧：视频批量转码H264转H265，高效且顺畅

视频编码转换技巧：视频批量转码H264转H265，高效且顺畅

随着数字媒体的广泛应用&#xff0c;视频编码转换已成为一种普遍的需求。不同的视频格式和编码标准使得在不同设备上播放视频成为可能&#xff0c;同时也带来了兼容性和传输效率的问题。本文讲解引用云炫AI智剪使视频编码转换技巧&#xff0c;即批量将H264编码转换为H265编码&a…
阅读更多...
Java修仙传之神奇的ES（基础使用）

Java修仙传之神奇的ES（基础使用）

前言 ES是什么&#xff1a;一款强大的搜索引擎ES拓展&#xff1a;elasticsearch结合kibana、Logstash、Beats&#xff0c;也就是elastic stack&#xff08;ELK&#xff09; kibana&#xff1a;可视化 ES&#xff1a;搜索引起 Logstash&#xff1a;数据抓取&#xff0c;数据同步…
阅读更多...
Element UI的table不同应用

Element UI的table不同应用

目录 一、自定义表头 二、纵向表头(动态表头) 2.1、分别拿到表头和表头中日期对应的行数据 2.2、拿到每个日期对应的列数据 一、自定义表头 <el-table-column prop"chu" align"center"><!-- 自定义表头 --><template slot"header…
阅读更多...
uniapp 微信小程序 授权隐私流程 网上没有的踩坑记录！

uniapp 微信小程序 授权隐私流程 网上没有的踩坑记录！

首先什么时候我们需要授权操作&#xff0c;比如下图我们调用这些接口时候首先必须让用户授权&#xff0c;这个政策是2022年2月21日24时起对一下接口增加用户授权操作&#xff0c;详情可以看微信文档 授权的逻辑按照官网的意思是&#xff1a; 这个时候就踩坑了&#xff0c;我把…
阅读更多...
Linux命令超详细

Linux命令超详细

Linux基础命令 Linux的目录结构 /&#xff0c;根目录是最顶级的目录了Linux只有一个顶级目录&#xff1a;/路径描述的层次关系同样适用/来表示/home/itheima/a.txt&#xff0c;表示根目录下的home文件夹内有itheima文件夹&#xff0c;内有a.txt ls命令 功能&#xff1a;列出…
阅读更多...
高级文本编辑软件 UltraEdit mac中文版介绍说明

高级文本编辑软件 UltraEdit mac中文版介绍说明

UltraEdit mac是一款在Windows系统中非常出名的文本编辑器&#xff0c; UltraEdit for mac对于IT程序猿来说&#xff0c;更是必不可少&#xff0c;可以使用UltraEdit编辑配置文件、查看16进制文件、代码高亮显示等&#xff0c;虽然Mac上已经有了很多优秀的文本编辑器&#xff0…
阅读更多...
NOA赛道研究：预计2024年渗透率10%！中算力平台迎窗口期

NOA赛道研究：预计2024年渗透率10%！中算力平台迎窗口期

从基础L2到L3的产业演进中&#xff0c;NOA是至关重要的一步&#xff0c;值得被密切关注。 对于产业链不同位置的玩家&#xff0c;其关注的点有所不同&#xff1a;①对于整车厂来说&#xff0c;根据高工智能汽车监测的数据&#xff0c;基础L2的一体机产品已经趋向于成熟&#x…
阅读更多...
看完这个，别说你还找不到免费好用的配音软件

看完这个，别说你还找不到免费好用的配音软件

有很多小伙伴还在找配音工具&#xff0c;今天就给大家一次性分享四款免费好用的配音工具&#xff0c;每一个都经过测试&#xff0c;并且是我们自己也在用的免费配音工具 第一款&#xff0c;悦音配音工具 拥有强悍的AI智能配音技术&#xff0c;更专业&#xff0c;完美贴近真人配…
阅读更多...
出现身份验证错误，要求函数不受支持windows

出现身份验证错误，要求函数不受支持windows

现象环境&#xff1a; win10 企业版 mstsc内网远程server2016&#xff0c;出现错误代码&#xff1a; 远程桌面连接出现身份验证错误。要求的函数不受支持。这可能是由于CredSSP加密数据库修正 出现身份验证错误 原因&#xff1a; 系统更新&#xff0c;微软系统补丁的更新将…
阅读更多...
armbian 安裝配置教程

armbian 安裝配置教程

1、安装贝锐蒲公英 下载安装包 cd /usr/local/share mkdir pgyvpn wget https://pgy.oray.com/softwares/58/download/1839/PgyVisitor_Raspberry_2.4.0.52291_arm64.deb安装 dpkg -i PgyVisitor_Raspberry_2.4.0.52291_arm64.deb 输入pgyvisitor login/pgyvisitor login -…
阅读更多...
全网最全的RDMA拥塞控制入门基础教程

全网最全的RDMA拥塞控制入门基础教程

RDMA-CC&#xff08;全网最全的RDMA拥塞控制入门基础教程&#xff09; 文章目录 RDMA-CC&#xff08;全网最全的RDMA拥塞控制入门基础教程&#xff09;DMARDMARDMA举例RDMA优势RDMA的硬件实现方法RDMA基本术语FabricCA&#xff08;Channel Adapter&#xff09;Verbs 核心概念Me…
阅读更多...
波浪理论第3波anzo capital昂首资本3个方法3秒确认

波浪理论第3波anzo capital昂首资本3个方法3秒确认

要想通过波浪理论在交易中赚取最大利润&#xff0c;确认第三波必不可少&#xff0c;因为第三波通常是趋势中最大和最强的一波&#xff0c;今天anzo capital昂首资本3个方法3秒确认。 首先&#xff0c;第一个确认方法—斜率。 通常&#xff0c;第三波的斜率会比第一波更陡峭&a…
阅读更多...
使用 Python 进行自然语言处理第 5 部分：文本分类

使用 Python 进行自然语言处理第 5 部分：文本分类

一、说明 关于文本分类&#xff0c;文章已经很多&#xff0c;本文这里有实操代码&#xff0c;明确而清晰地表述这种过程&#xff0c;是实战工程师所可以参照和依赖的案例版本。 本文是 2023 年 1 月的 WomenWhoCode 数据科学跟踪活动提供的会议系列文章中的一篇。 之前的文章在…
阅读更多...
Linux进程控制——进程创建与退出

Linux进程控制——进程创建与退出

我们在用C语言结尾的时候总是会有return 0&#xff0c;但是有些人并不知道它到底有什么意思 还有在进程状态中让进程使用kill命令能够停下来&#xff0c;这些与进程控制有着密切的关系1.进程的创建 fork函数能够在代码中创建一个子进程&#xff0c;我们创建子进程的目的就是为…
阅读更多...
电商课堂｜5分钟了解电商数据分析完整流程，建议收藏！

电商课堂｜5分钟了解电商数据分析完整流程，建议收藏！

账户效果下降&#xff0c;如何能够快速找到问题并优化调整&#xff1f; 相信百分之90%的竞价员都会说&#xff1a;“做数据分析。” 没错&#xff0c;数据分析能够帮助我们快速锁定问题所在&#xff0c;确定优化方向&#xff0c;还可以帮助我们找到流量控制的方向。那么做电商&…
阅读更多...
绝地反击：阿里云服务器比腾讯云更优惠！

绝地反击：阿里云服务器比腾讯云更优惠！

2023阿里云服务器优惠活动来了&#xff0c;以前一直是腾讯云比阿里云优惠&#xff0c;阿里云绝地反击&#xff0c;放开老用户购买资格&#xff0c;99元服务器老用户可以买&#xff0c;并且享受99元续费&#xff0c;阿腾云亲测可行&#xff0c;大家抓紧吧&#xff0c;数量不多&a…
阅读更多...
软信天成：智能数据治理解决方案-干货分享

软信天成：智能数据治理解决方案-干货分享

近年来&#xff0c;数据治理成为备受关注的焦点&#xff0c;越来越多的企业和组织开始注重数据治理&#xff0c;以更好地保护和管理数据。为助力企业有效开展数据治理工作&#xff0c;软信天成基于过往实施案例&#xff0c;梳理出有关数据治理实施的关键要素和心得&#xff0c;…
阅读更多...
Techlink TL24G06 网络变压器 10G 基座单端口变压器

Techlink TL24G06 网络变压器 10G 基座单端口变压器

功能特征&#xff1a; 1、符合IEEE 802.3标准。 2、符合RoHS。 3、工作温度范围&#xff1a;0C至70C。 4、储存温度范围&#xff1a;-20C至125C。
阅读更多...
Java实现对Html文本的处理

Java实现对Html文本的处理

1.引入jsoup <dependency><groupId>org.jsoup</groupId><artifactId>jsoup</artifactId><version>1.8.3</version> </dependency> 2. html示例 示例代码&#xff1a; <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1…
阅读更多...
EG4003-一颗为微波、红外信号放大及处理输出的数模混合芯片

EG4003-一颗为微波、红外信号放大及处理输出的数模混合芯片

产品描述&#xff1a; EG4003是一款特意为微波、红外信号放大及处理输出的数模混合芯片&#xff0c;内部集成了运算放大器、双门限电压比较器、参考电压源、延时时间定时器和封锁时间定时器及状态控制器等&#xff0c;专用于防盗报警系统、人体门控制装置、照明控制开关等场合。…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023