JS自定义随机数字键盘
<!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自定义随机数字键盘的更多相关文章
- JS自定义随机键盘
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- iOS数字键盘自定义按键
UIKeyboardTypeNumberPad 数字键盘自定义按键 最近做一个搜索用户的功能,这里使用了UISearchBar.由于搜索的方式只有手机号码,所以这里的键盘要限制为数字输入,可以这么做: ...
- JS数字键盘
JS数字键盘,JS小键盘 CSS代码: #numberkeyboard { border: 1px solid #b3b3b3; background: #f2f3f7; height: 285px; ...
- ios自定义数字键盘
因为项目又一个提现的功能,textfiled文本框输入需要弹出数字键盘,首先想到的就是设置textfiled的keyboardType为numberPad,此时你会看到如下的效果: 但是很遗憾这样 ...
- 使用js Math.random()函数生成n到m间的随机数字
何使用js生成n到m间的随机数字,主要目的是为后期的js生成验证码做准备,Math.random()函数返回0和1之间的伪随机数 摘要: 本文讲解如何使用js生成n到m间的随机数字,主要目的是为后 ...
- js Date 函数方法 和 移动端数字键盘调用
var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); //获取完整的年份(4位,1970-???? ...
- js输入密文弹出数字键盘
我们经常被产品要求,在移动端的web页面上的输入框输入密码时要弹出数字键盘,而不是全键盘,这个该怎么实现呢? 1.首先要弹出数字键盘,我们只能把input框的type从password改为tel 2. ...
- h5仿微信、支付宝数字键盘|微信支付键盘|支付宝付款键盘
html5仿微信支付数字键盘|仿支付宝键盘|h5仿微信密码输入键盘|自定义数字键盘 很早之前由于项目需求,就有开发过一个h5仿微信支付键盘,这几天就把之前的数字键盘模块独立出来,重新整理开发成demo ...
- 一个数字键盘引发的血案——移动端H5输入框、光标、数字键盘全假套件实现
https://juejin.im/post/5a44c5eef265da432d2868f6 为啥要写假键盘? 还是输入框.光标全假的假键盘? 手机自带的不用非得写个假的,吃饱没事干吧? 装逼?炫技 ...
随机推荐
- mysql转化时间戳毫秒到秒
其实我感觉都不值得写一篇随笔的,但是呢,我就是想写 其实就是截取毫秒时间戳的前十位就是我们是秒时间戳啦 update 表 set 表字段 = substr(表字段,1,10) 好简单 嫌弃中
- 记一次odoo创建新的模块时,但是在odoo web界面找不到应用的案例
原因就是在odoo.conf配置文件中没有说明 模块查找的路径
- 深入理解任何Binder Client都可以直接通过ServiceManager的0这个Binder句柄创建一个BpBinde
ServiceManager是安卓中一个重要的类,用于管理所有的系统服务,维护着系统服务和客户端的binder通信.对此陌生的可以先看系统服务与ServiceManager来了解应用层是如何使用Ser ...
- 剑指offer--day01
1.1题目:二维数组中的查找:在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断 ...
- C#后台保存Cookie
一般是: Response.Cookies["backurl"].Expires.AddDays(2); 但是,IE浏览器保存Cookie用 Response.Cookies[&q ...
- New start-开始我的学习记录吧
不知道从何说起,就从眼下的感想开始吧. 转行是一件不容易的事情! 今天是来北京学习Java的第41天.小测验了两次,一次51分,一次54分. 下午有学长过来分享了他的成长经历,感触很多.不是灌鸡汤,也 ...
- 通过挂载系统U盘搭建本地yum仓库
首先打开hbza(CentOS)和yum,两者要连接上 第1步:在hbza中创建一个目录 输入mkdir /lxk,名字随便起.输入mount /dev/cdrom /lxk 第2步:打开yum, ...
- SpringBoot使用webservice
Pom.xml <parent> <groupId>org.springframework.boot</groupId> <artifactId>spr ...
- Centos6.8忘记MySQL数据库root密码解决方法
一.更改MySQL配置文件my.cnf,跳过密码验证. 编辑配置文件/etc/my.cnf文件,在[mysqld]下面添加skip-grant-tables,保存退出.如图: vim /etc/my. ...
- pip源地址
pip国内的一些镜像 阿里云 http://mirrors.aliyun.com/pypi/simple/ 中国科技大学 https://pypi.mirrors.ustc.edu.cn/si ...