JS实现限行

2018-06-24 00:38:53来源：未知阅读 ()

一、JS代码实现

1、机动车辆限行如下图所示：

具体详情请访问：http://www.bjjtgl.gov.cn/zhuanti/10weihao/index.html

2、JS代码实现

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta name="viewport" content="width=device-width" />
  5     <title>北京市机动车辆尾号限行实现（JS）</title>
  6     <style>
  7         .limit {
  8             font-size: 20px;
  9             width: 100%;
 10             background-color: aliceblue;
 11             border-radius: 5px;
 12             padding: 20px;
 13         }
 14         .limit span {
 15             color: red;
 16             font-weight: bold;
 17         }
 18         .limit a {
 19             font-size: 16px;
 20         }
 21     </style>
 22     <script src="~/Content/jquery-2.1.1.min.js"></script>
 23     <script type="text/javascript">
 24         $(function () {
 25             GetLimitNum();
 26         })
 27 
 28         //限行方法
 29         function GetLimitNum() {
 30             //获取当天日期
 31             var dt = new Date().format("yyyy-MM-dd");
 32             var startDate = "2012-10-08";//开始星期，周一的日期
 33             var ln1 = "1和6";
 34             var ln2 = "2和7";
 35             var ln3 = "3和8";
 36             var ln4 = "4和9";
 37             var ln5 = "5和0";
 38             var ln6 = "不限行";
 39             var ln7 = "不限行";
 40             //开始日期
 41             var startArr = startDate.split('-');
 42             var vStartDate = new Date(startArr[0], startArr[1] - 1, startArr[2]);
 43             //当前日期
 44             var todayArr = dt.split("-");
 45             var vTodayDate = new Date(todayArr[0], todayArr[1] - 1, todayArr[2]);
 46             //今天限行尾号
 47             var nTodayNum = getXHNumber(vTodayDate, vStartDate);
 48             //明天限行尾号
 49             vTodayDate.setDate(vTodayDate.getDate() + 1);
 50             var nTomorrowNum = getXHNumber(vTodayDate, vStartDate);
 51             //星期赋值
 52             var arr_week = new Array("星期六", "星期日", "星期一", "星期二", "星期三", "星期四", "星期五");
 53             var todayweek = vTodayDate.getDay();
 54             $("#todayweek").html(arr_week[todayweek]);
 55             $("#tomorrowweek").html(arr_week[(todayweek + 1) == 7 ? 0 : todayweek + 1]);
 56             //限行尾号赋值
 57             $("#todaynum").html(eval('ln' + nTodayNum));
 58             $("#tomorrownum").html(eval('ln' + nTomorrowNum));
 59         }
 60 
 61         //获取限行尾号
 62         function getXHNumber(tDate, sDate) {
 63             var nDayNum = tDate.getDay() == 0 ? 7 : tDate.getDay();
 64             if (nDayNum > 5) return nDayNum;
 65             var nDiff = (tDate - sDate) / 1000 / 3600 / 24 / 7 / 13;
 66             nDiff = Math.floor(nDiff) % 5;
 67             nDayNum = 5 - nDiff + nDayNum;
 68             if (nDayNum > 5) nDayNum -= 5;
 69             return nDayNum;
 70         }
 71 
 72         //时间格式化
 73         Date.prototype.format = function (fmt) {
 74             var o = {
 75                 "M+": this.getMonth() + 1,                    //月份
 76                 "d+": this.getDate(),                         //日
 77                 "h+": this.getHours(),                        //小时
 78                 "m+": this.getMinutes(),                      //分
 79                 "s+": this.getSeconds(),                      //秒
 80                 "q+": Math.floor((this.getMonth() + 3) / 3),  //季度
 81                 "S": this.getMilliseconds()                   //毫秒
 82             };
 83             if (/(y+)/.test(fmt)) {
 84                 fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
 85             }
 86             for (var k in o) {
 87                 if (new RegExp("(" + k + ")").test(fmt)) {
 88                     fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
 89                 }
 90             }
 91             return fmt;
 92         }
 93     </script>
 94 </head>
 95 <body>
 96     <div class="limit" id="limitLine">
 97         <span class="today" id="todayweek"></span>&nbsp;限行尾号：<span class="todaynum" id="todaynum"></span><br>
 98         <span class="tomorrow" id="tomorrowweek"></span>&nbsp;限行尾号：<span class="tomorrownum" id="tomorrownum"></span>
 99         <span class="normal">&nbsp;&nbsp;<a href="http://www.bjjtgl.gov.cn/zhuanti/10weihao/index.html" target="_blank">详情&gt;&gt;</a></span>
100     </div>
101 </body>
102 </html>