<!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. 使用git命令push到自己的仓库，显示Unknown且没有贡献记录的解决方案

    一.问题的起因 今天用公司电脑在github上push时出现了以下问题: 用户名为unknown: 贡献记录为0: 二.解决方案 1,检查一遍自己的账号密码是否正确,如果正确,执行第二步骤操作: 2, ...

  2. python -- Pythonic

    所谓Pythonic,就是极具Python特色的Python代码(明显区别于其它语言的写法的代码) 总结如下: 两变量的内容交换 Python:a,b = b,a 非Python:t=a;a=b;b= ...

  3. 使用100%面向过程的思维方式来写java程序

    1.java是强制写class关键字的语言,不能有独立的函数游离在类外出现在文件中,这和python c++ 都不同,后面的都可以单独在类外写函数,所以java被称为是纯面向对象的语言,py和c++都 ...

  4. Centos7 启动脚本

    Centos7 启动脚本 启动脚本.如果进程已存在,输出错误信息后退出: #! /bin/bash PIDS=`ps -ef | grep '/usr/bin/node ./index.js' | g ...

  5. IOS如何安装ipa文件

    https://www.i4.cn/pro_ios.html#jiaocheng 用电脑下载 爱思助手PC端 然后电脑连接 苹果手机, 用 安装的 爱思助手PC端 软件 安装 “爱思助手移动端” 下载 ...

  6. iOS - 高德地图步行线路规划多点多条线路

    项目集成高德地图遇到的问题: 高德地图的官方步行导航只针对单个起始点单条线路,驾车导航才有途径点多线路.现在项目是要步行导航多个点多条线路

  7. spring学习笔记-AOP

    1.aop:aspect oriented programming 面向切面编程 2.aop在spring中的作用:   提供声明式服务(声明式事务) 允许用户实现自定义切面 3.aop:在不改变原有 ...

  8. python 3 往Excel 中的写入内容但不覆盖原内容

    EXCEL 写入数据保持原样式 import xlwt import xlrd import xlutils import xlutils.copy class ExcelHandle(): def ...

  9. js中级小知识3

    函数: 函数在调用的时候,会形成一个私有作用域,内部的变量不会被外面访问,这种保护机制叫闭包.这就意味着函数调用完毕,这个函数形成的栈内存会被销毁. 有些时候我们不希望他被销毁. 函数归属谁跟它在哪调 ...

  10. Python学习之旅（三十三）

    Python基础知识(32):网络编程(Ⅰ) 网络通信是两台计算机上的两个进程之间的通信,而网络编程就是如何在程序中实现两台计算机的通信 P协议负责把数据从一台计算机通过网络发送到另一台计算机 TCP ...