JS实现限行

一、JS代码实现

1、机动车辆限行如下图所示：
具体详情请访问：http://www.bjjtgl.gov.cn/zhuanti/10weihao/index.html
2、JS代码实现
 <!DOCTYPE html>

 <html>

 <head>

     <meta name="viewport" content="width=device-width" />

     <title>北京市机动车辆尾号限行实现（JS）</title>

     <style>

         .limit {

             font-size: 20px;

             width: 100%;

             background-color: aliceblue;

             border-radius: 5px;

             padding: 20px;

         }

         .limit span {

             color: red;

             font-weight: bold;

         }

         .limit a {

             font-size: 16px;

         }

     </style>

     <script src="~/Content/jquery-2.1.1.min.js"></script>

     <script type="text/javascript">

         $(function () {

             GetLimitNum();

         })

         //限行方法

         function GetLimitNum() {

             //获取当天日期

             var dt = new Date().format("yyyy-MM-dd");

             var startDate = "2012-10-08";//开始星期，周一的日期

             var ln1 = "1和6";

             var ln2 = "2和7";

             var ln3 = "3和8";

             var ln4 = "4和9";

             var ln5 = "5和0";

             var ln6 = "不限行";

             var ln7 = "不限行";

             //开始日期

             var startArr = startDate.split('-');

             var vStartDate = new Date(startArr[0], startArr[1] - 1, startArr[2]);

             //当前日期

             var todayArr = dt.split("-");

             var vTodayDate = new Date(todayArr[0], todayArr[1] - 1, todayArr[2]);

             //今天限行尾号

             var nTodayNum = getXHNumber(vTodayDate, vStartDate);

             //明天限行尾号

             vTodayDate.setDate(vTodayDate.getDate() + 1);

             var nTomorrowNum = getXHNumber(vTodayDate, vStartDate);

             //星期赋值

             var arr_week = new Array("星期六", "星期日", "星期一", "星期二", "星期三", "星期四", "星期五");

             var todayweek = vTodayDate.getDay();

             $("#todayweek").html(arr_week[todayweek]);

             $("#tomorrowweek").html(arr_week[(todayweek + 1) == 7 ? 0 : todayweek + 1]);

             //限行尾号赋值

             $("#todaynum").html(eval('ln' + nTodayNum));

             $("#tomorrownum").html(eval('ln' + nTomorrowNum));

         }

         //获取限行尾号

         function getXHNumber(tDate, sDate) {

             var nDayNum = tDate.getDay() == 0 ? 7 : tDate.getDay();

             if (nDayNum > 5) return nDayNum;

             var nDiff = (tDate - sDate) / 1000 / 3600 / 24 / 7 / 13;

             nDiff = Math.floor(nDiff) % 5;

             nDayNum = 5 - nDiff + nDayNum;

             if (nDayNum > 5) nDayNum -= 5;

             return nDayNum;

         }

         //时间格式化

         Date.prototype.format = function (fmt) {

             var o = {

                 "M+": this.getMonth() + 1,                    //月份

                 "d+": this.getDate(),                         //日

                 "h+": this.getHours(),                        //小时

                 "m+": this.getMinutes(),                      //分

                 "s+": this.getSeconds(),                      //秒

                 "q+": Math.floor((this.getMonth() + 3) / 3),  //季度

                 "S": this.getMilliseconds()                   //毫秒

             };

             if (/(y+)/.test(fmt)) {

                 fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));

             }

             for (var k in o) {

                 if (new RegExp("(" + k + ")").test(fmt)) {

                     fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));

                 }

             }

             return fmt;

         }

     </script>

 </head>

 <body>

     <div class="limit" id="limitLine">

         <span class="today" id="todayweek"></span>&nbsp;限行尾号：<span class="todaynum" id="todaynum"></span><br>

         <span class="tomorrow" id="tomorrowweek"></span>&nbsp;限行尾号：<span class="tomorrownum" id="tomorrownum"></span>

         <span class="normal">&nbsp;&nbsp;<a href="http://www.bjjtgl.gov.cn/zhuanti/10weihao/index.html" target="_blank">详情&gt;&gt;</a></span>

     </div>

 </body>

 </html>
二、效果展示

限行代码运行结果如下图所示：
三、示例下载

Demo：LimitLineDemo
巴特西

JS实现限行

一、JS代码实现

二、效果展示

三、示例下载

最新文章

热门文章
