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


Posted in HTML / CSS onSeptember 16, 2019

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

HTML:

<div class="main">
    <div id="show-price">

    </div>
    <div class="keyboard">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>.</div>
        <div>0</div>
        <div>删除</div>
    </div>
</div>

CSS:

.keyboard {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 240px;
    display: flex;
    flex-wrap: wrap;
}

.keyboard div {
    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 div');
        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移动端价格输入键盘的实现

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
详解css3 mask遮罩实现一些特效
Oct 24 HTML / CSS
利用CSS3的特性改变文本选中时的颜色
Sep 11 HTML / CSS
基于CSS3的CSS 多栏(Multi-column)实现瀑布流源码分享
Jun 11 HTML / CSS
CSS3中的opacity属性使用教程
Aug 19 HTML / CSS
CSS3实现时间轴效果
Jul 11 HTML / CSS
详解CSS3浏览器兼容
Dec 14 HTML / CSS
HTML5对手机页面长按会粘贴复制禁用的解决方法
Jul 19 HTML / CSS
用HTML5制作一个简单的弹力球游戏
May 12 HTML / CSS
基于HTML5代码实现折叠菜单附源码下载
Nov 27 HTML / CSS
HTML5本地数据库基础操作详解
Apr 26 HTML / CSS
html5视频媒体标签video的使用方法及完整参数说明详解
Sep 27 HTML / CSS
HTML5拖拽文件上传的示例代码
Mar 04 HTML / CSS
canvas生成带二维码海报的踩坑记录
Sep 11 #HTML / CSS
html5写一个BUI折叠菜单插件的实现方法
Sep 11 #HTML / CSS
html5借用repeating-linear-gradient实现一把刻度尺(ruler)
Sep 09 #HTML / CSS
做一个能自适应高度的textarea的示例代码
Sep 06 #HTML / CSS
3种方式实现瀑布流布局小结
Sep 05 #HTML / CSS
Html5 页面适配iPhoneX(就是那么简单)
Sep 05 #HTML / CSS
html5 外链式实现加减乘除的代码
Sep 04 #HTML / CSS
You might like
php使用Jpgraph绘制饼状图的方法
2015/06/10 PHP
php提交post数组参数实例分析
2015/12/17 PHP
WordPress的主题编写中获取头部模板和底部模板
2015/12/28 PHP
php实现的debug log日志操作类实例
2016/07/12 PHP
PHP将URL转换成短网址的算法分享
2016/09/13 PHP
jquery attr 设定src中含有&amp;(宏)符号问题的解决方法
2011/07/26 Javascript
(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享
2013/01/24 Javascript
从数据结构分析看:用for each...in 比 for...in 要快些
2013/04/17 Javascript
JQuery结合CSS操作打印样式的方法
2013/12/24 Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
2014/02/07 Javascript
javascript中AJAX用法实例分析
2015/01/30 Javascript
JS通过ajax动态读取xml文件内容的方法
2015/03/24 Javascript
Bootstrap中的Panel和Table全面解析
2016/06/13 Javascript
响应式表格之固定表头的简单实现
2016/08/26 Javascript
Bootstrap免费字体和图标网站(值得收藏)
2017/03/16 Javascript
nodejs结合Socket.IO实现的即时通讯功能详解
2018/01/12 NodeJs
使用vue-cli编写vue插件的方法
2018/02/26 Javascript
vue实现将一个数组内的相同数据进行合并
2019/11/07 Javascript
JavaScript JSON使用原理及注意事项
2020/07/30 Javascript
解决antd 下拉框 input [defaultValue] 的值的问题
2020/10/31 Javascript
vue router-link 默认a标签去除下划线的实现
2020/11/06 Javascript
Python字符串、元组、列表、字典互相转换的方法
2016/01/23 Python
python利用socketserver实现并发套接字功能
2018/01/26 Python
Python学生信息管理系统修改版
2018/03/13 Python
Python中py文件引用另一个py文件变量的方法
2018/04/29 Python
python单向循环链表原理与实现方法示例
2019/12/03 Python
Django DRF认证组件流程实现原理详解
2020/08/17 Python
PyCharm2020.3.2安装超详细教程
2021/02/08 Python
技术经理的自我评价范文
2013/12/03 职场文书
男方父母婚礼答谢词
2014/01/25 职场文书
个人租房协议书范本
2014/09/30 职场文书
四风问题自查自纠工作情况报告
2014/10/28 职场文书
交警失职检讨书
2015/01/26 职场文书
获奖感言范文
2015/07/31 职场文书
Oracle 触发器trigger使用案例
2022/02/24 Oracle
PostgreSQL怎么创建分区表详解
2022/06/25 PostgreSQL