一、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. Web中打印的各种方案参考

    http://blog.csdn.net/chinahuyong/article/details/42527491

  2. python之数据类型补充

    1. capitalize (首字母大写) 例题: s = "alex wusir" s1 = s.capitalize() # 格式 print(s1) ''' 输出结果 Ale ...

  3. Navicat 复制多条数据

  4. python:加密模块

    加密:import hashlib # import md5 #python2 中可以直接引入md5,3中没有 #md5 #md5加密是不可逆的,即不能解密. #只要用MD5加密,结果都是一样的,不区 ...

  5. HTML网页的浏览器标题栏显示小图标的方法

    HTML网页的浏览器标题栏显示小图标的方法   就像这种效果,方法其实很简单,就是 在head头部里写: <link rel='icon' href='pic.ico ' type='image ...

  6. 如何查看 JAR 包的源代码

    ava 项目的编译文件经常被打包成 JAR(Java Archive,Java 归档文件)文件,当然,作为学习,有时候也非常想看到这个 JAR 被打包前的源代码是怎么样的. 下面提供几种查看 JAR ...

  7. shell基础笔记1

    ---恢复内容开始--- 1 test命令中不能使用浮点小数值,如:    A=1.444444:[    $A -gt 1  ] 2 test命令中的>或<必须转义,否则shell会把它 ...

  8. [LUOGU]P1443 马的遍历

    题目描述 有一个n*m的棋盘(1< n,m<=400),在某个点上有一个马,要求你计算出马到达棋盘上任意一个点最少要走几步 输入输出格式 输入格式: 一行四个数据,棋盘的大小和马的坐标 输 ...

  9. 【linux】 【网络】【转发】服务器版自定义安装无法有线上网问题

  10. Python中的socket网络编程(TCP/IP，UDP)讲解

    在网络编程中的一个基本组件就是套接字(socket).套接字基本上是两个端点的程序之间的"信息通道".程序可能分布在不同的计算机上,通过套接字互相发送信息.套接字包括两个:服务器套 ...