响应式的车牌登记页面

最新推荐文章于 2021-12-03 14:39:43 发布

原创最新推荐文章于 2021-12-03 14:39:43 发布 · 952 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#响应式 #移动设备 #前端

最近闲来无事，突然想写一篇博文，但是又不知道该写些什么好，只好献上丑陋的代码一篇。

随着移动设备的兴起，很多的网页开始进入响应式布局的潮流中，好像现在的页面，你不说是响应式的，都不好意思跟别人提及。响应式布局的佼佼者bootstrap为我们这些前端的码农们提供了很大的便利，确实bootstrap也很优秀，但是一旦大多数的人使用，我便觉得索然无味。不多说，直接进入主题。

接下来是一页完整的关于车牌录入的代码，有人说直接用input框不就行了吗？如果真是这样，那我们这些前端码农们也太low了点儿了。

    <script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
    <!-- <script type="text/javascript" src="js/jquery.mobile-1.0.min.js"></script> -->
	<link rel="stylesheet" href="./frozenui/css/frozen.css">
    <link rel="stylesheet" href="css/style.css"/>

该进来的包还是得进来的，jQuery、frozen一样也不能少，接下来是HTML代码

<div id="mask"></div>
<div data-role="page" id="home">
    <div data-role="content">
        <div data-role="fieldcontain" class="new-form-ui">
            <br/>

            <div align="center" id="memo"></div>
            <!-- <div class="ui-form-item">
            	<input id="cars" placeholder="请输入车牌号" value="" readonly type="text" onclick="$showKeyboard()"/>
            </div>  -->
        </div>

        <section class="ui-input-wrap ui-border-t" style="margin-top:64px;margin-bottom:64px">
    		<div class="ui-input ui-border-radius">
        		<input id="cars" type="text" name="" value="" placeholder="请输入车牌号" onclick="$showKeyboard()" readonly>
    		</div>
		</section>
        
        <div class="ui-btn-wrap">
    		<button class="ui-btn-lg ui-btn-primary" onclick="register()">
        		登记
    		</button>
		</div>
        
    </div>
