<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style></style>
</head>
<body>
<script>
function miniNumberKeyboard (callback) {
var div = document.createElement('div');
div.id = 'div'
document.body.appendChild(div);
div.style.backgroundColor = '#3d414d';
div.style.width = '500px';
div.style.height = '340px';
div.style.borderRadius = '15px';
div.style.position = 'relative';
var inputBox = document.createElement('div');
inputBox.style.backgroundColor = '#353945';
document.body.appendChild(inputBox);
inputBox.id = 'inputBox';
inputBox.innerHTML = '';
inputBox.style.position = 'absolute';
inputBox.style.top = '35px';
inputBox.style.left = '55px';
inputBox.style.width = '392px';
inputBox.style.height = '45px';
inputBox.style.lineHeight = '45px';
inputBox.style.fontSize = '20px';
inputBox.style.color = '#f7fcff';
inputBox.style.paddingLeft = '8px'; //删除 确认 取消
var cancel = document.createElement('div');
cancel.id = 'cancel';
cancel.innerHTML = '取消';
document.body.appendChild(cancel);
cancel.style.color = '#f7fcff';
cancel.style.position = 'absolute';
cancel.style.top = '95px';
cancel.style.left = '110px';
cancel.style.backgroundColor = '#454955';
cancel.style.width = '40px';
cancel.style.height = '35px';
cancel.style.lineHeight = '35px';
cancel.style.textAlign = 'center';
var del = document.createElement('div');
del.innerHTML = '删除';
del.id = 'del';
document.body.appendChild(del);
del.style.color = '#f7fcff';
del.style.position = 'absolute';
del.style.top = '95px';
del.style.left = '57px';
del.style.backgroundColor = '#454955';
del.style.width = '40px';
del.style.height = '35px';
del.style.lineHeight = '35px';
del.style.textAlign = 'center';
var trueBtn = document.createElement('div');
document.body.appendChild(trueBtn);
trueBtn.id = 'trueBtn';
trueBtn.innerHTML = '确认';
trueBtn.style.color = '#f7fcff';
trueBtn.style.position = 'absolute';
trueBtn.style.top = '95px';
trueBtn.style.left = '384px';
trueBtn.style.width = '70px';
trueBtn.style.height = '35px';
trueBtn.style.backgroundColor = '#454955';
trueBtn.style.lineHeight = '35px';
trueBtn.style.textAlign = 'center'; var number = document.createElement('div');
number.style.width = '425px';
number.style.height = '190px';
number.style.position = 'absolute';
number.style.top = '143px';
number.style.left = '58px';
// number.style.backgroundColor = '#fff';
number.id = 'number';
document.body.appendChild(number);
var Box = document.getElementById('number');
for (var i = 0; i < 10; i++) {
var numberBox = document.createElement('div');
numberBox.innerHTML = i;
numberBox.id = i;
numberBox.className = 'numberkey color';
numberBox.style.width = '80px';
numberBox.style.height = '45px';
numberBox.style.backgroundColor = '#454955';
numberBox.style.cssFloat = 'left';
numberBox.style.marginRight = '25px';
numberBox.style.marginTop = '15px';
numberBox.style.lineHeight = '40px';
numberBox.style.textAlign = 'center';
numberBox.style.fontSize = '25px';
numberBox.style.color = '#f7fcff';
Box.appendChild(numberBox);
document.getElementById('0').onclick = function cc() {
if (document.getElementById('inputBox').innerHTML == '0') {
document.getElementById('0').onclick = null;
document.getElementById('0').onclick = cc;
} else if (document.getElementById('inputBox').innerHTML.substr(0,1) == '.') {
var zeroArray = inputBox.innerHTML.split('');
var value = zeroArray.shift();
var newSrt = document.getElementById('0').innerHTML + zeroArray.join('');
document.getElementById('inputBox').innerHTML = newSrt;
} else {
document.getElementById('inputBox').innerHTML = document.getElementById('inputBox').innerHTML + numberBox[0].innerHTML;
}
}
}; //正负号
var minus = document.createElement('div');
minus.className = 'color';
minus.id = 'minus';
minus.style.width = '80px';
minus.style.height = '45px';
minus.innerHTML = '-/+';
minus.style.backgroundColor = '#454955';
minus.style.marginTop = '135px';
minus.style.marginLeft = '210px';
minus.style.fontSize = '35px';
minus.style.lineHeight = '45px';
minus.style.textAlign = 'center';
minus.style.color = '#f7fcff';
minus.style.fontSize = '22px';
Box.appendChild(minus);
document.getElementById('minus').onclick = function aa() {
if ( document.getElementById('inputBox').innerHTML == '0') {
document.getElementById('minus').onclick = null;
document.getElementById('minus').onclick = aa;
} else if (document.getElementById('inputBox').innerHTML.indexOf('-') != -1) {
document.getElementById('inputBox').innerHTML = document.getElementById('inputBox').innerHTML.split('').join('').replace('-','');
} else {
var showArr = document.getElementById('inputBox').innerHTML.split('')
showArr.unshift('-');
var newString = showArr.join('');
document.getElementById('inputBox').innerHTML = newString;
}
} //小数点
var point = document.createElement('div');
point.className = 'color';
point.id = 'point';
point.style.width = '80px';
point.style.height = '45px';
point.innerHTML = '.';
point.style.backgroundColor = '#454955';
point.style.marginTop = '-45px';
point.style.marginLeft = '315px';
point.style.fontSize = '35px';
point.style.lineHeight = '25px';
point.style.textAlign = 'center';
point.style.color = '#f7fcff';
Box.appendChild(point);
document.getElementById('point').onclick = function bb () {
if(document.getElementById('inputBox').innerHTML.indexOf('.') != -1) {
document.getElementById('point').onclick = null;
document.getElementById('point').onclick = bb;
} else {
var newInnerHTML = document.getElementById('inputBox').innerHTML.split('');
newInnerHTML.push(point.innerHTML)
var pushNew = newInnerHTML.join('');
document.getElementById('inputBox').innerHTML = pushNew;
}
}
//input框展示内容
var numberBox = document.querySelectorAll('.numberkey');
for (let i = 1; i < numberBox.length; i++) {
numberBox[i].onclick = function () {
var inputInHTML = document.getElementById('inputBox').innerHTML;
var newHTML = inputInHTML + numberBox[i].innerHTML;
inputBox.innerHTML = newHTML;
if (newHTML.substr(0,1) == '0' && newHTML.indexOf('.') == -1 || newHTML.substr(0,1) == '.') {
var array = inputBox.innerHTML.split('');
var value = array.shift();
var newSrt = array.join('')
document.getElementById('inputBox').innerHTML = newSrt;
}
}
}
//取消按钮的功能
document.getElementById('cancel').onclick = function () {
document.body.removeChild(document.getElementById('div'));
document.body.removeChild(document.getElementById('inputBox'));
document.body.removeChild(document.getElementById('del'));
document.body.removeChild(document.getElementById('trueBtn'));
document.body.removeChild(document.getElementById('number'));
document.body.removeChild(document.getElementById('cancel'));
} //取消按钮的移入移出
var cancelBtn = document.getElementById('cancel');
cancelBtn.onmouseover = function over () {
cancelBtn.style.backgroundColor = '#e75e61';
}
cancelBtn.onmouseout = function out() {
cancelBtn.style.backgroundColor = '#454955';
} //删除按钮
document.getElementById('del').onclick = function () {
var length = document.getElementById('inputBox').innerHTML.length;
inputBox.innerHTML = inputBox.innerHTML.substr(0, length - 1);
} //删除按钮移入移出
var delBtn = document.getElementById('del');
delBtn.onmouseover = function over () {
delBtn.style.backgroundColor = '#e75e61';
}
delBtn.onmouseout = function out () {
delBtn.style.backgroundColor = '#454955';
} //确定按钮
document.getElementById('trueBtn').onclick = function () {
callback(document.getElementById('inputBox').innerHTML);
document.body.removeChild(document.getElementById('div'));
document.body.removeChild(document.getElementById('inputBox'));
document.body.removeChild(document.getElementById('del'));
document.body.removeChild(document.getElementById('trueBtn'));
document.body.removeChild(document.getElementById('number'));
document.body.removeChild(document.getElementById('cancel'));
} //确认按钮移入移出
var trueBtn = document.getElementById('trueBtn');
trueBtn.onmouseover = function over () {
trueBtn.style.backgroundColor = '#39bdb5';
}
trueBtn.onmouseout = function out () {
trueBtn.style.backgroundColor = '#454955';
}
 
//按钮移入样式
var mouseColor = document.querySelectorAll('.color');
for (let i = 0; i < mouseColor.length; i++) {
mouseColor[i].onmouseover = function () {
mouseColor[i].style.backgroundColor = '#fec107';
};
mouseColor[i].onmouseout = function () {
mouseColor[i].style.backgroundColor = '#454955';
}
}
}; miniNumberKeyboard(callback); function callback (LastNumber) {
console.log(LastNumber);
} </script>
</body>
</html>

  

