[jQuery学习系列六]6-jQuery实际操作小案例

2024-02-21 20:30

本文主要是介绍[jQuery学习系列六]6-jQuery实际操作小案例,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

[jQuery学习系列六]6-jQuery实际操作小案例

前言
最后在这里po上jQuery的几个小案例.

Jquery例子1_占位符使用
需求: 点击第一个按钮后 自动去check 后面是否有按钮没有选中, 如有则提示错误消息.

复制代码
<html>
<head>
<script type="text/javascript">
function check()
{String.prototype.format = function(){    var args = arguments;    return this.replace(/\{(\d+)\}/g,                    function(m,i){    return args[i];});    }  var errorMessage = "项目{0} {1} {2}没有被勾选!"; var firstValue = "";var secondValue = "";var lastValue = "";if (document.getElementById("check1").checked){if (!document.getElementById("check2").checked){firstValue = "2";}if (!document.getElementById("check3").checked){secondValue = "3";}if (!document.getElementById("check4").checked){lastValue = "4";}alert(errorMessage.format(firstValue,secondValue,lastValue));}
}
</script>
</head><body><form><input type="checkbox" id="check1" οnclick="check()">1</input><input type="checkbox" id="check2">2</input><input type="checkbox" id="check3">3</input><input type="checkbox" id="check4">4</input>
</form></body>
</html>
复制代码

 

Jquery例子2_模拟微信红包(摘自网络)
需求: 模拟微信抢红包

复制代码
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>仿微信抢红包</title><style>html,body,div{margin:0;padding:0;}body{background:#EAEAEA;font:16px/1.8 "微软雅黑";padding-bottom:20px}input{margin:0;display:inline-block;border:1px solid #ddd;padding:4px 2px;font-size:16px;font-family:"微软雅黑";margin-right: 5px;}input:focus{border-color:#3C9BD1;outline:none;}.wrap,.list { margin: 50px auto; width: 300px;}.title{   font-size: 42px;   color: #464646;text-align: center;}.line{height:40px;line-height:40px;text-align: center;}.btn{display:block;background:#3C9BD1;color:#fff;line-height: 40px;height:40px;text-align: center;width:200px;margin:0 auto;margin-top:50px;text-decoration: none;transition:all .3s linear;border-radius: 2px;}.btn:hover{opacity:.9;}.list{width:500px;border:1px solid #DBDBDB;padding:10px;BACKGROUND:#F5F5F5;text-align: center;}.list p span {color: red; padding: 0 8px;}.list p:empty{background: #000000;}.list:empty{display: none;}.link{position:fixed;height:20px;font-size: 12px;color:#999;text-align: center;width: 100%;bottom:0;line-height:20px;margin:0;padding:0;    background: #EAEAEA;padding:5px 0;}.link a{font-size:12px;color:#999;}</style></head><body><h1 class="title">javascript实现仿微信抢红包</h1><div class="wrap"><div class="line">红包个数:<input type="text" name="packetNumber" value="5" οnkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" maxlength="10">个</div><div class="line">总&ensp;金&ensp;额:<input type="text" name="money" value="5" οnkeyup="if(isNaN(value))execCommand('undo')" onafterpaste="if(isNaN(value))execCommand('undo')" maxlength="10">元</div><div class="line"><a class="btn" href="javascript:;">发红包</a></div></div><div class="list"></div><p class="link">参考<a target="_blank" href="https://www.zybuluo.com/yulin718/note/93148">《微信红包的架构设计简介》</a>文章</p><script>"use strict";var _createClass = function() {function defineProperties(target, props) {for (var i = 0; i < props.length; i++) {var descriptor = props[i];descriptor.enumerable = descriptor.enumerable || false;descriptor.configurable = true;if ("value" in descriptor)descriptor.writable = true;Object.defineProperty(target, descriptor.key, descriptor);}}return function(Constructor, protoProps, staticProps) {if (protoProps)defineProperties(Constructor.prototype, protoProps);if (staticProps)defineProperties(Constructor, staticProps);return Constructor;};
}();function _classCallCheck(instance, Constructor) {if (!(instance instanceof Constructor)) {throw new TypeError("Cannot call a class as a function");}
}var MoneyPacket = function() {function MoneyPacket(packNumber, money) {_classCallCheck(this, MoneyPacket);this.min = 0.01;this.flag = true;this.packNumber = packNumber;this.money = money;if (!this.checkPackage()) {this.flag = false;return {"flag": this.flag};}}_createClass(MoneyPacket, [{key: "checkPackage",value: function checkPackage() {if (this.packNumber == 0) {alert("至少需要设置1个红包");return false;}if (this.money <= 0) {alert("红包总金额不能小于0");return false;}if (this.packNumber * this.min > this.money) {alert("单个红包金额不可低于0.01元");return false;}return true;}}]);return MoneyPacket;
}();var getRandomMoney = function getRandomMoney(packet) {if (packet.packNumber == 0) {return;}if (packet.packNumber == 1) {var _lastMoney = Math.round(packet.money * 100) / 100;packet.packNumber--;packet.money = 0;return _lastMoney;}var min = 0.01, max = packet.money / packet.packNumber * 2, money = Math.random() * max;money = money < min ? min : money;money = Math.floor(money * 100) / 100;packet.packNumber--;packet.money = Math.round((packet.money - money) * 100) / 100;return money;
}
;(function() {var oBtn = document.querySelector(".btn");var oList = document.querySelector(".list");oBtn.onclick = function() {var packetNumber = +document.querySelector("input[name=packetNumber]").value;var money = +document.querySelector("input[name=money]").value;var str = "";var packet = new MoneyPacket(packetNumber,money), num = packet.flag && packet.packNumber || 0;console.log("========================================================================");for (var i = 0; i < num; i++) {var _pack = getRandomMoney(packet);str += "<p>第<span>" + i + "</span>个红包:: <span>" + _pack.toFixed(2) + "</span>元&emsp;&emsp;==剩余红包:: <span>" + packet.money.toFixed(2) + "</span> 元<p>";console.log("第", i, "个红包::", _pack.toFixed(2), "元      ==剩余红包::", packet.money.toFixed(2), "元");}str !== "" && (oList.innerHTML = str);};
})();</script></body>
</html>
复制代码

 

