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 相关文章推荐
利用CSS的Sass预处理器(框架)来制作居中效果
Mar 10 HTML / CSS
利用css3制作3D样式按钮实现代码
Mar 18 HTML / CSS
详解CSS3中@media的实际使用
Aug 04 HTML / CSS
CSS3属性 line-clamp控制文本行数的使用
Mar 19 HTML / CSS
一些常用的HTML5模式(pattern) 总结
Jul 14 HTML / CSS
简单介绍HTML5中audio标签的使用
Sep 24 HTML / CSS
实例讲解HTML5的meta标签的一些应用
Dec 08 HTML / CSS
HTML5新增加的功能详解
Sep 05 HTML / CSS
HTML5实现可缩放时钟代码
Aug 28 HTML / CSS
HTML5 Canvas实现放大镜效果示例
Mar 25 HTML / CSS
css3 实现文字闪烁效果的三种方式示例代码
Apr 25 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
全国FM电台频率大全 - 12 安徽省
2020/03/11 无线电
PHP分多步骤填写发布信息的简单方法实例代码
2012/09/23 PHP
PHP通过插入mysql数据来实现多机互锁实例
2014/11/05 PHP
php生成rss类用法实例
2015/04/14 PHP
PHP根据session与cookie用户登录状态操作类的代码
2016/05/13 PHP
详解如何在云服务器上部署Laravel
2017/06/30 PHP
yii2安装详细流程
2018/05/23 PHP
Javascript的闭包
2009/12/31 Javascript
Dojo 学习要点
2010/09/03 Javascript
jQuery EasyUI API 中文文档 - ComboBox组合框
2011/10/07 Javascript
js动态生成指定行数的表格
2013/07/11 Javascript
JavaScript实现的石头剪刀布游戏源码分享
2014/08/22 Javascript
Node.js复制文件的方法示例
2016/12/29 Javascript
js for终止循环 跳出多层循环
2018/10/04 Javascript
如何从头实现一个node.js的koa框架
2019/06/17 Javascript
vuex实现像调用模板方法一样调用Mutations方法
2019/11/06 Javascript
通过实例了解Nodejs模块系统及require机制
2020/07/16 NodeJs
在vue中实现某一些路由页面隐藏导航栏的功能操作
2020/09/21 Javascript
vue组件中节流函数的失效的原因和解决方法
2020/12/02 Vue.js
Windows下anaconda安装第三方包的方法小结(tensorflow、gensim为例)
2018/04/05 Python
Django处理文件上传File Uploads的实例
2018/05/28 Python
详解如何用django实现redirect的几种方法总结
2018/11/22 Python
python 整数越界问题详解
2019/06/27 Python
django中的数据库迁移的实现
2020/03/16 Python
如何在mac下配置python虚拟环境
2020/07/06 Python
销售总监岗位职责
2014/01/04 职场文书
国际贸易专业个人职业生涯规划
2014/02/15 职场文书
工作证明英文模板
2014/10/21 职场文书
大学生考试作弊被抓检讨书
2014/12/27 职场文书
欠款证明
2015/06/24 职场文书
劳动模范获奖感言
2015/07/31 职场文书
手术室消毒隔离制度
2015/08/05 职场文书
选对餐饮营销策略,营业额才会上涨
2019/08/27 职场文书
导游词之香港-太平山顶
2019/10/18 职场文书
Java实战之用Swing实现通讯录管理系统
2021/06/13 Java/Android
php png失真的原因及解决办法
2021/11/17 PHP