幼儿园级1-100随机数运算

实现目标

1.点击随机生成两个数并进项随机的四则运算。

2.答案暂时隐藏，等孩子做完题后点击答案处显示答案。

3.背景设置的卡通些，激发孩子阅读兴趣...........T T。

一、截图展示（此展示位HTML页面）

I 开始：

II 生成随机数运算：

III 显示结果：

二、代码部分

 <!DOCTYPE html>

 <html>

 <head>

     <title>demo</title>

     <style type="text/css">

         .wapper{

             width: 560px;

             height: 150px;

             border: 1px solid green;

             position: absolute;

             top: 100px;

             left: 200px;

             background: url(back.jpg);

         }

         .wapper li{

             padding: 0;

             margin: 0;

             list-style-type: none;

             height: 100px;

             width: 100px;

             border: 1px solid pink;

             float: left;

             font-size: 50px;

             color: blue;

             text-align: center;

             line-height: 100px;

         }

         .button{

             width: 80px;

             height: 40px;

             background-color: green;

             position: absolute;

             top: 180px;

             left: 625px;

             cursor: pointer;

         }

         .result{

             width: 200px;

             height: 150px;

             border: 1px solid green;

             position: absolute;

             top: 100px;

             left: 820px;

             background: url(back.jpg) repeat -70px 0px;

             text-align: center;

             line-height: 150px;

             font-size:50px;

             color: pink;

             cursor: pointer;

         }

     </style>

 </head>

 <body>

     <div class = "wapper">

         <ul>

             <li class="first">请</li>

             <li class="symbol">点</li>

             <li class="second">击</li>

         </ul>

     </div>

         <button class="button" onclick="randomDemo()">Next</button>

     <div class="result" onclick="show()">点答案</div>

     <script type="text/javascript">

         var first = document.getElementsByClassName("first")[0];

         var symbol = document.getElementsByClassName("symbol")[0];

         var second = document.getElementsByClassName("second")[0];

         var ret = 0;

         var resDiv = document.getElementsByClassName("result")[0];

         randomDemo = function(){

             var sym = ["+","-","*","/"];

             var fir = Math.floor(Math.random()*100);

             var sec = Math.floor(Math.random()*100);

             var i = Math.floor(Math.random()*4);

             first.innerHTML = fir;

             symbol.innerHTML = sym[i];

             second.innerHTML = sec;

             switch(i){

                 case 0: ret = fir + sec;break;

                 case 1: ret = fir - sec;break;

                 case 2: ret = fir * sec;break;

                 case 3: ret = fir / sec;break;

             }

             ret = Math.floor(ret);

             resDiv.innerHTML = "点答案";

         }

         show = function(){

             resDiv.innerHTML = ret;

         }

     </script>

 </body>

 </html>

