<!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>
//生成大写字母 A的Unicode值为65
function generateBig_1(){
var str = [];
for(var i=65;i<91;i++){
str.push(String.fromCharCode(i));
}
return str;
}
//生成大写字母 a的Unicode值为97
function generateSmall_1(){
var str = [];
for(var i=97;i<123;i++){
str.push(String.fromCharCode(i));
}
return str;
}
//将字符串转换成Unicode码
function toUnicode(str){
var codes = [];
for(var i=0;i<str.length;i++){
codes.push(str.charCodeAt(i));
}
return codes;
}
function generateSmall(){
var ch_small = 'a';
var str_small = '';
for(var i=0;i<26;i++){
str_small += String.fromCharCode(ch_small.charCodeAt(0)+i);
}
return str_small;
} function generateBig(){
var ch_big = 'A';
var str_big = '';
for(var i=0;i<26;i++){
str_big += String.fromCharCode(ch_big.charCodeAt(0)+i);
}
return str_big;
}
console.log(generateSmall());
console.log(generateBig()); function suijiNum(){
var codes = [];
var nums = [];
for(var i=0;i<10;i++){
nums.push(i+1);
}
for(var i=1;i>0;i++){
var suiji =Math.floor(Math.random()*10+1);
if(codes.length == 0){
codes.push(suiji);
}else{
var indexs = arr.indexOf(suiji) //-1
if(indexs ==-1){
codes.push(suiji);
}
}
for(var j=0;j<nums.length;j++){
var cs = nums[j];
var cd = codes.indexOf(cs) //-1
if(cd == -1){ }
}
} return codes;
} function b(){
var l = generateBig_1();
var k = [];
var lenl = 26;
for(var i=0; i<26; i++){
var index = Math.floor(Math.random() * lenl);
k[i] = l[index];
l[index] = l[lenl - 1];
lenl -= 1;
} console.log("26sd",k)
} b(); function a(){
var l = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
var k = []; var lenl = 10;
for(var i=0; i<10; i++){
var index = Math.floor(Math.random() * lenl);
k[i] = l[index];
l[index] = l[lenl - 1];
lenl -= 1;
} console.log("k",k)
} a() console.log(); console.log(generateBig_1());
console.log(generateSmall_1()); 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');
var str = generateBig_1();
for (var i = 0; i < str.length; i++) {
var numberBox = document.createElement('div');
numberBox.innerHTML = str[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. Vue.js自定义指令的用法与实例

    市面上大多数关于Vue.js自定义指令的文章都在讲语法,很少讲实际的应用场景和用例,以致于即便明白了怎么写,也不知道怎么用.本文不讲语法,就讲自定义指令的用法. 自定义指令是用来操作DOM的.尽管Vu ...

  3. Android开发案例 - 自定义虚拟键盘

    所有包含IM功能的App(如微信, 微博, QQ, 支付宝等)都提供了Emoji表情之类的虚拟键盘,  如下图:    本文只着重介绍如何实现输入法键盘和自定义虚拟键盘的流畅切换, 而不介绍如何实现虚 ...

  4. js自定义验证码

    分享一个js自定义的验证码 window.onload = function () {     var code;     $('.changePassword').click(function () ...

  5. iOS开发之自定义表情键盘(组件封装与自动布局)

    下面的东西是编写自定义的表情键盘,话不多说,开门见山吧!下面主要用到的知识有MVC, iOS开发中的自动布局,自定义组件的封装与使用,Block回调,CoreData的使用.有的小伙伴可能会问写一个自 ...

  6. js自定义弹出框

    js自定义弹出框: 代码如下 <html> <head><title>自定义弹出对话框</title> <style type ="te ...

  7. 超酷HTML5 Canvas图表应用Chart.js自定义提示折线图

    超酷HTML5 Canvas图表应用Chart.js自定义提示折线图 效果预览 实例代码 <div class="htmleaf-container"> <div ...

  8. [译] 用 Swift 创建自定义的键盘

    本文翻译自 How to make a custom keyboard in iOS 8 using Swift 我将讲解一些关于键盘扩展的基本知识,然后使用iOS 8 提供的新应用扩展API来创建一 ...

  9. 与你相遇好幸运,Sails.js自定义responses

    在 /api/responses/ 新建文件 >serviceDBError.js 自定义的数据库错误 >serviceError.js  自定义的数据错误 >serviceSucc ...

随机推荐

  1. 像计算机科学家一样思考python-第4章 案例研究:接口设计

    系统环境 ubuntu18 4.1turtle模块 模块一开始导入turtle模块就报错了 Python ( , ::) [GCC ] on linux Type "help", ...

  2. 007-elasticsearch5.4.3【一】概述、Elasticsearch 访问方式、Elasticsearch 面向文档、常用概念

    一.概述 Elasticsearch 是一个开源的搜索引擎,建立在一个全文搜索引擎库 Apache Lucene™ 基础之上. Elasticsearch 也是使用 Java 编写的,它的内部使用 L ...

  3. VMware 虚拟化编程(9) — VMware 虚拟机的快照

    目录 目录 前文列表 VMware 虚拟机的快照 快照的执行过程 删除快照 快照类型 Quiseced Snapshot 前文列表 VMware 虚拟化编程(1) - VMDK/VDDK/VixDis ...

  4. 操作Redis--hash/key-value

    redis也是一个数据库,它的存储以key-value的方式存放,比如: a.关系型数据库 比如: mysql.oracle.sql server.db2.sqlite数据库,为关系型数据库 数据通过 ...

  5. A heavy dew refreshed the earth at night

    brightness.n.明亮 endless.adj.无止境的 degradation.n.堕落 superiority.n.优越性 valuable.adj.有价值的 flake.n.小薄片 cu ...

  6. Java基础/发起http和https请求

    Java中发起http和https请求 一般调用外部接口会需要用到http和https请求. 本案例为:前后端完全分离,前端框架(React+Mobx+Nornj),后端(Go语言). 面临问题:跨域 ...

  7. python+selenium元素定位之CSS学习02

    参考文档:https://www.runoob.com/cssref/css-selectors.html CSS选择器用于选择你想要的元素的样式的模式. "CSS"列表示在CSS ...

  8. Bootstrap selectpicker 强制向下

    selectpicker的方向是自适应的,但是有些界面,我们需要强制向下,可以使用属性data-dropup-auto data-dropup-auto="false" 官网上的o ...

  9. C与C#之间使用AES加密解密算法

    目的:C语言写的客户端加密数据,数据发送到C#写的服务端,服务端解密. 保证C与C#之间加密解密AES的配置和模式一直. AES: AES是对称加密算法,关键点: 密钥长度,明文长度,密文长度 密钥长 ...

  10. 如何使用IDEA将项目上传到GitHub中

    上传之前先规定上传的格式: 1 . 以后所有上传的项目,都只上传 src文件集以及pom.xml文件,不要带有自己的 .idea配置文件或者target运行文件之类的(就算是测试文件也一样,从开始就养 ...