[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" onclick="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" onkeyup="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" onkeyup="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" onchange="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" onchange="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) { //这里遍历的值直接是value var 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); } }