下班回家用二十分钟给闺女做了一个加减乘除的页面，顺便记录下代码，时间仓促，后期再来修改吧

目录结构

　　　　-yq

　　　　　　--menu.html

　　　　　　--yq.html

　　　　　　--yq50.html

　　　　　　--yq70.html

　　　　　　--yq100.html

　　　　　　--js

　　　　　　　　--check.js

　　　　　　　　--clock.js

　　　　　　　　--yq_part1.js

　　　　　　　　--yq_part2.js

功能

　　-menu页面可以选择10以内50以内等加减乘除法

　　-选择后页面replace相应页面，通过js代码生成算式

　　-返回按钮replace到menu页面

　　-加入计时器功能

　　-加入交卷功能

　　-交卷后调用check.js来计算最终得分

　　-可选择是否查看错题，错题background变色

　　-不查看错题会刷新页面继续随机生成算式

导航页面，效果图

<!-- 导航页面 -->
<!DOCTYPE html>

<html>

    <head>

        <title>柚子园</title>

        <meta charset="UTF-8">

        <style type="text/css">

            *{margin:0; padding: 0;}

            html, body{ height: 100%; }

            .menu{height: 100%; width: 100%;background-image: url('back.png') ; background-repeat: no-repeat; background-size: 100% 100%}

            .top{ height:305px ;width: 537px; background-image: url('aisha.jpg');margin: 0 auto;}

            .center{ width: 100%; margin: 0 auto;}

            .button{height: 100px; width: 100px;display: inline-block;margin-top: 5%;margin-left: 15%; margin-right: 5%;}

            .bottom{  height: 50%; width: 70%; margin: 0 auto;}

        </style>

    </head>

    <body>

        <div class="menu">

            <div class="top">

            </div>

            <div class="center">

                    <input class="button" type="button" value="10以内加减法" onclick="fun10()">

                    <input class="button" type="button" value="20以内加减法" onclick="fun20()">

                    <input class="button" type="button" value="50以内加减法" onclick="fun50()">

                    <input class="button" type="button" value="70以内加减法" onclick="fun70()">

                    <input class="button" type="button" value="100以内加减法" onclick="fun100()">

                    <input class="button" type="button" value="10以内乘除法" onclick="fun10x()">

                    <input class="button" type="button" value="20以内乘除法" onclick="fun20x()">

                    <input class="button" type="button" value="50以内乘除法" onclick="fun50x()">

                    <input class="button" type="button" value="100以内乘除法" onclick="fun100x()">

            </div>

        </div>

        <script>

            function fun10(){

                location.replace('yq')

    }

        </script>

        <script>

            function fun20(){

                location.replace('yq20')

    }

        </script>

<script>

    function fun50(){

        location.replace('yq50')

}

</script>

<script>

    function fun70(){

        location.replace('yq70')

}

</script>

<script>

    function fun100(){

        location.replace('yq100')

}

</script>

<script>

    function fun10x(){

        location.replace('yq10x')

}

</script>

<script>

    function fun20x(){

        location.replace('yq20x')

}

</script>

<script>

    function fun50x(){

        location.replace('yq50x')

}

</script>

<script>

    function fun100x(){

        location.replace('yq100x')

}

</script>

    </body>

</html>

10以内加减法html代码，效果图

<!DOCTYPE html>

<html lang="en">

    <head>

        <title>柚青100以内加减法</title>

        <meta charset="UTF-8">

        <style type="text/css">

            *{margin:0; padding: 0;}

            html, body{ height: 100%; background-image: url('back.png') ; background-repeat: no-repeat; background-size: 100% 100% }

            .top{height: 100%;width: 100%;}

            .part1{height:  40%;width: 100%; }

            .indiv{display: inline-block; width: 30%;height: 11%;margin-left: 2% ;}

            .text{float: left;; font-family: monospace;font-size: 30px; ;}

            .inp{ float: right; height: 30px;  text-align:center;background-color: rgb(232, 248, 217);}

            .part2{height:  40%;width: 100%; }

            .yq{display: inline-block; margin-left: 40%;margin-bottom: 1%; width: 15%;height: 1%; font-size: 20px; color: brown; }

            .tim{display: inline-block;margin-top: 5%; height: 100%;width: 180px;  font-size: 30px;border: 0px;}

            .check{display: inline-block;height: 100%;width: 100px;background-color:greenyellow; font-size: 30px;}

            .part3{height: 20%;;width: 100%;}

        </style>

    </head>

    <body>

        <div class="top">

            <div class="part3">

                <div style="width: 60%; display: inline-block; height: 100%;">

                    <img src="1.gif" style="width: 100%; height: 100%;">

                </div>

                    <div style="width: 40%;  float: right;">

                        <input type="text"  class="tim" id="ti">

                        <input type="button" class="check" value="交卷" onclick="check()">

                        <input type="button" class="check" value="返回" onclick="rollback()">

                        <script src="/var/www/yq/check.js"></script>

                    </div>

            </div>

            <div class="part1">

                <script src="./js/yq_part1.js"></script>

            </div>

           <div class="part2">

                <script src="./js/yq_part2.js"></script>

            </div>

        </div>

        <script>

            function rollback(){

                location.replace("menu")

            }

        </script>

        <script type="text/javascript"  src="./js/clock.js"></script>

        <script type="text/javascript"  src="./js/check.js"></script>

    </body>

