《超实用的jQuery代码段》-3：计算加载时间、模拟抽奖、规定年龄计算、通用的清空表格函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<script type="text/javascript">
    var beforeLoad = (new Date()).getTime();//返回距 1970 年 1 月 1 日之间的毫秒数：
    function getPageLoadTime(){
        var afterLoad = (new Date()).getTime();
        var seconds = (afterLoad-beforeLoad)/1000;//1000ms=1s
        $("#loadtime").text(seconds + '秒');
        console.log(afterLoad,beforeLoad);
    } 
    window.onload = getPageLoadTime;
</script>
<body>
    <div id="loadtime"></div>
    <div id="chosed"></div>
    <button onclick="start()" accesskey="s">开始(<u>S</u>)</button>
    <button onclick="stop()" accesskey="o">结束(<u>O</u>)</button>

    <div id="age_limit">
        <select name="year" id="year">
            <option value="1999">1999</option>
            <option value="2000">2000</option>
            <option value="2001">2001</option>
            <option value="2002">2002</option>
            <option value="2003">2003</option>
            <option value="2004">2004</option>
        </select>
        <select name="month" id="month">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
        </select>
        <button id="check">检测</button>
    </div>

    <form action="" id="form1">
        <input type="text">
        <textarea name="" id="" cols="30" rows="10"></textarea>
        <input type="checkbox" checked name="ss" id="">
        <select name="ss" id="">
            <option value="2">2</option>
            <option value="2x">2x</option>
        </select>
        <input type="button" value="clear" onclick="clearForm($('form1'))">
    </form>
</body>
<script>
    //jQuery模拟抽奖程序
    var members = "甲乙丙丁戊己庚辛壬";
    var membersArr = members.split("");
    var num = membersArr.length - 1;
    var timer;

    function getRamdom(min,max){
        return parseInt(Math.random()*(max-min+1));//如随机数生成0.5，数组长度为13（14个数据），得到的整型数为6
    }

    function change(){
        $("#chosed").html(membersArr[getRamdom(0,num)]);//将显示div里的内容替换为选中的
    }

    function start(){
        clearInterval(timer);//防止多次点击出现问题
        timer = setInterval('change()',100);
    };
    function stop(){
        clearInterval(timer);
    }
    console.log(membersArr);

    //年龄的计算（用原生js写）
    var checkBtn =  document.getElementById("check");
    checkBtn.onclick = function(){
        var currentDate = new Date();
        var birthDate = new Date();
        var year = document.querySelector("#year").value;
        var month = document.querySelector("#month").value;
        var requiredAge = 18;

        birthDate.setFullYear(year,month-1);//获取正确格式的出生日期
        currentDate.setFullYear(currentDate.getFullYear()-requiredAge)//得到至少要求的日期
        //很刺激，因为不用考虑月份的计算了...
        console.log(birthDate,year,month,currentDate);
        if(currentDate - birthDate < 0){
            alert("年龄不满足要求噢");
            return false;
        }
        return true;
    }


    //一个通用的、能够清除所有表单内容的函数
    function clearForm(form){
        $(':input',form).each(function(){//循环所有input控件
            var type = this.type;
            var tag = this.tagName.toLowerCase();
            if(type == 'text' || type == "password" || tag == "textarea"){
                this.value = "";
            }else if(type == "checkbox" || type == "radio"){
                this.checked = false;
            }else if(tag == 'select'){
                this.selectedIndex = -1;//表示不选中任何元素·
            }
        })
    };

</script>
</html>
《超实用的jQuery代码段》-3：计算加载时间、模拟抽奖、规定年龄计算、通用的清空表格函数

猜你喜欢