</div>
<!-- S 自定义键盘 -->
<div class="keyboard" id="keyboard-0">
    <div class="layer-box" onclick="hiddenKeyboard()"></div>
    <div class="keyboard-box">
        <!-- 车牌 -->
        <div class="keyboard-header">
            <div class="car-num" id="car-num-0">
                <a href="javascript:;" class="key-active">川</a>
                <a href="javascript:;">A</a>
                <a href="javascript:;">0</a>
                <a href="javascript:;">0</a>
                <a href="javascript:;">0</a>
                <a href="javascript:;">0</a>
                <a href="javascript:;">0</a>
            </div>
            <div class="btns-group" style="float:right">
                <!-- <a href="javascript:;" class="cancel" onclick="hiddenKeyboard()">取消</a> -->
                <div class="cancel"></div>
                <a href="javascript:;" class="ok" onclick="setCarNum()">确定</a>
            </div>
        </div>

        <!-- 键盘 -->
        <div class="keyboard-body">
            <!-- 省、直辖市 -->
            <div class="keyboard-content province">
                <a href="javascript:;">京</a>
                <a href="javascript:;">津</a>
                <a href="javascript:;">冀</a>
                <a href="javascript:;">鲁</a>
                <a href="javascript:;">蒙</a>
                <a href="javascript:;">辽</a>
                <a href="javascript:;">吉</a>
                <a href="javascript:;">黑</a>

                <a href="javascript:;">沪</a>
                <a href="javascript:;">苏</a>
                <a href="javascript:;">浙</a>
                <a href="javascript:;">皖</a>
                <a href="javascript:;">闽</a>
                <a href="javascript:;">赣</a>
                <a href="javascript:;">豫</a>
                <a href="javascript:;">鄂</a>
                <a href="javascript:;">湘</a>

                <a href="javascript:;">粤</a>
                <a href="javascript:;">桂</a>
                <a href="javascript:;">渝</a>
                <a href="javascript:;">川</a>
                <a href="javascript:;">贵</a>
                <a href="javascript:;">云</a>
                <a href="javascript:;">藏</a>
                <a href="javascript:;">陕</a>
                <a href="javascript:;">甘</a>

                <a href="javascript:;">宁</a>
                <a href="javascript:;">晋</a>
                <a href="javascript:;">青</a>
                <a href="javascript:;">琼</a>
                <a href="javascript:;">新</a>
                <a href="javascript:;">港</a>
                <a href="javascript:;">澳</a>
                <a href="javascript:;">台</a>
            </div>

            <!-- 字母 -->
            <div class="keyboard-content letter letters" style="display: none;">
                <a href="javascript:;">Q</a>
                <a href="javascript:;">W</a>
                <a href="javascript:;">E</a>
                <a href="javascript:;">E</a>
                <a href="javascript:;">R</a>
                <a href="javascript:;">T</a>
                <a href="javascript:;">Y</a>
                <a href="javascript:;">U</a>
                <a href="javascript:;">I</a>
                <a href="javascript:;">O</a>
                <a href="javascript:;">P</a>

                <a href="javascript:;">A</a>
                <a href="javascript:;">S</a>
                <a href="javascript:;">D</a>
                <a href="javascript:;">F</a>
                <a href="javascript:;">G</a>
                <a href="javascript:;">H</a>
                <a href="javascript:;">J</a>
                <a href="javascript:;">K</a>
                <a href="javascript:;">L</a>

                <a href="javascript:;">Z</a>
                <a href="javascript:;">X</a>
                <a href="javascript:;">C</a>
                <a href="javascript:;">V</a>
                <a href="javascript:;">B</a>
                <a href="javascript:;">N</a>
                <a href="javascript:;">M</a>
            </div>

            <!-- 字母、数字 -->
            <div class="keyboard-content letter number" style="display: none;">
                <a href="javascript:;">0</a>
                <a href="javascript:;">1</a>
                <a href="javascript:;">2</a>
                <a href="javascript:;">3</a>
                <a href="javascript:;">4</a>
                <a href="javascript:;">5</a>
                <a href="javascript:;">6</a>
                <a href="javascript:;">7</a>
                <a href="javascript:;">8</a>
                <a href="javascript:;">9</a>

                <a href="javascript:;">Q</a>
                <a href="javascript:;">W</a>
                <a href="javascript:;">E</a>
                <a href="javascript:;">E</a>
                <a href="javascript:;">R</a>
                <a href="javascript:;">T</a>
                <a href="javascript:;">Y</a>
                <a href="javascript:;">U</a>
                <a href="javascript:;">I</a>
                <a href="javascript:;">O</a>
                <a href="javascript:;">P</a>

                <a href="javascript:;">A</a>
                <a href="javascript:;">S</a>
                <a href="javascript:;">D</a>
                <a href="javascript:;">F</a>
                <a href="javascript:;">G</a>
                <a href="javascript:;">H</a>
                <a href="javascript:;">J</a>
                <a href="javascript:;">K</a>
                <a href="javascript:;">L</a>

                <a href="javascript:;">Z</a>
                <a href="javascript:;">X</a>
                <a href="javascript:;">C</a>
                <a href="javascript:;">V</a>
                <a href="javascript:;">B</a>                <a href="javascript:;">N</a>

	重点在于车牌的位数比较多，有几个特别注意的地方是，车牌中不能含有字母I和字母O，至于为什么，这个也很好理解，I和数字1太像，0和数字0太像，至于还有一些

领事馆的车牌的话，恐怕是有心无力了。怎么样把用户点击的字符放到我们需要的地方去呢？这就要依靠我们强大的JavaScript了。

