[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

相关文章

Python将博客内容html导出为Markdown格式

《Python将博客内容html导出为Markdown格式》Python将博客内容html导出为Markdown格式,通过博客url地址抓取文章,分析并提取出文章标题和内容,将内容构建成html,再转... 目录一、为什么要搞?二、准备如何搞?三、说搞咱就搞!抓取文章提取内容构建html转存markdown

在React中引入Tailwind CSS的完整指南

《在React中引入TailwindCSS的完整指南》在现代前端开发中,使用UI库可以显著提高开发效率,TailwindCSS是一个功能类优先的CSS框架,本文将详细介绍如何在Reac... 目录前言一、Tailwind css 简介二、创建 React 项目使用 Create React App 创建项目

vue使用docxtemplater导出word

《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl... 目录docxtemplatervue使用docxtemplater导出word安装常用语法 封装导出方

springboot循环依赖问题案例代码及解决办法

《springboot循环依赖问题案例代码及解决办法》在SpringBoot中,如果两个或多个Bean之间存在循环依赖(即BeanA依赖BeanB,而BeanB又依赖BeanA),会导致Spring的... 目录1. 什么是循环依赖?2. 循环依赖的场景案例3. 解决循环依赖的常见方法方法 1:使用 @La

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》:本文主要介绍了CSS中的`vertical-align`和`line-height`属性,包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案,详细内容请阅读本文,希望能对你有所帮助... 目录vertical-ali

浅析CSS 中z - index属性的作用及在什么情况下会失效

《浅析CSS中z-index属性的作用及在什么情况下会失效》z-index属性用于控制元素的堆叠顺序,值越大,元素越显示在上层,它需要元素具有定位属性(如relative、absolute、fi... 目录1. z-index 属性的作用2. z-index 失效的情况2.1 元素没有定位属性2.2 元素处

Python实现html转png的完美方案介绍

《Python实现html转png的完美方案介绍》这篇文章主要为大家详细介绍了如何使用Python实现html转png功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 1.增强稳定性与错误处理建议使用三层异常捕获结构:try: with sync_playwright(

Vue 调用摄像头扫描条码功能实现代码

《Vue调用摄像头扫描条码功能实现代码》本文介绍了如何使用Vue.js和jsQR库来实现调用摄像头并扫描条码的功能,通过安装依赖、获取摄像头视频流、解析条码等步骤,实现了从开始扫描到停止扫描的完整流... 目录实现步骤:代码实现1. 安装依赖2. vue 页面代码功能说明注意事项以下是一个基于 Vue.js

CSS @media print 使用详解

《CSS@mediaprint使用详解》:本文主要介绍了CSS中的打印媒体查询@mediaprint包括基本语法、常见使用场景和代码示例,如隐藏非必要元素、调整字体和颜色、处理链接的URL显示、分页控制、调整边距和背景等,还提供了测试方法和关键注意事项,并分享了进阶技巧,详细内容请阅读本文,希望能对你有所帮助...