当前位置:Web前端 > > 正文

制作共用的头部和底部html5界面(html5移动端价格输入键盘的实现)

时间:2021-10-02 01:01:20类别:Web前端

制作共用的头部和底部html5界面

html5移动端价格输入键盘的实现

简单实现移动端输入价格键盘

HTML:

  • <li class="main">
        <li id="show-price">
    
        </li>
        <li class="keyboard">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>.</li>
            <li>0</li>
            <li>删除</li>
        </li>
    </li>
    
  • CSS:

  • .keyboard {
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 240px;
        display: flex;
        flex-wrap: wrap;
    }
    
    .keyboard li {
        width: 30%;
        height: 50px;
        margin: 5px;
        text-align: center;
        line-height: 50px;
        border-radius: 5px;
        background: #eee;
    }
    
  • JS:

  • <script src="../js/jquery-3.4.1.min.js"></script>
    <script>
        window.onload = function () {
            let key = $('.keyboard li');
            let keyStr = ''
            key.click(function () {
                let str = ''
                let eleStr = $(this).html() == '删除' ? '' : $(this).html(); // 是否删除
                if(keyStr.length <= 0 && eleStr == '0') return; // 首位不能为0
                keyStr = keyStr + eleStr; // 拼接点击的数字
                if(eleStr == '') keyStr = keyStr.substr(0, keyStr.length - 1); // 删除
                for (let i = 0; i < keyStr.length; i++) { // 遍历
                    if (keyStr[i] == '.') { // 判断是否为.
                        if (str.indexOf('.') == -1) str = str + keyStr[i]; // 是.并且其中不存在
                    } else str = str + keyStr[i]; // 不是.就拼接
                }
                showPrice($('#show-price'), str); // 渲染
            })
    
            function showPrice(ele, str) {
                let htmlStr = ''
                for (let i = 0; i < str.length; i++) {
                    htmlStr = htmlStr + `<span>${str[i]}</span>`
                }
                ele.html(htmlStr);
            }
        </script>
    
    
    
  • 制作共用的头部和底部html5界面(html5移动端价格输入键盘的实现)

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。

    上一篇下一篇

    猜您喜欢

    热门推荐