<script type="text/javascript">
    //		var getval = thisURL.split('?')[1];
    var user_id = getUrlParam("userId");

    var weixinCode = getUrlParam('code');
    var carRegisterBoolean = false;
    //根据openid获得  可以登记车辆的个数。
    function register() {
        var msg = "您确认要登记该车牌吗！";
        if (confirm(msg) == true) {

            var cars = document.getElementById("cars").value; // 車牌號
            if (cars.length == 0 || cars == "") {
                alert("车牌号不能为空")
            } else {
                console.log(cars, user_id + 111111111111)
                $.ajax({
                    url: '/yunpasswx/api/cars/bindCar',
                    data: JSON.stringify({
                        plate_number: cars,
                        user_id: user_id
                    }),
                    type: 'POST',
                    dataType: "json",
                    success: function (t) {
                        console.log(t)
                        if (t.code == 1) {
                            //登记成功
                            alert("登记成功");
                            window.location.href = "cars_list.html?userId=" + user_id;
                        } else {
                            alert("登记失败");
                        }
                    }
                });
            }
        } else {
            return false;
        }
    }
    ;


    jQuery(function () {
        if (weixinCode) {
            getOpenid(weixinCode, 2);
        } else {
            openID = getUrlParam('openID');
        }

//			queryCarRegisterNum();

        var carid = jQuery('#cars'), // 车牌值
                car_num_0 = jQuery('#car-num-0'), // 车牌号组成按钮
                province = jQuery('#keyboard-0 .keyboard-content.province'), // 省、直辖市
                letter = jQuery('#keyboard-0 .keyboard-content.letter.letters'), // 省、直辖市
                _number = jQuery('#keyboard-0 .keyboard-content.letter.number'); // 省、直辖市

        // 选择省、直辖市
        car_num_0.children('a').eq(0).click(function () {
            car_num_0.children('a').removeClass('key-active').eq(0).addClass('key-active');
            jQuery('#keyboard-0 .keyboard-content').hide().eq(0).show();
        });
        province.children('a').click(function () {
            var that = jQuery(this);
            car_num_0.children('a').eq(0).html(that.text()).removeClass('key-active').next().addClass('key-active');
            jQuery('#keyboard-0 .keyboard-content').hide().eq(1).show();
        });

        // 选择区域字母
        car_num_0.children('a').eq(1).click(function () {
            car_num_0.children('a').removeClass('key-active').eq(1).addClass('key-active');
            jQuery('#keyboard-0 .keyboard-content').hide().eq(1).show();
        });
        letter.children('a').click(function () {
            var that = jQuery(this);
            car_num_0.children('a').eq(1).html(that.text()).removeClass('key-active').next().addClass('key-active');
            jQuery('#keyboard-0 .keyboard-content').hide().eq(2).show();
        });

        // 选择字母数字
        jQuery.each(car_num_0.children('a'), function (i, item) {
            if (i > 1) {
                var that = jQuery(item);
                that.click(function () {
                    car_num_0.children('a').removeClass('key-active');
                    that.addClass('key-active');
                    jQuery('#keyboard-0 .keyboard-content').hide().eq(2).show();
                });
            }
        });
        _number.children('a').click(function () {
            var that = jQuery(this);
            car_num_0.children('a.key-active').html(that.text()).removeClass('key-active').next().addClass('key-active');
            jQuery('#keyboard-0 .keyboard-content').hide().eq(2).show();
        });
    });
    // 显示键盘
    function $showKeyboard() {
        var carNum = jQuery('#cars').val();
        // 初始化键盘车牌值
        if (carNum) {
            var arrs = carNum.split('');
            jQuery.each(jQuery('#car-num-0').children('a'), function (i, item) {
                jQuery(this).text(arrs[i]);
            });
        }
        jQuery('#keyboard-0').show();
        jQuery('#car-num-0').children('a').removeClass('key-active').eq(0).addClass('key-active');
        jQuery('#mask').addClass('mask opacity');
        jQuery('#keyboard-0 .keyboard-content').hide().eq(0).show();
    }
    // 设置车牌号
    function setCarNum() {
        var carNum = '';
        jQuery.each(jQuery('#car-num-0').children('a'), function (i, item) {
            carNum += jQuery(this).text().trim();

        });
        jQuery('#cars').val(carNum);
        jQuery('#keyboard-0').hide();
        jQuery('#mask').removeClass('mask opacity');
    }

    //隐藏键盘
    function hiddenKeyboard() {
        jQuery('#keyboard-0').hide();
        jQuery('#mask').removeClass('mask opacity');
    }
</script>


	好了，大功告成，一个响应式的车牌号录入页面就基本完成了，如果各位看官觉得还不错的话，可以拿回去试试。