day22作业

车牌限行

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>成都机动车查询限号</title>
        <style type="text/css">
            #search{
                width: 640px;
                margin: 0 auto;
                text-align: center;
                margin-top: 150px;
            }
            #carno{
                display: inline-block;
                width: 320px;
                height: 36px;
                font: 36px/36px arial;
                text-align: center;
                vertical-align: middle;
                border: none;
                outline: none;
                border-bottom: 1px dotted darkgray;
            }
            #search input[type = button]{
                width: 80px;
                height: 36px;
                font: 28px/36px arial;
                border: none;
                color: white;
                background-color: palevioletred;
                vertical-align: middle;
            }
            #result{
                width: 640px;
                margin: 0 auto;
                text-align: center;    /* 字体居中 */
                font: 32px/36px arial;
            }
            #empty input{
                width: 80px;
                height: 36px;
                font: 28px/36px arial;
                border: none;
                color: white;
                background-color: palevioletred;
                
            }
        </style>
    </head>
    <body>
        <div id="search">
            <input type="text" id="carno" placeholder="请输入车牌号">
            <input type="button" value="查询" onclick="showResult()">
            <input type="button" value="清空" onclick="empty()">
        </div>
        <hr>
        <p id="result"></p>
        <script>
            function showResult() {
                var input = document.getElementById('carno');
                var p = document.getElementById('result');
                var carNo = input.value;
                var regex = /^[川渝云浙贵京津沪][A-Z]\s*[0-9A-Z]{5}$/;
                if (regex.test(carNo)) {
                    var digitStr = lastDigit(carNo);
                    if (digitStr) {
                        var digit = parseInt(digitStr);
                        var day = new Date().getDay();
                        if (digit % 5 == day || digit % 5 == day - 5) {
                            p.innerHTML = carNo +'今日限行<br>'  + p.innerHTML;
                        } else{
                            p.innerHTML = carNo +'今日不限行<br>' + p.innerHTML;
                        }
                    } else{
                        p.innerHTML = carNo + '不是有效车牌号<br>' + p.innerHTML;
                    }
                }else{
                    p.innerHTML = carNo + '不是有效的车牌好<br>' + p.innerHTML;
                }
                input.value = '';
            }
            function lastDigit(str) {
                for (var index = str.length - 1; index >= 0; index -= 1) {
                    var digitStr = str[index];
                    if (digitStr >= '0' && digitStr <= '9') {
                        return digitStr;
                    }
                }
                return null;
            }
            function empty() {
                document.getElementById('result').textContent='';
            }
            
        </script>
    </body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容