<!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. 05Hadoop-左外连接

    场景:有两张表,一张用户表(user),交易表(transactions).两张表的字段如下: 两份表数据做个左连接,查询出(商品名,地址)这种格式. 这样就是相当于交易表是左表,不管怎么样数据都要保 ...

  2. (转)x264的一些参数设置对编码效率的影响

    转自:http://www.cnblogs.com/wainiwann/p/5647521.html i_luma_deadzone[0]和i_luma_deadzone[1]分别对应inter和in ...

  3. eclipse 查看变量或方法在什么地方被调用的快捷键和快速显示方法入参提示信息

    为了用eclipse写代码的时候,不用方向键移动光标,可以设置如下快捷键, Line Up:Alt+i   光标向上 Line Down:Alt+k 光标向下 Line Start:Alt+u  移到 ...

  4. Centos 下 JProfiler 9.1.1 安装 部署 及 使用

    JProfiler[1] 是一个商业授权的Java剖析工具,由EJ技术有限公司,针对的Java EE和Java SE应用程序开发的.它把CPU.执行绪和内存的剖析组合在一个强大的应用中.JProfil ...

  5. HTML中include file的用法

    语法 <!-- #include PathType = "FileName" --> 参数 PathType  路径类型 路径可为以下某种类型: 文件 该文件名是带有  ...

  6. 【Zookeeper系列】ZooKeeper伸缩性（转）

    原文地址:https://www.cnblogs.com/sunddenly/p/4143306.html 一.ZooKeeper中Observer 1.1 ZooKeeper角色 经过前面的介绍,我 ...

  7. ORACLE调优深入理解AWR报告(转)

    AWR报告分析可从以下几点入手: (1).Oacle主机资源开销分析及负载情况 (2).oracle top信息分析 Top 10 Foreground Events by Total Wait Ti ...

  8. ToolBar样式颜色，图标设置

    extends:http://blog.csdn.net/w1054993544/article/details/48339565 <resources> <style name=& ...

  9. codeforces 1106 E

    显然是dp啊,dp[i][j]表示到时间i打扰了j次的最小收益 显然要排序,官方题解说set没看懂,优先队列就行啊. 按照时间排序,显然这样扫的话可以保证当前时间点的点在优先队列里吧, 然后有打断和不 ...

  10. elk-图形化展示（八）

    可以根据自己定义: pv: uv: ip top 10 ua tope 10 url top 5 status  top 10 仪表板展示: