2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
    window.οnlοad=function(){
        var txt=document.getElementById("txt");
        var box=document.getElementById("box");
        var btn01=document.getElementById('btn01');
        var btn02=document.getElementById('btn02');

document.οnkeydοwn=function(event){
            event=event||window.event;
            if(event.keyCode==13){
                box.innerHTML=txt.value;
                
        
        
            }
        }
        var num=1;
        var count = document.getElementById("box3");

funt=function(){
            count.innerHTML=num++;

}
        timer=setInterval(funt,1000);

btn01.οnclick=function(){

txt.value="";

txt.removeAttribute('disabled');
        box3.style="display:block";
        clearInterval(timer);
        
        timer=setInterval(funt,1000);

}

btn02.οnclick=function(){
            txt.setAttribute('disabled','disabled');
            txt.value="";
            box.innerHTML="";
            
            clearInterval(timer);

if(box3.innerHTML>60){
                alert("比赛结束，用时"+box3.innerHTML+"秒:perfect");
            }else if(box3.innerHTML>30){
                alert("比赛结束，用时"+box3.innerHTML+"秒:very good");
            }else{
                alert("比赛结束，用时"+box3.innerHTML+"秒:再练练?");
            }
            
        }    
            
    }

</script>
    <style type="text/css">
    
    h1,h2{
        font-size: 45px;
        font-weight: bolder;
        text-align: center;
        color: rgba(255,255,255,0.5);
        opacity: 0.9;
        zoom:1;
        background: url(img/bak.png);
        -webkit-background-clip: text;
        -ms-background-clip: text;
        -o-background-clip: text;
        -moz-background-clip: text;
        
    
        transition:3s;
    }
    body{
        position: relative;
    }
    #box{

width: 500px;
        height: 500px;
        background: #1739A2;
        border: 1px solid gold;
        margin: 0 auto;
        margin-top: 150px;
        font-size: 30px;
        word-break: break-all;white-space: normal;
        
    }

#txt{
        width:500px;
        height:50px;
        vertical-align: middle;

}
    .input{

text-align: center;

}
    #btn{
        
        text-align: center;
    }
    #btn01,#btn02{
        padding: 10px;
    }
    body{
        background-size: cover;
        background:url(img/xing.gif);
        opacity: 0.5;
        zoom:1;

}
    a{
        display: block;
        text-decoration: none;
        
        font-size: 25px;
        line-height: 1;

}
    
    .competition:hover,.Whisper:hover{
        background-color:#2F77E4 ;
        opacity: 0.5;
        zoom: 1;

}

#box3{
        width: 50px;
        height: 50px;
        color:#EB1865;
        font-size: 50px;
        opacity: 0.5;
        float: right;

}
    
    div.sideBar a{

display: block;
        width: 100px;
        height: 80px;
        background: #3F2E95;
        opacity: 1;
        transition: 1s;
        
        
    }

div.sideBar a:hover {
        width: 120px;

}
    .sideBar{
        display: inline-block;
        position: absolute;
        margin-top: 150px;
    }
    body{
        position: relative;
    }
    img{
        position: absolute;
        
        opacity: 0.8;
        width: 500px;
        height: 500px;

}
    
    span{
        color:#E4FA07;
        opacity: 0.5;
    }
    h1:hover,h2:hover {
        background-position: 500px 0;
    }
    </style>
    
</head>
<body>
        <h1>快乐集结队</h1>
        <h2>我爱打字</h2>
        <p id="box3"></p>
        <div class="sideBar">
            <a href="Demo2.html" class="Whisper" >悄悄话</a>
            <a href="#" class="competition" >拼手速</a>
            <a href="#" class="competition" id="a2">逛商城</a>
            <a href="#" class="competition" id="a2">日日答</a>
            <a href="#" class="competition" id="a2">简心情</a>
            
        </div>
        
        <div id="box">
        <img src="img/piao.gif">
        <span>tips:1.竞赛模式点击左侧导航栏拼手速模式，私聊我请点击悄悄话模式哦。2.点击开始闯关按钮，比赛计时,请在文本框中输入内容。3.输入完成后请点击enter键提交即可在看到输入的内容。不玩了请点击结束比赛按钮。</span>

</div>
        <br/>
        <div class="input">
            <input type="text" name="" value="" id="txt" disabled="disabled" clientidmode="Static">
            
        </div>
        <br/><br/>
        <div id="btn">
            <button id="btn01">开始闯关</button>
            <button id="btn02" οnclick="clearInterval(timer)">结束比赛</button>
        </div>

</body>
</html>

转载于:https://my.oschina.net/kitty0107/blog/1603625

