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">总&ensp;金&ensp;额:<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>元&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" 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);
    }
}
时间: 2024-11-13 04:28:10

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.repla

jQuery实现跨域请请求小案例

jQuery从1.2开始就支持XMLHttp跨域请求了,具体怎么操作? jQuery中跨域访问的核心原理:JS文件注入,因为因为script标签的src属性是可以跨域的,利用script标签的src属性直接返回非本域名下的数据,具体采用的方式称为:jsonp.代码:    test.html,例如位于 www.qq.com     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/

todo 小案例

1. todo 小案例完成 需求分析使用 vuejs 完成一个todo小项目,todo应用主要是用于记录用户要做的事情. 参考原型http://todomvc.com/examples/vue/ 实现的功能1. todo 展示2. todo 删除3. 筛选 代码实操源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&g

Windows Server之浅谈SMB以及SMB小案例分享

SMB由来 服务器消息区块(英语:Server Message Block,缩写为SMB,服务器消息区块),又称网络文件共享系统(英语:Common Internet File System,缩写为CIFS),一种应用层网络传输协议,由微软开发,主要功能是使网络上的机器能够计算机文件.打印机.串行端口和通讯等资源.它也提供经认证的进程间通信机能.它主要用在装有Microsoft Windows的机器上,在这样的机器上被称为Microsoft Windows Network. SMB版本 OS W

Thinkphp 生成订单号小案例

Thinkphp 生成订单号小案例小伙伴们在日常的商城项目开发中,都会遇到订单号生成的问题,今天呢思梦PHP就带领大家去解读一下生成订单号的问题!首先,订单号我们要明确它有有3个性质:1.唯一性 2.不可推测性 3.效率性,唯一性和不可推测性不用说了,效率性是指不能频繁的去数据库查询以避免重复.况且满足这些条件的同时订单号还要足够的短.不知道小伙伴们在日常的项目中是否也和我一样去思考过生成订单的一些小问题,可能你也会说,这些东西不用想的那么复杂,其实呢,小编也是同意大家的看法,但是殊不知我们做程

几个数据库的小案例(一):将文本文件中的信息导入数据库的表中

从文本文件添加到数据库用户表的记录(有两个文件:frmMain.cs  SqlHelper.cs  ) //FrmMain.cs//作者:Meusing System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Fo

Java小案例(行星移动)

Java小案例 行星移动:参考:三百集 使用软件:idea2017,java 1,图片集:这里  (idea图片源放在target目录下,才能访问到),建议从小往上看... 2,定义MyFrame package my.university; import java.awt.*; import java.awt.event.WindowAdapter; import java.awt.event.WindowEvent; public class MyFrame extends Frame {

Jquery:小知识;

Jquery:小知识: jQuery学习笔记(二):this相关问题及选择器 上一节的遗留问题,关于this的相关问题,先来解决一下. this的相关问题 this指代的是什么 这个应该是比较好理解的,this就是指代当前操作的DOM对象. 在jQuery中,this可以用于单个对象,也可以用于多个对象. $('btn').click(function(){ alert(this.innerHTML); // 单个对象,this指代当前id为btn的DOM对象 }); $('div').each

程序员都会的 35 个 jQuery 小技巧

收集的35个 jQuery 小技巧/代码片段,可以帮你快速开发. 1. 禁止右键点击 1 $(document).ready(function(){ 2 $(document).bind("contextmenu",function(e){ 3 return false; 4 }); 5 }); 2. 隐藏搜索文本框文字 1 Hide when clicked in the search field, the value.(example can be found below in t