JS自定义随机数字键盘的更多相关文章

  1. JS自定义随机键盘

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. iOS数字键盘自定义按键

    UIKeyboardTypeNumberPad 数字键盘自定义按键 最近做一个搜索用户的功能,这里使用了UISearchBar.由于搜索的方式只有手机号码,所以这里的键盘要限制为数字输入,可以这么做: ...

  3. JS数字键盘

    JS数字键盘,JS小键盘 CSS代码: #numberkeyboard { border: 1px solid #b3b3b3; background: #f2f3f7; height: 285px; ...

  4. ios自定义数字键盘

    因为项目又一个提现的功能,textfiled文本框输入需要弹出数字键盘,首先想到的就是设置textfiled的keyboardType为numberPad,此时你会看到如下的效果:   但是很遗憾这样 ...

  5. 使用js Math.random()函数生成n到m间的随机数字

    何使用js生成n到m间的随机数字,主要目的是为后期的js生成验证码做准备,Math.random()函数返回0和1之间的伪随机数   摘要: 本文讲解如何使用js生成n到m间的随机数字,主要目的是为后 ...

  6. js Date 函数方法 和 移动端数字键盘调用

    var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); //获取完整的年份(4位,1970-???? ...

  7. js输入密文弹出数字键盘

    我们经常被产品要求,在移动端的web页面上的输入框输入密码时要弹出数字键盘,而不是全键盘,这个该怎么实现呢? 1.首先要弹出数字键盘,我们只能把input框的type从password改为tel 2. ...

  8. h5仿微信、支付宝数字键盘|微信支付键盘|支付宝付款键盘

    html5仿微信支付数字键盘|仿支付宝键盘|h5仿微信密码输入键盘|自定义数字键盘 很早之前由于项目需求,就有开发过一个h5仿微信支付键盘,这几天就把之前的数字键盘模块独立出来,重新整理开发成demo ...

  9. 一个数字键盘引发的血案——移动端H5输入框、光标、数字键盘全假套件实现

    https://juejin.im/post/5a44c5eef265da432d2868f6 为啥要写假键盘? 还是输入框.光标全假的假键盘? 手机自带的不用非得写个假的,吃饱没事干吧? 装逼?炫技 ...

