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 border-image使用说明
Jun 23 HTML / CSS
html5+css3气泡组件的实现
Nov 21 HTML / CSS
canvas之万花筒效果的简单实现(推荐)
Aug 16 HTML / CSS
css3给背景图片加颜色遮罩的方法
Nov 05 HTML / CSS
使用HTML5技术开发一个属于自己的超酷颜色选择器
Sep 22 HTML / CSS
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
May 08 HTML / CSS
用HTML5 实现橡皮擦的涂抹效果的教程
May 11 HTML / CSS
HTML5之tabindex属性全面解析
Jul 07 HTML / CSS
HTML5制作表格样式
Nov 15 HTML / CSS
Html5监听手机摇一摇事件的实现
Nov 07 HTML / CSS
AmazeUI 列表的实现示例
Aug 17 HTML / CSS
css3中2D转换之有趣的transform形变效果
Feb 24 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
DOTA2 玩家自创拉野攻略 特色英雄快速成长篇
2020/04/20 DOTA
快速配置PHPMyAdmin方法
2008/06/05 PHP
深入PHP FTP类的详解
2013/06/13 PHP
PHP修改session_id示例代码
2014/01/08 PHP
PHP函数in_array()使用详解
2014/08/20 PHP
PHP利用header跳转失效的解决方法
2014/10/24 PHP
PHP实现在线阅读PDF文件的方法
2015/06/23 PHP
JQuery jsonp 使用示例代码
2009/08/12 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
2013/07/10 Javascript
jquery 单引号和双引号的区别及使用注意
2013/07/31 Javascript
Javascript变量作用域详解
2013/12/06 Javascript
AngularJS语法详解
2015/01/23 Javascript
JavaScript中windows.open()、windows.close()方法详解
2016/07/28 Javascript
Angular2开发——组件规划篇
2017/03/28 Javascript
利用Mongoose让JSON数据直接插入或更新到MongoDB
2017/05/03 Javascript
jQuery实现鼠标响应式淘宝动画效果示例
2018/02/13 jQuery
javascript性能优化之分时函数的介绍
2018/03/28 Javascript
React SSR样式及SEO的实践
2018/10/22 Javascript
node.js实现为PDF添加水印的示例代码
2018/12/05 Javascript
jQuery实现当拉动滚动条到底部加载数据的方法分析
2019/01/24 jQuery
layer关闭当前窗口页面以及确认取消按钮的方法
2019/09/09 Javascript
Python中的类学习笔记
2014/09/23 Python
Python中operator模块的操作符使用示例总结
2016/06/28 Python
flask使用session保存登录状态及拦截未登录请求代码
2018/01/19 Python
Python闭包之返回函数的函数用法示例
2018/01/27 Python
Python + Requests + Unittest接口自动化测试实例分析
2019/12/12 Python
快速解决Django关闭Debug模式无法加载media图片与static静态文件
2020/04/07 Python
jupyter notebook 写代码自动补全的实现
2020/11/02 Python
html5 canvas实现跟随鼠标旋转的箭头
2016/03/11 HTML / CSS
行政管理专业推荐信
2013/11/02 职场文书
企业行政文员岗位职责
2013/12/03 职场文书
收银出纳员岗位职责
2014/02/23 职场文书
党员学习中共十八大思想报告
2014/09/12 职场文书
2015届大学生就业推荐表自我评价
2014/09/27 职场文书
python 对图片进行简单的处理
2021/06/23 Python
【海涛dota解说】一房久违的影魔魂守二连发
2022/04/01 DOTA