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的新特性介绍
Oct 31 HTML / CSS
纯CSS实现的大小渐变、渐远效果
Apr 15 HTML / CSS
一款利用纯css3实现的超炫3D表单的实例教程
Dec 01 HTML / CSS
一款利用纯css3实现的win8加载动画的实例分析
Dec 11 HTML / CSS
结合CSS3的布局新特征谈谈常见布局方法
Jan 22 HTML / CSS
CSS3田字格列表的样式编写方法
Nov 22 HTML / CSS
css和css3弹性盒模型实现元素宽度(高度)自适应
May 15 HTML / CSS
html5 跨文档消息传输示例探讨
Apr 01 HTML / CSS
HTML5实现一个能够移动的小坦克示例代码
Sep 02 HTML / CSS
浅谈amaze-ui中datepicker和datetimepicker注意的几点
Aug 21 HTML / CSS
仅仅使用 HTML/CSS 实现各类进度条的方式汇总
Nov 11 HTML / CSS
box-shadow单边阴影的实现
May 21 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
如何将一个表单同时提交到两个地方处理
2006/10/09 PHP
由php的call_user_func传reference引发的思考
2010/07/23 PHP
php处理json时中文问题的解决方法
2011/04/12 PHP
php设计模式 Command(命令模式)
2011/06/26 PHP
10条PHP高级技巧[修正版]
2011/08/02 PHP
PHP单例模式详解及实例代码
2016/12/21 PHP
微信公众平台开发-微信服务器IP接口实例(含源码)
2017/03/05 PHP
js 页面输出值
2008/11/30 Javascript
基于jquery的无缝循环新闻列表插件
2011/03/07 Javascript
ComboBox 和 DateField 在IE下消失的解决方法
2013/08/30 Javascript
js中settimeout方法加参数
2014/02/28 Javascript
javascript中clone对象详解
2014/12/03 Javascript
原生javascript实现简单的datagrid数据表格
2015/01/02 Javascript
JavaScript中常用的六种互动方法示例
2015/03/13 Javascript
JS中生成随机数的用法及相关函数
2016/01/09 Javascript
JavaScript中apply方法的应用技巧小结
2016/09/29 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
2017/08/03 Javascript
JavaScript模拟文件拖选框样式v1.0的实例
2017/08/04 Javascript
js移动端事件基础及常用事件库详解
2017/08/15 Javascript
nodejs实现的连接MySQL数据库功能示例
2018/01/25 NodeJs
微信小程序实现蒙版弹出窗功能
2019/09/17 Javascript
vue+axios实现post文件下载
2019/09/25 Javascript
vue不操作dom实现图片轮播的示例代码
2019/12/18 Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
2020/11/05 Javascript
在Python中使用dict和set方法的教程
2015/04/27 Python
python计算圆周率pi的方法
2015/07/11 Python
Python爬虫beautifulsoup4常用的解析方法总结
2019/02/25 Python
SCDKey德国:全球领先的数字游戏市场
2019/04/09 全球购物
Etam艾格英国官网:法国著名女装品牌
2019/04/15 全球购物
印度第一网上礼品店:IGP.com
2020/02/06 全球购物
英国钻石公司:British Diamond Company
2020/02/16 全球购物
C#公司笔试题
2014/03/28 面试题
社区健康教育工作方案
2014/06/03 职场文书
租赁协议书
2015/01/27 职场文书
四年级语文教学反思
2016/03/03 职场文书
MySQL深分页问题解决思路
2022/12/24 MySQL