<!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随机键盘的更多相关文章

  1. html5 javascript 事件练习3键盘控制练习

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

  2. html5 javascript 事件练习2

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

  3. html5 javascript 事件练习1

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

  4. javaScript事件（七）事件类型之键盘与文本事件

    键盘事件如下: keydown:当用户按下键盘上的任意键时触发,而且如果按住不放的话,会重复触发此事件. keypress:当用户按下键盘上的字符键时触发,而且如果按住不放的话,会重复触发此事件. k ...

  5. JavaScript事件基础-10-2.HTML事件; DOM0级事件; 掌握常用的鼠标与键盘事件 ; 掌握this的指向;

    JavaScript事件基础 学习目标 1.掌握什么是事件 2.掌握HTML事件 3.掌握DOM0级事件 4.掌握常用的鼠标与键盘事件 5.掌握this的指向 什么是事件 事件就是文档或浏览器窗口中发 ...

  6. Javascript高级编程学习笔记（64）—— 事件（8）键盘与文本事件

    键盘与文本事件 用户在使用键盘时会触发键盘事件 “DOM2级事件”最初规定了键盘事件,但是最后在定稿时又删除了相应内容 所以键盘事件被放入了DOM3级事件的规范中 总的来说有三个键盘事件: keydo ...

  7. 【教程】HTML5+JavaScript编写flappy bird

         作者: 风小锐      新浪微博ID:永远de风小锐      QQ:547953539      转载请注明出处 PS:新修复了两个bug,已下载代码的同学请查看一下 大学立即要毕业了. ...

  8. 【移动端兼容问题研究】javascript事件机制详解（涉及移动兼容）

    前言 这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来,以免我误人子弟,并且帮助我提高 如果你是javascript菜鸟,建议您好好读一读,真的理解下来会有不一样的收获 在下才疏学浅, ...

  9. JavaScript事件流原理解析

    一.为什么会有这一篇的文章 国庆前几天由于任务比较重,要赶在国庆前把一个进度的任务开发完成,所以也就有点赶,但是却遇到了一个比较奇怪的Bug,导致了任务比预计的延迟了几个小时,对此深表遗憾,所以利用国 ...

随机推荐

  1. 34对MyBatis的博客的整理心得

    对本博客的mybatis重新读一下,做一个整理.如下: 1:为什么会有mybatis,因为原生的jdbc方式有很大问题: (1)数据库连接,使用时就创建,不使用立即释放,对数据库进行频繁连接开启和关闭 ...

  2. AWT是Java最早出现的图形界面，但很快就被Swing所取代。

    Module  11 Swing AWT是Java最早出现的图形界面,但很快就被Swing所取代. Swing才是一种真正的图形开发. AWT在不同平台所出现的界面可能有所不同:因为每个OS都有自己的 ...

  3. javascript转义unicode十六进制编码且带有反斜杠后的html

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

  4. etl数据同步工具 kettle

    kellet使用 https://www.cnblogs.com/gala1021/p/7814712.html

  5. monit介绍和配置

    1.介绍 monit监控和管理进程.程序.文件.目录和Unix系统的文件的工具.可以进行自动维护和修理,在错误的情况下执行有意义的因果关系的行动.比如,某个进程没有运行启动它:没有响应重启它:占用太多 ...

  6. python 运行环境

    Python 是一种半编译半解释型运行环境.首先,它会在模块 "载入" 时将源码编译成字节码 (ByteCode).而后,这些字节码会被虚拟机在一个 "巨大" ...

  7. java中jdbc源码解读

    在jdbc中一个重要的接口类就是java.sql.Driver,其中有一个重要的方法:Connection connect(String url, java.util.Propeties info); ...

  8. 7款让人惊叹的HTML5粒子动画特效(转载)

    1.HTML5 Canvas粒子模拟效果 这是一款利用HTML5 Canvas模拟出来的30000个粒子动画,当你用鼠标在canvas画布上移动时,鼠标周围的一些粒子就会跟着你移动,并形成一定的图案, ...

  9. Java进程与线程的区别

    每个进程都独享一块内存空间,一个应用程序可以同时启动多个进程.比如浏览器,打开一个浏览器就相当于启动了一个进程. 线程指进程中的一个执行流程,一个进程可以包含多个线程. 每个进程都需要操作系统为其分配 ...

  10. Python学习之旅（二十）

    Python基础知识(19):面向对象高级编程(Ⅱ) 定制类 形如“__xx__”的变量或函数在Python中是有特殊用途的 1.__str__ 让打印出来的结果更好看 __str__:面向用户:__ ...