一、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. struct结构体内存大小

    一. 基本原则 1. struct中成员变量的声明顺序,与成员变量对应的内存顺序是一致的: 2. struct本身的起始存储地址必须是成员变量中最长的数据类型的整倍数,注意是最长的数据类型,而不是最长 ...

  2. python Object-Oriented Programming

    Python 类的成员.成员修饰符.类的特殊成员. Python 类的成员 类的成员可以分为三大类: 字段.方法和属性. #注:所有成员中,只有普通字段的内容保存对象中,即: #根据此类创建了多少对象 ...

  3. 搭建SSI开发框架原理

    Spring2.5.Struts2.Ibatis开发框架搭建(一) ssi, ibatis 一.框架下载 1.1   Struts2框架 Struts2框架发展于WebWork,现在捐献给了Apach ...

  4. shell脚本，一个字符一个字符输出。

    [root@localhost wyb]# cat file abc def abc 789de f567 [root@localhost wyb]# cat fffile.sh #!/bin/bas ...

  5. 移动产品设计之ios系统的导航

    做道题:[不定项选择题] OS中导航设计模式有几种? A.平铺导航 B.标签导航 C.树形导航 D.模态视图导航 正确答案:A B C 讲解: 导航始终是产品设计的重头戏,往往产品设计中90%的事情就 ...

  6. 关于PHP版本比较函数version_compare的问题

    $version1="v4.0"; $version2="v4.0.0"; print_r(version_compare($version1,$version ...

  7. centos下nginx安装和配置

    注:此文是根据前辈的博客和自己实际动手总结出来的,不喜勿喷 1.准备工作 Nginx的安装依赖于以下三个包,意思就是在安装Nginx之前首先必须安装一下的三个包,注意安装顺序如下: 1 SSL功能需要 ...

  8. sweetalert使用随笔

    删除前确认框: //找到删除那天记录的按钮,触发点击事件 $(".del").on('click', function () { swal({ title: "操作确认& ...

  9. 与LCD_BPP相关的函数

    board/freescale/mx6q_sabresd/mx6q_sabresd.c:    panel_info.vl_bpix = LCD_BPP; common/lcd.c:   off  = ...

  10. mysql远程访问另一台主机数据库表，实现小表广播功能

    1.打开navicat,打开任意一个连接,新建一个查询,输入命令 show engines,出现如下界面 2. 如果FEDERATED对应的Support值为NO,则找到C:\ProgramData\ ...