自己设计的一个打字平台相关推荐

  1. 如何设计和搭建一个开放平台，提供开放接口？12张PPT给你答案

    如何设计和搭建一个开放平台,提供开放接口?12张PPT给你答案 (作者:dogstar) 1.未来趋势会如何? 随着互联网技术的发展,现在已经是到达了信息化爆炸的时代,并且各种技术层出不穷.比起十多年 ...

  2. Unity与C#创建一个3D平台游戏 Learn to Create a 3D Platformer Game with Unity C#

    游戏开发变得容易了.使用Unity学习C#并创建您自己的3D平台! 你会学到什么 学习现代通用编程语言C#. 了解Unity中3D开发的功能 发展强大的可转移的解决问题的技能 了解游戏开发过程 了解面 ...

  3. 如何设计出一个有灵魂的「签到功能」？

    本文为PMCAFF专栏作者迷路的威廉出品 提到签到功能,想必是个人都并不陌生,有些人对它可能嗤之以鼻,不屑于去签到,有些人则可能是乐此不疲,深深陷入其中. 说实话,签到确实是一种基础功能,有的PD认为 ...

  4. 高性能平台设计—美团旅行结算平台实践

    本文根据第23期美团技术沙龙演讲内容整理而成. 背景 美团酒旅有很多条业务线,例如酒店.门票.火车票等等,每种业务都有结算诉求,而结算处于整个交易的最后一环不可缺少,因此我们将结算平台化,来满足业务的 ...

  5. python打字_使用Python制作一个打字训练小工具

    一.写在前面 说道程序员,你会想到什么呢?有人认为程序员象征着高薪,有人认为程序员都是死肥宅,还有人想到的则是996和 ICU. 别人眼中的程序员:飞快的敲击键盘.酷炫的切换屏幕.各种看不懂的字符代码 ...

  6. 如何成功搭建一个游戏平台？

    游戏创业成为现如今的创业趋势之一,其中,游戏平台的搭建更是重中之重,相信一些游戏玩家对游戏平台网站的基本运作也有一定的了解,但成功搭建一个游戏平台的难度可不小,下面让我们一起来看一看如何成功搭建一个游 ...

  7. 高性能平台设计——美团旅行结算平台实践

    点击蓝字订阅,不错过下一篇好文章 本文根据第23期美团点评技术沙龙演讲内容整理而成. 酒旅有很多条业务线,例如酒店.门票.火车票等等,每种业务都有结算诉求,而结算处于整个交易的最后一环不可缺少,因此我 ...

  8. 中小型运维团队如何设计运维自动化平台

    前言 我给中小型运维团队的定义是整个团队人数(所有运维工程师 + 运维开发工程师)为 20 人以下,一般这样的团队,能为自动化投入的资源也许就 1.2 个开发人员. BAT 等大公司的 DevOps ...

  9. 设计实现一个漂亮的视频网站

    一.任务描述 单位最近要设计开发一个全新的视频网站,用于存放和展示公司的宣传视频和培训视频.具体要求是: 1)保存和管理公司现存的2000个左右的视频资源,约5TB的数据量. 2)视频播出要清楚流畅, ...

最新文章

  1. linux 服务搭建DNS
  2. MySQL 删除用户
  3. Maven和Eclipse整合
  4. ARM购HPC软件专家Allinea叫板英特尔和IBM
  5. ajax jq 图片上传请求头_前端常见面试 请求篇
  6. mysql注入转义绕过_SQL注入防御绕过——二次注入
  7. WCF入门示例一:承载于托管代码中的WCF示例程序
  8. 双11临近，电脑无缘无故的弹出了双11天猫广告，必须追踪到底
  9. js 取小数点后两位的几种方法 取整
  10. 阿里云支持备案云产品列表（不只是云服务器）
  11. ContentType 清单大全
  12. 洛谷_2762 太空飞行计划问题
  13. 分享某盘不限速神器，免费好用
  14. 外汇天眼：FXOpen宣布降低40%点差，对交易者来说是利好么？
  15. go微服务框架go-micro
  16. shell脚本之sed开发
  17. 数据交换实践：创建业务系统间高速公路
  18. 幼年产品狗如何养成？这是完全自我修炼教程！
  19. 可以替代百度统计工具Matomo，小睿部署实战！看完你也会了哦！
  20. 期权一张是多少？一张有多少份？

热门文章

  1. C语言算出一行的最大数,多输入输出练习1 （C语言代码）给定很多行数据，要求输出每一行的最大值。注意输入输出的格式要求...
  2. uvc能支持多大分辨率_微信发送的视频不能大于25M？原来改个后缀就能发送，涨知识了...
  3. Angular (Full App) with Angular Material, Angularfire NgRx 第3章
  4. 计算机函数left的用法,excel中的left函数怎么使用呢?
  5. 为什么Java会给system报错_java – 为什么将System.nanoTime()转换为Calendar对象会给我错误的当前日期？...
  6. python中await async_[转载]python中的await和async
  7. php1500,圆周率1500多位
  8. 从零学ELK系列（九）:Nginx接入ELK（超详细图文教程）
  9. 肚子上挂张画就能隐身：AI完全看不出我在哪，更看不出我是人类了 | 开源
  10. 高通最强芯片855发布！AI性能比华为苹果翻倍，商用5G，标配屏下指纹