<!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. python3命令行ImportError: No module named 'xxxx'的问题

    主要原因:启动脚本不在当前目录下,无法找到上一层 在pycharm写好的脚本程序,在命令行无法运行,报错 Traceback (most recent call last): File "t ...

  2. “Java是编译执行的语言”这句话对吗？

    现在让你谈谈对Java平台的理解,你是否会感觉内容过于庞大?这个问题是比较宽泛的,Java发展到现在已经不仅仅是语言这么简单了,Java平台涉及的,包括但不仅限于下面提到的这些内容: Java语言本身 ...

  3. 基于【CentOS-7+ Ambari 2.7.0 + HDP 3.0】HAWQ数据仓库 使用之 gpfdist协议

    一.HAWQ基本安装自带gpfdist协议 gpfdist是HAWQ支持的外部表访问协议之一,这是hawq自带的一个简单的集成http服务命令. 在我的前述安装hawq之后,gpfdist命令位于ha ...

  4. CSS面试题

    1.有哪些方式可以对一个DOM设置它的CSS样式? 外部样式表.引入一个外部CSS文件: 内部样式表.将CSS代码放在<head>标签内部: 内联样式,将CSS样式直接定义在HTML元素内 ...

  5. JS 浅谈函数柯里化，不明觉厉

    在计算机科学中,柯里化(Currying)是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数且返回结果的新函数的技术.这个技术由 Christopher ...

  6. js - 伪数组转化为数组的几种方法整理（更新中...）

    伪数组:无法调用数组的方法,但是有length属性,又可以索引获取内部项的数据结构. 比如:arguments.getElementsByTagName等一系列dom获取的NodeList对象,他们 ...

  7. Linux服务器中创建Oracle数据库实例

    紧接上篇,在Linux服务器已经完成对Oracle数据库软件的安装后,接下来要创建Oracle实例,看图说话: [su – oracle echo $DISPLAY export DISPLAY=10 ...

  8. LPVOID 没有类型的指针

    可以将LPVOID类型的变量赋值给任意类型的指针,比如在参数传递时就可以把任意类型传递给一个LPVOID类型为参数的方法,然后在方法内再将这个“任意类型”从传递时的“LPVOID类型”转换回来. 示例 ...

  9. vector排序

    // VectorSort.cpp : Defines the entry point for the console application. // #include "stdafx.h& ...

  10. PHP（方法 函数 循环 和 数组 查找）

    循环 和 数组 查找 顺序查找 二分法查找 冒泡排序 方法 函数 定义:一堆代码的集合叫做函数(满足条件下“一堆”) 语法,定义,调用,参数列表(形参,实参),返回值 两种方法: function 方 ...