一、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实现限行的更多相关文章

  1. SharePoint 2013 Excel Services ECMAScript 示例之明日限行

    前言:最近遇到一个“明日限行”的功能,北京的交通啊,这个不在今天讨论范围内,暂不吐槽,想想代码开发,还要写WebPart部署,很麻烦,而且部署服务器,需要领导审批,想绕过这个麻烦事儿,就想到客户端了, ...

  2. JS移动li行数据，点击上移下移（是位置的互换，不是top的偏移量改变）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. Js 合并 table 行 的实现方法

    Js 合并 table 行 的实现方法 需求如下: 某公司的员工档案,如下,  经理看员工的信息不是很清晰: 姓名 所在学校 毕业时间 张三 小学 2000 张三 中学 2006 张三 大学 2010 ...

  4. JS控制GridView行选择

    ASP.NET里的GridView控件使用非常广泛,虽然其功能强大,但总有一些不尽如人意的地方.比如在选择行的时候,它就没有UltraWebGrid做的友好:UltraWebGrid允许用户设置是否显 ...

  5. APISpace 尾号限行API接口 免费好用

    尾号限行是一种为了缓解城市交通压力而催生的交通制度,措施实施以后对城市交通拥堵起到缓解作用.每个地区的尾号限行规定都有所不同,具体的以当地的为准.   尾号限行API,提供已知所有执行限行政策的共计6 ...

  6. js ES6 多行字符串 连接字符串

    1. 以前,js多行字符串用\n写起来比较费事,所以最新的ES6标准新增了一种多行字符串的表示方法,用` ... `表示: 旧版写法 alert("你好,\n 我叫\n Olive" ...

  7. js与多行字符串

    JS里并没有标准的多行字符串的表示方法,但是在用模板的时候,为了保证模板的可阅读性,我们又不可避免的使用多行字符串,所以出现了各种搞法,这里以一段jade的模板作为示例,简单总结和对比一下. 字符串相 ...

  8. js定义多行字符串

    js本身没有提供类似的定义方式,但是可以通过多行注释(/* */),已经借助function的方式来达到多行字符的定义,例如代码: var jstr = function() { var fun = ...

  9. Node.js用6行代码1个JS文件搭建一个HTTP静态服务器

    Node.js是一个基于Chrome的JavaScript运行时的用户以轻松构建快速.可扩展的网络应用平台. Node.js使用事件驱动.非阻塞I/ O模型,使它轻量级.高效和完美的适用于运行在分布式 ...

随机推荐

  1. Windows MinGW 64-bit boost 踩坑

    >g++ -Wall -shared -g -DBUILD_DLL main.cpp -ID:\gcc\boost\include\boost-1_69 -LD:\gcc\boost\lib - ...

  2. Luogu P1782 旅行商的背包

    题目传送门 卡常背包果然名不虚传 算法主体就是两种背包分开跑,先跑多重背包,再跑奇货 不知道为什么,这题二进制拆分好像要比单调队列优化快一些 然后这题毒瘤的地方就出来了: 如果一件物品的体积\(\ti ...

  3. document节点的一些个性属性

    <ol> <li>document.head:返回文档的< head>节点:</li> <li>document.body:返回文档的< ...

  4. 【Java_基础】JVM内存模型与垃圾回收机制

    1. JVM内存模型 Java虚拟机在程序执行过程会把jvm的内存分为若干个不同的数据区域来管理,这些区域有自己的用途,以及创建和销毁时间. JVM内存模型如下图所示 1.1 程序计数器 程序计数器( ...

  5. ACM训练联盟周赛 G. Teemo's convex polygon

    65536K   Teemo is very interested in convex polygon. There is a convex n-sides polygon, and Teemo co ...

  6. PAT Basic 1037

    1037 在霍格沃茨找零钱 如果你是哈利·波特迷,你会知道魔法世界有它自己的货币系统 —— 就如海格告诉哈利的:“十七个银西可(Sickle)兑一个加隆(Galleon),二十九个纳特(Knut)兑一 ...

  7. 几条sql语句（exists）

    通常exists后的子查询是需要和外面的表建立关联关系的,如 select count(*) from a where exists (select 'x' from b where a.id = b ...

  8. HDU 3045 DP 斜率优化 Picnic Cows

    题意:将n个数分成若干组,每组数字的个数不少于t个,要把每组的数字减小到这组最小值,求所有数字减少的最小值. 先将这n个数从小到大排个序,可以想到一组里面的数一定是排序后相邻的. 设d(i)表示前i个 ...

  9. xhtml css 漏 整理

    1)文档类型 代码最上部有如下这句话: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  10. volatile随笔见解

    1.volatile可以保证可见性,不能保证一致性,但是与cas操作结合在实现并发上性能很不错,java并发包下不少类都有这种实现方式. 2.相比synchronized执行成本更低,因为它不会引起线 ...