[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">总 金 额：<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>元  ==剩余红包:: <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);}
} 
