[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 = "";

        }

        if (!document.getElementById("check3").checked)

        {

            secondValue = "";

        }

        if (!document.getElementById("check4").checked)

        {

            lastValue = "";

        }

        alert(errorMessage.format(firstValue,secondValue,lastValue));

    }

}

</script>

</head>

<body>

<form>

 <input type="checkbox" id="check1" onclick="check()"></input>

 <input type="checkbox" id="check2"></input>

 <input type="checkbox" id="check3"></input>

 <input type="checkbox" id="check4"></input>

</form>

</body>

</html>

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

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>仿微信抢红包</title>

        <style>

            html,body,div{margin:;padding:;}

            body{background:#EAEAEA;font:16px/1.8 "微软雅黑";padding-bottom:20px}

            input{margin:;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: #;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: auto;margin-top:50px;text-decoration: none;transition:all .3s linear;border-radius: 2px;}

            .btn:hover{opacity:.;}

            .list{width:500px;border:1px solid #DBDBDB;padding:10px;BACKGROUND:#F5F5F5;text-align: center;}

            .list p span {color: red; padding:  8px;}

            .list p:empty{background: #;}

            .list:empty{display: none;}

            .link{position:fixed;height:20px;font-size: 12px;color:#;text-align: center;width: %;bottom:;line-height:20px;margin:;padding:;    background: #EAEAEA;padding:5px ;}

            .link a{font-size:12px;color:#;}

        </style>

    </head>

    <body>

        <h1 class="title">javascript实现仿微信抢红包</h1>

        <div class="wrap">

            <div class="line">红包个数：<input type="text" name="packetNumber" value="" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" maxlength="">个</div>

            <div class="line">总&ensp;金&ensp;额：<input type="text" name="money" value="" onkeyup="if(isNaN(value))execCommand('undo')" onafterpaste="if(isNaN(value))execCommand('undo')" maxlength="">元</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 = ; 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 == ) {

                alert("至少需要设置1个红包");

                return false;

            }

            if (this.money <= ) {

                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 == ) {

        return;

    }

    if (packet.packNumber == ) {

        var _lastMoney = Math.round(packet.money * ) / ;

        packet.packNumber--;

        packet.money = ;

        return _lastMoney;

    }

    var min = 0.01

      ,

    max = packet.money / packet.packNumber *

      ,

    money = Math.random() * max;

    money = money < min ? min : money;

    money = Math.floor(money * ) / ;

    packet.packNumber--;

    packet.money = Math.round((packet.money - money) * ) / ;

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

        console.log("========================================================================");

        for (var i = ; i < num; i++) {

            var _pack = getRandomMoney(packet);

            str += "<p>第<span>" + i + "</span>个红包:: <span>" + _pack.toFixed() + "</span>元&emsp;&emsp;==剩余红包:: <span>" + packet.money.toFixed() + "</span> 元<p>";

            console.log("第", i, "个红包::", _pack.toFixed(), "元      ==剩余红包::", packet.money.toFixed(), "元");

        }

        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);

    }

}

[jQuery学习系列六]6-jQuery实际操作小案例的更多相关文章

jquery学习笔记(二)：DOM元素操作
内容来自[汇智网]jquery学习课程 2.1 元素属性操作 1.获取元素的属性语法:attr(name) 参数name表示属性的名称 2.设置元素的属性单个属性设置语法:attr(key,val ...
Python学习系列（五）(文件操作及其字典)
Python学习系列(五)(文件操作及其字典) Python学习系列(四)(列表及其函数) 一.文件操作 1,读文件在以'r'读模式打开文件以后可以调用read函数一次性将文件内容全部读出 ...
Html5 学习系列（四）文件操作API
原文:Html5 学习系列(四)文件操作API 引言在之前我们操作本地文件都是使用flash.silverlight或者第三方的activeX插件等技术,由于使用了这些技术后就很难进行跨平台.或者跨 ...
PHP中的MySQLi扩展学习（六）MySQLI_result对象操作
在之前的文章中,我们就已经接触过 MYSQLI_result 相关的内容.它的作用其实就是一个查询的结果集.不过在 PDO 中,一般直接通过 query() 或者 PDOStatement 对象进行查 ...
[jQuery学习系列二 ]2-JQuery学习二-数组操作
前言上一篇内容已经对于Jquery 有了一些认识, 包括Jquery的选择器和DOM对象, 那么这一篇继续来看下Jquery中很实用的Jquery对于数组的操作. Jquery中对数组的操作大致有 ...
jQuery学习之------对标签属性的操作
jQuery学习之------标签的属性 <a href=””>链接</a>此处的href就是该a标签带有的属性在js中对标签的属性的操作方法有 1.1getAttribut ...
[jQuery学习系列一]1-选择器与DOM对象
前言: 好久没有更新博客了, 最近想复习下之前学过的JS的相关内容, 也算是自己的一种总结. 知识长时间不用就会忘记, 多学多记多用!! 下面的程序都可以在下面的网站进行在线调试: http://w ...
Jquery学习笔记：获取jquery对象的基本方法
jquery最大的好处是将js对html页面的操作(读写)进行了封装,隔离了浏览器的差异性,并简化了操作,和提供了强大的功能. 在web页面中,所有的js操作都是围绕操作dom对象来的.而jquery ...
08 LaTeX学习系列之---Latex 的中文操作
目录目录: (一)方法一:导入 ctex 宏包 1.说明: 2.源代码: 3.效果展示: (二)使用ctex的文档类 1.说明: 2.源代码: 3.显示效果: (三)查看帮助 1.Ctex的使用手册 ...

随机推荐

使用C# WinForm窗体制作经理评分项目 ——S2 2.2
在窗口加载时初始化三个员工对象用数组存放这是员工类的大致字段和属性. 在FrmMain中给对象数组附初值以上 FrmMain中用一个ListView控件展示员工信息,通过以上代码将对象数组中的内 ...
Spring MVC开发环境的搭建和实例
一.安装jdk 二.安装tomcat 三.安装maven 新增环境变量MAVEN-HOME,并在path变量中添加bin路径四.安装IntelliJ IDEA 五.创建maven web项目选择jd ...
#import、#include以及@class的区别
一.#import和#include的区别当我们在代码中使用两次#include的时候会报错:因为#include相当于拷贝头文件中的声明内容,所以会报重复定义的错误但是使用两次#import的话 ...
tabbar底部标题和子控制器标题为什么会保持一致？
原因: 1.当self.navigationItem.title,self.tabBarItem.title没有赋值情况下值和self.title一致. 2.当切换到该控制器页面的时候自己设置的sel ...
HttpURLConnection请求网络数据的Post请求
//--------全局变量----------- //注册Url private String urlPath="http://101.200.142.201:8080/VideoP ...
第一章 JacksonUtil 序列化与反序列化属性总结
1.json-lib与Jackson 关于json-lib与Jackson对比总结如下: 1).性能方面,Jackson的处理能力高出Json-lib10倍左右. 2).json-lib已经停止更新, ...
Daily Scrum 12.1
今日完成任务: 完成了对源代码结构的修改,删除冗余等:和其他小组讨论了关于整合的问题,向其他小组介绍自己小组使用的数据库等. 明日任务: 晏旭瑞初步完成文档上传下载孙思权深入了解数据库中每个表, ...
unity --项目总结
最近做的unity的项目涉及到的问题如下: 1.绘制折线图问题: 起初利用的unity自带的linerender组件,这种方法绘制的线不均匀,效果不好.然后又利用画线插件Ves……开头的那个,结果那个 ...
利用Java自带的MD5加密
package test.md5; import java.security.MessageDigest; public class MD5Util { public final static Str ...
jsp_属性范围_page
page属性范围(使用pageContext表示,但是一般习惯于将这种范围称为page范围)表示将一个属性设置在本页上,页面跳转之后无法取得. 下面我们来写两个小例子测试一下: 1.在同一个jsp页面 ...

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

[jQuery学习系列六]6-jQuery实际操作小案例的更多相关文章

随机推荐

热门专题