成都限行

作者: 憨猜猜 | 来源:发表于2019-02-12 17:17 被阅读0次

成都限行
2018-11-05 Day06 js基本应用作业
2018-11-05 Day06 js基础应用
js补充
限行，限行
day8-web前端3
成都疫情第10日
邢台最新限行，河北邢台
限行
限行

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--样式-->
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #top{
                height: 200px;
                /*background-color: red;*/
                border-bottom: 1px solid gray;
                position: relative;
            }
            #box{
                /*定位*/
                position: absolute;
                bottom: 10px;
                /*background-color: red;*/
                /*水平方向居中*/
                width: 100%;
                text-align: center;
            }
            #carNo{
                width: 400px;
                text-align: center;
                /*height: 60px;*/
                font-size: 35px;
                border: 0;
                border-bottom: 1px dotted lightgray;
                vertical-align: bottom;
            }
            #carNo:focus{
                /*删除框颜色*/
                outline: 0;
            }
            button{
                border: 0;
                width: 70px;
                height: 40px;
                background-color: red;
                color: white;
                font-size: 25px;
            }
            /*结果的样式*/
            .reslut{
                text-align: center;
                font-size: 30px;
                color: black;
            }
        </style>
    </head>
    <body>
        <div id="top">
            <div id="box">
                <input type="text" name="" id="carNo" value="" placeholder="请输入车牌号" />
            <button onclick="search()">查询</button>
            <button onclick="clearResult()">清除</button>
            </div>
        </div>
        <div id="bottom"></div>
        
        
        <!--js代码-->
        <script type="text/javascript">
            //查询
            function search(){
//              alert('查询')
                //1.检查输入的车牌号是否合法
                //获取输入框
                carNoNode = document.getElementById('carNo')
                //获取输入框输入的内容
                carNumber = carNoNode.value
                //确定车牌号的正则表达式
                reObj=/[京津沪渝辽吉黑冀鲁豫晋陕甘闽粤桂川云贵苏浙皖湘鄂赣青新宁蒙藏琼][A-Z]\s*[A-Z0-9]{5}$/
                //正则对象.test(字符串) - 判断字符串和正则表达式是否匹配，匹配返回true，否则false
                result = reObj.test(carNumber)
//              alert(result)
                message = '车牌不合法！'
                
                //如果车牌号合法
                if (result) {
                    //获取今天的星期
                    date = new Date()
                    week = date.getDay()
                    //获取最后一个的数字
                    var num = 0
                    for (i=carNumber.length-1;i>=0;i--) {
                        ch = carNumber[i]
                        if(ch>='0' && ch<='9'){
                            num = ch
                            break
                        }
                    }
                    //判断今日是否限行
                if(week == 6 || week == 7){
                    message = '今日不限行'
                }else{
                    if(num == week || num == (week+5 >= 10?0:week+5)){
                        message = '今日限行!'
                    }else{
                        message = '今日不限行'
                    }
                }
            }

                    
                
                //将消息展示在网页上
                messageNode = document.createElement('p')
                messageNode.innerText =carNumber + message
                //设置标签的class值
                messageNode.className = 'reslut'
                resultDivNode = document.getElementById('bottom')
                resultDivNode.appendChild(messageNode)
                
            }
            
            //清除
            function clearResult(){
//              alert('清除')
                resultDivNode = document.getElementById('bottom')
                //清除内容
                resultDivNode.innerHTML=''
            }
            
        </script>
        
    </body>
</html>

image.png