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 选择器 基本选择器介绍
Jan 21 HTML / CSS
css3气泡 css3关键帧动画创建的动态通知气泡
Feb 26 HTML / CSS
CSS3实现的闪烁跳跃进度条示例(附源码)
Aug 19 HTML / CSS
基于CSS3实现立方体自转效果
Mar 01 HTML / CSS
10分钟理解CSS3 Grid布局
Dec 20 HTML / CSS
HTML5 实现一个访问本地文件的实例
Dec 13 HTML / CSS
使用html5制作loading图的示例
Apr 14 HTML / CSS
HTML5 Canvas中绘制矩形实例
Jan 01 HTML / CSS
HTML5+CSS3模仿优酷视频截图功能示例
Jan 05 HTML / CSS
利用三角函数在canvas上画虚线的方法
Jan 11 HTML / CSS
微信端html5页面调用分享接口示例
Mar 14 HTML / CSS
css中z-index: 0和z-index: auto的区别
Aug 23 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
Windows中安装Apache2和PHP4权威指南
2006/11/18 PHP
PHP中集成PayPal标准支付的实现方法分享
2012/02/06 PHP
YII使用url组件美化管理的方法
2015/12/28 PHP
Smarty缓存机制实例详解【三种缓存方式】
2019/07/20 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
javascript 写类方式之一
2009/07/05 Javascript
aspx中利用js实现确认删除代码
2010/07/22 Javascript
输入密码检测大写是否锁定js实现代码
2012/12/03 Javascript
js出生日期 年月日级联菜单示例代码
2014/01/10 Javascript
yepnope.js使用详解及示例分享
2014/06/23 Javascript
jQuery DOM删除节点操作指南
2015/03/03 Javascript
Js数组排序函数sort()介绍
2015/06/08 Javascript
学习JavaScript设计模式之观察者模式
2020/04/22 Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
2016/05/04 Javascript
JS实现根据用户输入分钟进行倒计时功能
2016/11/14 Javascript
vue的过滤器filter实例详解
2018/09/17 Javascript
vue.js实现h5机器人聊天(测试版)
2020/07/16 Javascript
VUE : vue-cli中去掉路由中的井号#操作
2020/09/04 Javascript
JavaScript实现单点登录的示例
2020/09/23 Javascript
[03:03]2014DOTA2国际邀请赛 EG战队专访
2014/07/12 DOTA
Python写入数据到MP3文件中的方法
2015/07/10 Python
Django中传递参数到URLconf的视图函数中的方法
2015/07/18 Python
Django实现学生管理系统
2019/02/26 Python
python openpyxl使用方法详解
2019/07/18 Python
python判断正负数方式
2020/06/03 Python
使用keras实现非线性回归(两种加激活函数的方式)
2020/07/05 Python
CSS3模拟IOS滑动开关效果
2016/09/28 HTML / CSS
Clarisonic美国官网:科莱丽声波洁面仪
2017/10/12 全球购物
英国文胸专家:AmpleBosom.com
2018/02/06 全球购物
美国最好的钓鱼、狩猎和划船装备商店:Bass Pro Shops
2018/12/02 全球购物
澳大利亚Mocha官方网站:包、钱包、珠宝和配饰
2019/07/18 全球购物
int *p=NULL和*p= NULL有什么区别
2014/10/23 面试题
给面试官的感谢信
2014/02/01 职场文书
小区环境卫生倡议书
2015/04/29 职场文书
担保公司2015年终工作总结
2015/10/14 职场文书
Python一些基本的图像操作和处理总结
2021/06/23 Python