车牌限行

    <style type="text/css">
            *{
                margin: 0;
                border: 0;
            }
            #box1{
                border-bottom: 1px solid #808080;
                text-align: center;
                margin-top: 200px;
            }
            #box1 input{
                font-size: 40px;
                outline: none;
                text-align: center;
                border-bottom: 1px dotted #909090;
                margin-bottom: 10px;
                /*设置垂直方向的对齐方式*/
                vertical-align: middle;
            }
            #box1 button{
                width: 80px;
                height: 40px;
                color: white;
                background-color: red;
                font-size: 20px;
            }
            #box2{
                text-align: center;
                font-size: 35px;
            }
            
        </style>
    </head>
    <body>
        <!--=============html============-->
        <div id='box1'>
            <input type="text" name="" id="" value="" placeholder="请输入车牌号"/>
            <button id="btn1">查询</button>
            <button id="btn2">清除</button>
        </div>
        <div id='box2'></div>
        
        <!--=============js============-->
        <script type="text/javascript">
            //1.========获取需要的节点==========
            var carNumNode = document.getElementsByTagName('input')[0];
            var queryBtnNode = document.getElementById('btn1');
            var clearBtnNode = document.getElementById('btn2');
            var resultBoxNode = document.getElementById('box2');
            
            var reObj = /^[京津沪渝辽吉黑冀鲁豫晋陕甘闽粤桂川云贵苏浙皖湘鄂赣青新宁蒙藏琼][A-Z]\s+[A-Z\d]{5}$/;
            
            
            //2.==========是否限行============
            function idTrafficControls(carNumber){
                //a.获取最后一个数字
                var isNumber = false;   //车牌号是包含数字
                for(var x=carNumber.length-1;x>=0;x--){
                    var number1 = carNumber[x];
                    //如果是数字
                    if(number1>='0' && number1 <= '9'){
                        isNumber = true;
                        break;
                    }
                }
                if(!isNumber){
                    return carNumber+'不是有效车牌号';
                }
                //b.判断数字是否限行: 1/6 - 1; 2/7 - 2  3/8 - 3  4/9-4  5/0-5
                //获取当前时间
                var now = new Date();
//              var year = now.getFullYear();  //年
//              var month = now.getMonth();   //月
//              var day = now.getDate();    //天/日/号
                //获取星期几
                var week = now.getDay(); 
                if(week > 5){
                    return carNumber+'今日不限行';
                }
                if(week == number1 || (week+5)%10 == number1 ){
                    return carNumber+'今日限行';
                }else{
                    return carNumber+'今日不限行';
                }
            }
            
            //3.===========查询===============
            queryBtnNode.onclick = function(){
                //a.获取输入框中的内容
                var carNum = carNumNode.value;
                //创建新的节点
                var newNode = document.createElement('p');
                
                //b.判断输入的车牌号是否符合要求:地名+大写字母 5个数字和字母混合
                //正则对象.test(字符串) - 匹配,返回值是布尔
                if(reObj.test(carNum)){
                    //判断车牌号是否限行
                    var message = idTrafficControls(carNum);
                    newNode.innerText = message;
                }else{
                    newNode.innerText = carNum+'不是有效的车牌号';
                }
                
                //c.添加节点
                resultBoxNode.appendChild(newNode);
            }
            
            //================4.清除=================
            clearBtnNode.onclick = function(){
                resultBoxNode.innerHTML = '';
            }
        </script>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容