<!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. 对List遍历过程中添加和删除的思考

    对List遍历过程中添加和删除的思考 平时开发过程中,不少开发者都遇到过一个问题:在遍历集合的的过程中,进行add或者remove操作的时候,会出现2类错误,包括:java.util.Concurre ...

  2. 1开放封闭原则OCP

    一.什么是开放封闭原则 开放封闭原则(Open-Closed Principle):一个软件实体 应当对扩展开放,则修改关闭. 在设计一个模块时,应当使得这个模块可以在不被修 改的前提下被扩展.也就是 ...

  3. 简单工厂模式（Java与Kotlin版）

    Kotlin基础知识的学习,请参考之前的文章: Kotlin入门第一课:从对比Java开始 Kotlin入门第二课:集合操作 Kotlin入门第三课:数据类型 初次尝试用Kotlin实现Android ...

  4. linux系统下Nagios+rrdtool+Pnp4nagios监控环境的搭建

    环境中的软件版本>>>>>>>>>>>>>>>>>>nagios版本:3.5.1rrdtoo ...

  5. perl 递归删除目录和目录中的文件

    #!/usr/bin/perl use autodie; use utf8; use Encode qw(decode encode); sub del_dir{ my $path = shift @ ...

  6. ruby 知识点随笔

    print .puts 和 p 方法的区别."" 与 ''  的区别. 处理控制台编码问题 >ruby -E utf-8 脚本文件名称 # 执行脚本 >irb -E u ...

  7. python 第三方扩展库的安装

    主要就是采用 easy_install 和pip安装,一定要把这两个东西安装好.http://peak.telecommunity.com/DevCenter/EasyInstall下载ez_setu ...

  8. [教程]微信官方开源UI库-WeUI使用方法【申明：来源于网络】

    [教程]微信官方开源UI库-WeUI使用方法 [ 教程]微信官方开源UI库-WeUI使用方法 地址:http://www.weui.org.cn/?/article/1 微信公众号开发-WeUI使用说 ...

  9. 范进中Nature——儒林外史新义

    范进中Nature——儒林外史新义 范进发了文章回办公室,实验室一块儿搬砖的挂名作者俱各欢喜.正待烧锅煮方便面,只见他老板胡副教授,手里拿着一包外卖和一瓶红星二锅头,走了进来.范进向他作揖,坐下.胡副 ...

  10. 深度学习基础（一）LeNet_Gradient-Based Learning Applied to Document Recognition

    作者:Yann LeCun,Leon Botton, Yoshua Bengio,and Patrick Haffner 这篇论文内容较多,这里只对部分内容进行记录: 以下是对论文原文的翻译: 在传统 ...