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

目录结构

　　　　-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. JVM的基础知识

    一.JVM的基础知识 1.JVM内存结构: 1.JVM堆内存结构: 2.JVM内存分配: 3.Java的堆机构和垃圾回收: 4.Jvm堆内存配置参数: 5.JVM新生代概念和配置: 6.JVM老生代概 ...

  2. （stm32f103学习总结）—输入捕获模式

    一.输入捕获介绍 在定时器中断实验章节中我们介绍了通用定时器具有多种功能,输入捕获就是其中一种.STM32F1 除了基本定时器 TIM6 和 TIM7,其他定时器都具有输入捕获功能.输入捕获可以对输入 ...

  3. 如何将Matlab中“模糊控制设计器”的隶属度函数导出图片（figure）

    如何将Matlab中"模糊控制设计器"的隶属度函数导出图片(figure)详情参考matlab官方帮助手册:plotmf()函数https://www.mathworks.com/ ...

  4. 理解feof与EOF

    feof(feof msdn) feof用于判断文件结尾.头文件<cstdio>.使用方法是feof(fp),fp为指向需要判断的文件的指针.如果不到文件结尾,返回0值:如果是文件结尾,返 ...

  5. Exception Handling Considered Harmful

    异常处理被认为存在缺陷 Do, or do not. There is no try. - Yoda, The Empire Strikes Back (George Lucas) by Jason ...

  6. IDEA安装配置Scala环境

    这里有详细步骤:windows上 IntelliJ IDEA安装scala环境 详细 初学

  7. 关于页面中css某些情况下出现不知原因的隔断解决办法

    第一种方法:body{margin:0px;padding:0px position:absolute; top:0px;left:0px;} html{ width:100%; overflow-x ...

  8. LevelDB 学习笔记1：布隆过滤器

    LevelDB 学习笔记1:布隆过滤器 底层是位数组,初始都是 0 插入时,用 k 个哈希函数对插入的数字做哈希,并用位数组长度取余,将对应位置 1 查找时,做同样的哈希操作,查看这些位的值 如果所有 ...

  9. Java 18 新功能介绍

    文章持续更新,可以关注公众号程序猿阿朗或访问未读代码博客. 本文 Github.com/niumoo/JavaNotes 已经收录,欢迎Star. Java 18 在2022 年 3 月 22 日正式 ...

  10. 一行代码的魅力 -- css

    <template> <div></div> </template> <script> export default { } </sc ...