JS实现限行
一、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> 限行尾号：<span class="todaynum" id="todaynum"></span><br> 98 <span class="tomorrow" id="tomorrowweek"></span> 限行尾号：<span class="tomorrownum" id="tomorrownum"></span> 99 <span class="normal"> <a href="http://www.bjjtgl.gov.cn/zhuanti/10weihao/index.html" target="_blank">详情>></a></span> 100 </div> 101 </body> 102 </html>
二、效果展示
限行代码运行结果如下图所示：
三、示例下载
Demo：LimitLineDemo