</html>

clock 计时js代码块

var time = new Date();

var min = time.getMinutes()

var sec = time.getSeconds()

var start_time = min*60 + sec

setint(start_time)

function setint(start_time){

id =  setInterval(function(){clock(start_time)} ,1000)

}

function clock(start_time){

    var now_time = new Date()

    var end_min = now_time.getMinutes()

    var end_sec = now_time.getSeconds()

    var now_time = end_min*60 + end_sec

    var use_time = now_time - start_time

    if (use_time<60){

        ftime = use_time+'秒'

    }

    else{

        ftime = Math.floor(use_time/60) +'分'+use_time%60+"秒"

    }

    var ret = document.getElementById('ti')

    ret.value = ftime

}

加法生成器js代码块

function randomNum(minNum,maxNum){

    switch(arguments.length){

        case 1:

            return parseInt(Math.random()*minNum+1,10);

        break;

        case 2:

            return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10);

        break;

            default:

                return 0;

            break;

    }

} 

function fun(n){

    var arr = new Array(2);

    arr[0]=randomNum(1,5)

    arr[1]=randomNum(1,5)

    var ret = arr[0] +arr[1]

    document.write("<div class = 'indiv'>"+"<p class ='text'>"+arr.join('+') + '=' +"</p>"+ "<input class = 'inp' type='text' id =" + n + '

>'+"</div>"  )

    return ret

    }

    var i = 0

    leftli = []

    while(i<24){

        leftli.push(fun(i))

        i++

    }

减法生成器js代码块

function fun1(n){

    arr2 = new Array(2);

    arr2[0]=randomNum(1,10)

    arr2[1]=randomNum(1,10)

    if (arr2[0] > arr2[1]){

        document.write("<div class = 'indiv'>"+"<p class ='text'>"+arr2.join('-') + '=' +"</p>" + "<input class = 'inp' type='text'id =" +

n + '>' + "</div>")

        return arr2[0] -arr2[1]

    }

    else{

        document.write("<div class = 'indiv'>"+"<p class ='text'>"+arr2[1] + '-'+arr2[0]+ '=' + "</p>"+"<input class = 'inp' type='text' id

 =" + n + '>' + "</div>")

        return arr2[1] -arr2[0]

    }

}

var b = 30

right = []

while(b<54){

    right.push(fun1(b))

        b++

}

交卷改卷js代码块

function check(){

    var score = 100

clearInterval(id)

for(var i =0; i<24; i++ ){

    ret = document.getElementById(i)

    if(ret.value.length == 0 | ret.value != leftli[i]){

    ret.style.backgroundColor = "#FFCC80"

    score -=2

}

}

for(var n =30; n<54; n++ ){

    ret1 = document.getElementById(n)

    if(ret.value.length == 0 | ret1.value != right[n-30]){

    ret1.style.backgroundColor = "#FFCC80"

    score -=2

}

}

tip = confirm('得分:'+score)

if(tip ==true | tip == false){

    choos = confirm('是否显示错题')

    if(choos == false){

    location.reload()

}

}

}

用js给闺女做了一个加减乘除的html的更多相关文章

  1. 用js，css3 做的一个球

    用css3属性很容易做一个立方体,但是要做一个球体,会相对复杂些 原理是:球可以看做是由无数个圆圈构成,然后就可以用圆圈来做球, 下面的例子是我做的一个小球,由72个圆圈组成.如果把每个圆圈的背景颜色 ...

  2. 基于原生的 html css js php ajax做的一个 web登录和注册系统

    完整代码下载: 百度网盘地址 https://pan.baidu.com/s/1D1gqHSyjgfoOtYCZm7ofJg 提取码 :nf0b 永久有效 注意: 1 如果要正常运行此示例, 本地需要 ...

  3. 第一天学习oc用xcode做的一个加减乘除 圆的面积计算

    #import <Foundation/Foundation.h>  //这是oc的框架 @interface jisuan : NSObject  //申明一个jisuan这样的类 并继 ...

  4. 做了一个图片等比缩放的js

    做了一个图片等比缩放的js 芋头 发布在view:8447   今天改了一下博客的主题,发现博客主题在ie6下变样了,后来发现是因为某篇文章里的某个图片太大了撑开了容器,导致样式错位,前几天公司需求里 ...

  5. 利用Node.js的Net模块实现一个命令行多人聊天室

    1.net模块基本API 要使用Node.js的net模块实现一个命令行聊天室,就必须先了解NET模块的API使用.NET模块API分为两大类:Server和Socket类.工厂方法. Server类 ...

  6. 动手做第一个Chrome插件

    Chrome插件是令人惊讶的简单,一旦你弄懂它的工作和实现原理.它是由一部分HTML,一部分Js,然后混合了一个叫做manifest.json的Json文件组合而成的整体.这意味着你可以使用你最擅长的 ...

  7. 做为一个前端工程师，是往node方面转，还是往HTML5方面转

    文章背景:问题本身来自于知乎,但是我感觉这个问题很典型,有必要把问题在整理一下,重新分享出来. 当看到这个问题之前,我也碰到过很多有同样疑惑的同学,他们都有一个共同的疑问该学php还是nodejs,包 ...

  8. JS入门学习，写一个简单的选项卡

    /* 经过昨天一整天的纠结和摸索.总结下学习初期我最致命的几个问题…… 1.var oDiv = document.getElementById('');    一定要多输,熟悉后o u什么的字母别搞 ...

  9. bootstrap做了一个表格

    花了一下午做了一个表格: 大致是这样: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf ...

随机推荐

  1. Java基础学习之“二维数组”

    一.鄙人对二维数组的理解 二维数组就是由多个数组并列而成 二.举例 1.普通数组(一维数组)的图像格式 2.二维数组的图像格式 代码 1 @Test 2 public void xueXi(){ 3 ...

  2. css写作建议和性能优化小结

    1.前言 还有几天就到国庆中秋了,快要放假了,先祝大家节日快乐!之前写过js的写作建议和技巧,那么今天就来聊聊css吧!说到css,每一个网页都离不开css,但是对于css,很多开发者的想法就是,cs ...

  3. html 5 读取本地文件API

    代码: <input type="file" name="uploadfile" class="J-upload"> <s ...

  4. Amaze UI 模版中心上线丨十几款高质量优秀模版免费提供！

    Amaze UI模版中心终于上线了,目前汇聚了包含企业门户.新闻资讯.管理后台等多个领域的模版,全都可以免费下载. Amaze UI模版中心后续还会增加更多的模版以及领域,请各位持续关注. 模版中心的 ...

  5. WebView的一些简单用法

    一直想写一个关于 WebView 控件的 一些简单运用,都没什么时间,这次也是挤出时间写的,里面的一些基础知识就等有时间再更新讲解一下,今天就先把项目出来做一些简单介绍,过多的内容可以看我的源码,都传 ...

  6. 解决HDFS无法启动namenode，报错Premature EOF from inputStream；Failed to load FSImage file, see error(s) above for more info

    一.情况描述 启动hadoop后发现无法打开hdfs web界面,50070打不开,于是jps发现少了一个namenode: 查看日志信息,发现如下报错: 2022-01-03 23:54:10,99 ...

  7. java中接口到底是干什么的，怎么用，深入剖析

    6.总结性深一层次综合剖析接口概念[新手可忽略不影响继续学习] 通过以上的学习, 我们知道,所有定义在接口中的常量都默认为public.static和final.所有定义在接口中的方法默认为publi ...

  8. mysql在cmd中查询到的汉字乱码问题解决 方法一

    只要执行如上两个 set character_set_connection = gbk; set character_set_results= gbk; 将编码格式转换成gbk即可

  9. EMS已有用户分配邮箱方法

    案例任务:已有域用户"test100",为该用户分配邮箱. 分配邮箱前,使用"get-user"命令确认用户类型.域用户"test100"的 ...

  10. 跳转到下一页面时，必须先勾选阅读xx须知/协议才可跳转功能

    当跳转到新的html页面时,先判断checkbox是否选中,选中-->跳转到新页面:未选中--弹出提示消息(请先同意须知) HTML: 1 <div class="choose& ...