Jquery例子3_三级联动

需求: 实现省市县三级联动

复制代码
<h3>您的地址是:
</h3>
<select id="Province" οnchange="SelectValueChanged('Province', 'Get_City')"><option id="Not_data1">Province</option><option id="GuangDong" value="GuangDong">GuangDong</option><option id="ShanDong" value="ShanDong">ShanDong</option><option id="HuNan" value="HuNan">HuNan</opetion>
</select>
<select id="City" οnchange="SelectValueChanged('City', 'Get_Country')"><option id="Not_data2">City</option>
</select>
<select id="Country"><option id="Not_data3">Country</option>
</select>"use strict"
//初始化的数据
var placeDictionary = {"GuangDong":{"GuangZhou":["PanYu","HuangPu","TianHe"],"QingYuan":["QingCheng","YingDe","LianShan"],"FoShan":["NanHai","ShunDe","SanShui"]},"ShanDong":{"JiNan":["LiXia","ShiZhong","TianQiao"],"QingDao":["ShiNan","HuangDao","JiaoZhou"]},"HuNan":{"ChangSha":["KaiFu","YuHua","WangCheng"],"ChenZhou":["BeiHu","SuXian","YongXian"]}
};//通过province或city的变化连动
function SelectValueChanged(idType, perpose) {var selectedValue = GetSelectedId(idType);if(perpose == "Get_City"){AddCity(selectedValue);}else if(perpose == "Get_Country"){AddCountry(selectedValue);}
}function GetSelectedId(id){var prop = document.getElementById(id);var selectedValue = prop.options[prop.selectedIndex].id;return selectedValue;
}function AddCity(provinceSelectedValue){//保持联动的一致性, 当Province的index变化时都需要清空City和Country的值$("#City").empty();$("#City").append("<option>City</option>");$("#Country").empty();$("#Country").append("<option>Country</option>");var cityNames = placeDictionary[provinceSelectedValue];for(var city in cityNames){//这里遍历的值直接是valuevar value = "<option id='"+ city +"'>" + city + "</option>";$("#City").append(value);}
}function AddCountry(citySelectedValue) {//保持联动一致性,当City的index变化时需要清空Country中的值$("#Country").empty();$("#Country").append("<option>Country</option>");var provinceSelectedId = GetSelectedId("Province");//获得城市列表var countries = placeDictionary[provinceSelectedId][citySelectedValue];for(var index in countries){//这里index获取的是id 值var value = "<option id='"+ countries[index] +"'>" + countries[index] + "</option>";$("#Country").append(value);}
}
复制代码

这篇关于[jQuery学习系列六]6-jQuery实际操作小案例的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/732979

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

HarmonyOS学习(七)——UI(五)常用布局总结

自适应布局 1.1、线性布局(LinearLayout) 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列,Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距,达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式,且在各类尺寸屏幕上表现一致,其中交叉轴为垂直时,取值为Vert

Ilya-AI分享的他在OpenAI学习到的15个提示工程技巧

Ilya(不是本人,claude AI)在社交媒体上分享了他在OpenAI学习到的15个Prompt撰写技巧。 以下是详细的内容: 提示精确化:在编写提示时,力求表达清晰准确。清楚地阐述任务需求和概念定义至关重要。例:不用"分析文本",而用"判断这段话的情感倾向:积极、消极还是中性"。 快速迭代:善于快速连续调整提示。熟练的提示工程师能够灵活地进行多轮优化。例:从"总结文章"到"用

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门(一):登录与退出》 《Spring-Security-入门(二):基于数据库验证》 《Spring-Security-入门(三):密码加密》 《Spring-Security-入门(四):自定义-Filter》 《Spring-Security-入门(五):在 Sprin

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

Hadoop企业开发案例调优场景

需求 (1)需求:从1G数据中,统计每个单词出现次数。服务器3台,每台配置4G内存,4核CPU,4线程。 (2)需求分析: 1G / 128m = 8个MapTask;1个ReduceTask;1个mrAppMaster 平均每个节点运行10个 / 3台 ≈ 3个任务(4    3    3) HDFS参数调优 (1)修改:hadoop-env.sh export HDFS_NAMENOD

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

学习hash总结

2014/1/29/   最近刚开始学hash,名字很陌生,但是hash的思想却很熟悉,以前早就做过此类的题,但是不知道这就是hash思想而已,说白了hash就是一个映射,往往灵活利用数组的下标来实现算法,hash的作用:1、判重;2、统计次数;

性能分析之MySQL索引实战案例

文章目录 一、前言二、准备三、MySQL索引优化四、MySQL 索引知识回顾五、总结 一、前言 在上一讲性能工具之 JProfiler 简单登录案例分析实战中已经发现SQL没有建立索引问题,本文将一起从代码层去分析为什么没有建立索引? 开源ERP项目地址:https://gitee.com/jishenghua/JSH_ERP 二、准备 打开IDEA找到登录请求资源路径位置