随机推荐

  1. MongoDB 基本命令备忘

    使用admin数据库: use admin 显示数据库: show dbs 创建用户,并制定该用户的角色: db.createUser({user: "root",pwd:&quo ...

  2. 阶段1 语言基础+高级_1-3-Java语言高级_06-File类与IO流_10 打印流_1_打印流_概述和使用

    system.out就是打印流 System的源码里面out参数就是一个PrintStream类型的 例如路径写的是E盘,.没有e盘这个路径就会抛出异常 用println直接写入的就是97    这个 ...

  3. 阶段1 语言基础+高级_1-3-Java语言高级_1-常用API_1_第5节 String类_3_字符串的常量池

    字符换是可以共享使用的,那么怎么去共享使用呢 三种方式去创建字符串.然后三种分别进行比较 3的地址和1.2的地址不一样 在堆里面有一块空间叫做字符串常量池,从jdk1.7开始.字符串常量池在堆中 字符 ...

  4. 只有一个form 的程序, onactivate 只触发一次。

    https://blog.csdn.net/saint13/article/details/454615 Form的onActivate事件 2005年08月15日 01:08:00 阅读数:3406 ...

  5. 腾讯视频的手机端的地址和PC端的地址是不一样的

    腾讯视频的手机端的地址和PC端的地址是不一样的,所以使用iframe的时候记得要使用手机端的地址

  6. pytony格式化输出-占位符

    1. %s s = string 字符串 2. %d d = digit 整数 3. %f f = float 浮点数 #!/usr/bin/env python #_*_coding:utf-8_* ...

  7. VS2015+QT环境配置后,Lauch Qt Designer打开失败,无法打开*.ui文件

    最近在VS2015上配置QT时出现了这个问题,遂百度其解决方法,解决之后记录下来.第一步: 在[解决方案资源管理器]中,右击你的 xxx.ui文件,选择[打开方式],此时列表中默认值是[ Qt des ...

  8. HTML+CSS ,原型

    此图是别人所作

  9. Excel VBA获取当文件下级子目录或目录中文件

    '====================================================================== '功能: 查找指定文件夹含子文件夹内所有文件名或文件夹名 ...

  10. React中state和props分别是什么?

    整理一下React中关于state和props的知识点. 在任何应用中,数据都是必不可少的.我们需要直接的改变页面上一块的区域来使得视图的刷新,或者间接地改变其他地方的数据.React的数据是自顶向下 ...