一、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. pytorch中的view

    https://ptorch.com/news/59.html view()相当于reshape(),其中参数若为-1表示当前的size根据其余size推断

  2. 四. python网络编程

    第八章.网络基础知识 1. TCP/IP协议介绍 1.TCP/IP概念 TCP/IP: Transmission Control Protocol/Internet Protocol的简写,中译名为传 ...

  3. （13）zabbix External checks 外部命令检测

    1.  概述 zabbix server运行脚本或者二进制文件来执行外部检测,外部检测不需要在被监控端运行任何agentd item key语法如下: ARGUMENT DEFINITION scri ...

  4. 【php】 给数组重建索引

    array_values $a = [1,2]; unset($a[1]); $a[] = 3; print_r($a); // 输出 [0=>1,2=>3]

  5. python--MySQL多表查询

    一 介绍 我们在写项目的时候一般都会建一个数据库,数据库里面会存很多的表,不可能把所有的数据都放在一张表里,因为分表来存数据节省空间,数据的组织结构更清晰,解耦和程度更高,但是这些表本质上还不是一个整 ...

  6. 【13】javascript跨域通信

    javascript跨域通信 同源:两个文档同源需满足 协议相同 域名相同 端口相同 跨域通信方法: 01,通过设置img,script,link,iframe元素的src,href属性为目标url. ...

  7. Fiddler-给手机设置代理并抓取https链接

    注:有两部分fiddler设置和手机端设置,且配置完成后,使用时确保PC和手机连接同一WiFi 设置方法如下: 1.上网搜索fiddler官方版下载,并安装完成后,开启fiddler 2.选择Tool ...

  8. selenium之定位以及切换frame

    总有人看不明白,以防万一,先在开头大写加粗说明一下: frameset不用切,frame需层层切! 很多人在用selenium定位页面元素的时候会遇到定位不到的问题,明明元素就在那儿,用firebug ...

  9. php 上传文件名出现乱码

    想必很多朋友在进行utf8编码的php开发上传功能的时候,都会遇到这样的一个问题,就是上传中文文件名的文件时,文件名会变成乱码,其实我们可以用iconv函数对文件名进行重新编码就解决问题了 可能会有不 ...

  10. Centos7 编译安装python3

    step1:preparation $ yum install yum-utils make wget gcc $yum-builddep python step2:download $ wget h ...