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

目录结构

　　　　-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. vmware 磁盘清理---还原虚拟机硬盘大小

    linux host: 1.使用dd命令将客户机未使用的磁盘空间用0填满 cat /dev/zero > zero.fill;sync;sleep 1;sync;rm -f zero.fill ...

  2. Numpy的数学统计函数

    Numpy的数学统计函数 本节内容: 1.Numpy有哪些数学统计函数: 函数名 说明 np.sum 所有元素的和 np.prod 所有元素的乘积 np.cumsum 元素的累积加和 np.cumpr ...

  3. 开源HTML5游戏引擎Kiwi.js 1.0正式发布

    Kiwi.js是由GameLab开发的一款全新的开源HTML5 JavaScript游戏引擎.在经过一年多的开发和测试之后,终于在日前正式发布了Kiwi.js 1.0版本. 其创始人Dan Milwa ...

  4. <img> 标签 图片加载失败时候处理方案

    应用场景 在开发中,经常遇到一种情况,数据库不存在图片地址,或者存在图片地址,但图片已经被删除,这个时候会出现加载失败情况.提供以下解决方案 解决方案 在 img 标签 加上onerror=" ...

  5. python正则表达式替换或去除指定字符

    代码: import re regEx = "[\n""|]" # 去除字符串中的换行符.中文冒号.|,需要去除什么字符就在里面写什么字符 str= re.su ...

  6. 利用es6解构赋值快速提取JSON数据；

    直接上代码 { let JSONData = { title:'abc', test:[ { nums:5, name:'jobs' }, { nums:11, name:'bill' } ] } l ...

  7. C++---条件结构和循环结构

    条件结构 if结构 #include <iostream> using namespace std; int main() { //判断用户输入的字符是否是合法的硬盘盘符A-Z char ...

  8. Power App用到的一些函数

    1.Filter([表名],查询条件&&查询条件),会返回一张表: 2.Search([表名], "值", "字段名"),会返回一张表: 3.L ...

  9. 【分享汇总】25个主题分享，360°领略OpenHarmony最新技术版图

    2021年10月,开放原子开源基金会旗下开源项目 OpenAtom OpenHarmony (以下简称"OpenHarmony") 应邀参加华为2021 HDC 开发者大会,并组织 ...

  10. pgpool-II 4.3 中文手册-前言

    什么是 Pgpool-II? Pgpool II 管理一个 PostgreSQL 服务器池,以实现单个 PostgreSQL 安装无法实现的一些功能.这些功能包括: 高可用 Pgpool-II 通过使 ...