html5 javascript 事件练习3随机键盘
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>随机键盘</title>
<style type="text/css">
input{
width: 30px;
height: 30px;
border-radius: 20px;
margin: 2px;
outline: none;
}
.div{
width: 120px;
height: 150px;
padding: 10px;
text-align: center;
background: rgba(180,90,30,0.3);
border: 2px solid orange;
}
.inp{
width: 130px;
height: 20px;
}
.clear,.new{
width: 60px;
font-size: 12px;
}
</style>
</head>
<body>
<input type="text" class="inp" id="txt"><br>
<input type="button" class="clear" value="清除" onclick="clearnum()">
<input type="button" class="new" value="重置键盘" onclick="cz()">
<div id="div1" class="div"></div>
<script>
var txt=document.getElementById('txt');
var div1=document.getElementById('div1');
function getrandom(){
var num=[0,1,2,3,4,5,6,7,8,9];
var rans=[];
for (var i = 0; i < 10; i++) {
var n=Math.floor(Math.random()*(10-i));
rans.push(num[n]);
num.splice(n,1);
}
return rans;
}
// alert(getrandom());
function creatkey(){
var ranarr=getrandom();
var btnarr=[];
for (var i = 0; i < ranarr.length; i++) {
var btn=document.createElement('input');
btn.setAttribute('type','button');
btn.value=ranarr[i];
btn.onclick=btnclick;
btnarr.push(btn);
div1.appendChild(btn);
}
}
creatkey();
function btnclick(){
txt.value+=this.value;
}
function clearnum(){
txt.value='';
}
function cz(){
window.location.reload();
}
</script>
</body>
</html>
html5 javascript 事件练习3随机键盘的更多相关文章
- html5 javascript 事件练习3键盘控制练习
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- html5 javascript 事件练习2
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- html5 javascript 事件练习1
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- javaScript事件(七)事件类型之键盘与文本事件
键盘事件如下: keydown:当用户按下键盘上的任意键时触发,而且如果按住不放的话,会重复触发此事件. keypress:当用户按下键盘上的字符键时触发,而且如果按住不放的话,会重复触发此事件. k ...
- JavaScript事件基础-10-2.HTML事件; DOM0级事件; 掌握常用的鼠标与键盘事件 ; 掌握this的指向;
JavaScript事件基础 学习目标 1.掌握什么是事件 2.掌握HTML事件 3.掌握DOM0级事件 4.掌握常用的鼠标与键盘事件 5.掌握this的指向 什么是事件 事件就是文档或浏览器窗口中发 ...
- Javascript高级编程学习笔记(64)—— 事件(8)键盘与文本事件
键盘与文本事件 用户在使用键盘时会触发键盘事件 “DOM2级事件”最初规定了键盘事件,但是最后在定稿时又删除了相应内容 所以键盘事件被放入了DOM3级事件的规范中 总的来说有三个键盘事件: keydo ...
- 【教程】HTML5+JavaScript编写flappy bird
作者: 风小锐 新浪微博ID:永远de风小锐 QQ:547953539 转载请注明出处 PS:新修复了两个bug,已下载代码的同学请查看一下 大学立即要毕业了. ...
- 【移动端兼容问题研究】javascript事件机制详解(涉及移动兼容)
前言 这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来,以免我误人子弟,并且帮助我提高 如果你是javascript菜鸟,建议您好好读一读,真的理解下来会有不一样的收获 在下才疏学浅, ...
- JavaScript事件流原理解析
一.为什么会有这一篇的文章 国庆前几天由于任务比较重,要赶在国庆前把一个进度的任务开发完成,所以也就有点赶,但是却遇到了一个比较奇怪的Bug,导致了任务比预计的延迟了几个小时,对此深表遗憾,所以利用国 ...
随机推荐
- shell脚本 切换用户
如下: #!/usr/bin/expect -f spawn su root expect "Password:" send "mypasswd\r" inte ...
- Idea2018旗舰版破解方法
完整请参考 https://www.jianshu.com/p/3c87487e7121 1.在hosts文件里添加一行: 0.0.0.0 account.jetbrains.com 2.在Activ ...
- PXE(preboot execution environment):【网络】预启动执行环节:引导 live光盘 ubuntu livecd 18.04+:成功
比较艰难的成功了. 艰难在于:吱吱吱吱(知知知知知):就是歌init启动参数而已! 最最艰难在于:这个nfs服务器软件有很大的关系.很多时候不是你不行,而是条件不具备 or 条件看似具备但其实有问题 ...
- 织梦channelartlist标签当前栏目高亮
channelartlist标签完美支持currentstyle属性,实现自动加载当前栏目CSS样式,可以用来标识当前栏目位置的CSS,解决方法如下: 打开文件include\taglib\chann ...
- lua 中protobuf repeated 嵌套类 复合类型
PB基础知识科普 syntax = "proto2"; package PB; message Item { required string name = ; } message ...
- JNDI数据源的配置
一.数据源的由来 在Java开发中,使用JDBC操作数据库的四个步骤如下: ①加载数据库驱动程序(Class.forName("数据库驱动类");) ②连接数据库(Conn ...
- plsql中文乱码
一.关于PLSQL无法正确显示中文 刚才下载安装了PLSQL Developer 9.0.0.1601 汉化绿色版,执行SQL查询语句,发现显示的数据中只要有中文都会以?表示. 原因:客户端跟服务器的 ...
- vue2.0 vs vue
vue2.0相比vue1.0 有哪些改变,今天总结了一下 vue2.0组件中 template 不在支持代码片段 //vue1.0组件中template写法 <template> < ...
- 360自带--JS开发工具箱
360自带–JS开发工具箱 360自带–JS开发工具箱 360自带–JS开发工具箱
- Luogu 1583 - 魔法照片 - [简单排序题]
题目链接:https://www.luogu.org/problemnew/show/P1583 题目描述一共有n(n≤20000)个人(以1--n编号)向佳佳要照片,而佳佳只能把照片给其中的k个人. ...