阿超的烦恼 javaScript篇的更多相关文章

  1. 前端面试题总结（三）JavaScript篇

    前端面试题总结(三)JavaScript篇 一.谈谈对this的理解? this是一个关键字. this总是指向函数的直接调用者(而非间接调用者). 如果有new关键字,this指向new出来的那个对 ...

  2. 前端试题本（Javascript篇）

    JS1. 下面这个JS程序的输出是什么:JS2.下面的JS程序输出是什么:JS3.页面有一个按钮button id为 button1,通过原生的js如何禁用?JS4.页面有一个按钮button id为 ...

  3. [转] Web前端优化之 Javascript篇

    原文链接: http://lunax.info/archives/3099.html Web 前端优化最佳实践之 JavaScript 篇,这部分有 6 条规则,和 CSS 篇 重复的有几条.前端优化 ...

  4. web前端面试试题总结---javascript篇

    JavaScript 介绍js的基本数据类型. Undefined.Null.Boolean.Number.String. ECMAScript 2015 新增:Symbol(创建后独一无二且不可变的 ...

  5. 我的前端规范——JavaScript篇

    相关文章 简书原文:https://www.jianshu.com/p/5918c283cdc3 我的前端规范——开篇:http://www.cnblogs.com/shcrk/p/9271561.h ...

  6. 10 个超棒的 JavaScript 简写技巧

    今天我要分享的是10个超棒的JavaScript简写方法,可以加快开发速度,让你的开发工作事半功倍哦. 开始吧! 1. 合并数组 普通写法: 我们通常使用Array中的concat()方法合并两个数组 ...

  7. 前端性能优化（JavaScript篇）

    正巧看到在送书,于是乎找了找自己博客上记录过的一些东西来及其无耻的蹭书了~~~ 小广告:更多内容可以看我的博客 优化循环 如果现在有个一个data[]数组,需要对其进行遍历,应当怎么做?最简单的代码是 ...

  8. 前端知识杂烩（Javascript篇）

    1. JavaScript是一门什么样的语言,它有什么特点?2.JavaScript的数据类型都有什么?3.请描述一下 cookies,sessionStorage 和 localStorage 的区 ...

  9. BAT及各大互联网公司2014前端笔试面试题--JavaScript篇

    很多面试题是我自己面试BAT亲身经历碰到的.整理分享出来希望更多的前端er共同进步吧,不仅适用于求职者,对于巩固复习js更是大有裨益. 而更多的题目是我一路以来收集的,也有往年的,答案不确保一定正确, ...

随机推荐

  1. Hadoop HBase概念学习系列之HFile（二十）

    HFile文件是不定长的. HFile里才是想要的真正数据,实际存储的位置,是在HDFS上.

  2. 成为技术领导者笔记--领导的MOI模型

    一. 想让周围环境发生变化,环境必须包含三个条件: M:激励(Motivation)---有奖品或有困难,这样才对相关人员有推动力或吸引力. O:组织(organization)---利用现有的组织结 ...

  3. HDFS下载数据机制的底层分析

    HDFS下载数据机制的底层分析 Hadoop中的RPC(Remote Procedure Call)框架 hadoop中结点间的通信采用的是RPC. RPC框架的实现机制图解: 从hdfs下载数据的源 ...

  4. nginx反向代理跨域基本配置与常见误区

    最近公司前后端分离,前端独立提供页面和静态服务很自然的就想到了用nginx去做静态服务器.同时由于跨域了,就想利用nginx的反向代理去处理一下跨域,但是在解决问题的同时,发现网上有些方案的确是存在一 ...

  5. Uva821 Page Hopping (Floyd)

    题目大意: 最近的研究表明,互联网上任何一个网页在平均情况下最多只需要单击19次就能到达任 意一个其他网页.如果把网页看成一个有向图中的结点,则该图中任意两点间最短距离的平 均值为19. 输入一个n( ...

  6. jenkins权限配置

    1. 授权匿名账户权限 2 注册新用户,并且把匿名权限删除,添加用户权限 Overall(全局) Credentials(凭证) Slave(节点) Job(任务) View(视图) Administ ...

  7. java web开发环境配置系列（一）安装JDK

    在今天,读书有时是件“麻烦”事.它需要你付出时间,付出精力,还要付出一份心境.--仅以<java web开发环境配置系列>来祭奠那逝去的…… 1.下载JDK文件(http://www.or ...

  8. Python之Pulsar框架使用

    本文内容主要包含Pulsar的介绍和安装.初步使用.应用.常见示例等. 一. 介绍和安装 Pulsar是Python事件驱动并发框架:Pulsar具有高扩展性.高可用性的框架,它能够基于事件驱动的开源 ...

  9. 数字电路中应避免产生不必要的锁存器 Latch

    锁存器(Latch)是数字逻辑电路中很重要的一种基本电路,常见的锁存器包括三个端口:数据输入口.数据输出口.使能端.当使能端为高电平时,输入口的数据直接送到输出口,此时输入输出口可以看成是直接连通的: ...

  10. Linux内存调试工具初探-MEMWATCH（转）

    C 语言作为 Linux 系统上标准的编程语言给予了我们对动态内存分配很大的控制权.这种自由可能会导致严重的内存管理问题,可能导致程序崩溃或随时间的推移导致性能降级. 内存泄漏(即 malloc()  ...