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 按钮样式简单可扩展创建
Mar 18 HTML / CSS
css3实现的下拉菜单效果示例
Jan 22 HTML / CSS
CSS3 transform的skew属性值图文详解
Jul 21 HTML / CSS
CSS3中线性颜色渐变的一些实现方法
Jul 14 HTML / CSS
css3 media 响应式布局的简单实例
Aug 03 HTML / CSS
编写html5时调试发现脚本php等网页js、css等失效
Dec 31 HTML / CSS
Html5元素及基本语法详解
Aug 02 HTML / CSS
H5新属性audio音频和video视频的控制详解(推荐)
Dec 09 HTML / CSS
HTML5在线预览PDF的示例代码
Sep 14 HTML / CSS
详解Canvas实用库Fabric.js使用手册
Jan 07 HTML / CSS
video实现有声音自动播放的实现方法
May 20 HTML / CSS
HTML5页面音频自动播放的实现方式
Jun 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
php插入中文到sqlserver 2008里出现乱码的解决办法分享
2012/07/19 PHP
php获取域名的google收录示例
2014/03/24 PHP
基于php编程规范(详解)
2017/08/17 PHP
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
2013/06/04 Javascript
jquery实现微博文字输入框 输入时显示输入字数 效果实现
2013/07/12 Javascript
javascript实现yield的方法
2013/11/06 Javascript
浅谈javascript面向对象程序设计
2015/01/21 Javascript
angular中的http拦截器Interceptors的实现
2017/02/21 Javascript
javascript 中Cookie读、写与删除操作
2017/03/29 Javascript
CSS3+JavaScript实现翻页幻灯片效果
2017/06/28 Javascript
微信小程序使用radio显示单选项功能【附源码下载】
2017/12/11 Javascript
Node.js 使用AngularJS的方法示例
2018/05/11 Javascript
全面解析vue router 基本使用(动态路由,嵌套路由)
2018/09/02 Javascript
js实现省级联动(数据结构优化)
2020/07/17 Javascript
js 函数性能比较方法
2020/08/24 Javascript
[26:40]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第一局
2016/02/25 DOTA
Python中的异常处理学习笔记
2015/01/28 Python
使用PyInstaller将Python程序文件转换为可执行程序文件
2016/07/08 Python
python处理Excel xlrd的简单使用
2017/09/12 Python
scrapy爬虫实例分享
2017/12/28 Python
python查询mysql,返回json的实例
2018/03/26 Python
Python Django 简单分页的实现代码解析
2019/08/21 Python
Python Django view 两种return的实现方式
2020/03/16 Python
python 读取yaml文件的两种方法(在unittest中使用)
2020/12/01 Python
美国单身专业人士在线约会网站:EliteSingles
2019/03/19 全球购物
C语言如何决定使用那种整数类型
2016/11/26 面试题
拔河比赛口号
2014/06/10 职场文书
晚会开幕词
2015/01/28 职场文书
学生会辞职信
2015/03/02 职场文书
2015年行政助理工作总结
2015/04/30 职场文书
2015初一年级组工作总结
2015/07/24 职场文书
战友聚会致辞
2015/07/28 职场文书
2016十一国庆节感言
2015/12/09 职场文书
2016先进工作者事迹材料
2016/02/25 职场文书
导游词之江南周庄
2019/12/06 职场文书
Pytest中skip和skipif的具体使用方法
2021/06/30 Python