用js给闺女做了一个加减乘除的html

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

目录结构

　　　　-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的更多相关文章

用js，css3 做的一个球
用css3属性很容易做一个立方体,但是要做一个球体,会相对复杂些原理是:球可以看做是由无数个圆圈构成,然后就可以用圆圈来做球, 下面的例子是我做的一个小球,由72个圆圈组成.如果把每个圆圈的背景颜色 ...
基于原生的 html css js php ajax做的一个 web登录和注册系统
完整代码下载: 百度网盘地址 https://pan.baidu.com/s/1D1gqHSyjgfoOtYCZm7ofJg 提取码 :nf0b 永久有效注意: 1 如果要正常运行此示例, 本地需要 ...
第一天学习oc用xcode做的一个加减乘除圆的面积计算
#import <Foundation/Foundation.h> //这是oc的框架 @interface jisuan : NSObject //申明一个jisuan这样的类并继 ...
做了一个图片等比缩放的js
做了一个图片等比缩放的js 芋头发布在view:8447 今天改了一下博客的主题,发现博客主题在ie6下变样了,后来发现是因为某篇文章里的某个图片太大了撑开了容器,导致样式错位,前几天公司需求里 ...
利用Node.js的Net模块实现一个命令行多人聊天室
1.net模块基本API 要使用Node.js的net模块实现一个命令行聊天室,就必须先了解NET模块的API使用.NET模块API分为两大类:Server和Socket类.工厂方法. Server类 ...
动手做第一个Chrome插件
Chrome插件是令人惊讶的简单,一旦你弄懂它的工作和实现原理.它是由一部分HTML,一部分Js,然后混合了一个叫做manifest.json的Json文件组合而成的整体.这意味着你可以使用你最擅长的 ...
做为一个前端工程师，是往node方面转，还是往HTML5方面转
文章背景:问题本身来自于知乎,但是我感觉这个问题很典型,有必要把问题在整理一下,重新分享出来. 当看到这个问题之前,我也碰到过很多有同样疑惑的同学,他们都有一个共同的疑问该学php还是nodejs,包 ...
JS入门学习，写一个简单的选项卡
/* 经过昨天一整天的纠结和摸索.总结下学习初期我最致命的几个问题…… 1.var oDiv = document.getElementById(''); 一定要多输,熟悉后o u什么的字母别搞 ...
bootstrap做了一个表格
花了一下午做了一个表格: 大致是这样: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf ...

随机推荐

【leetcode 29】两数相除（中等）
题目描述给定两个整数,被除数 dividend 和除数 divisor.将两数相除,要求不使用乘法.除法和 mod 运算符. 返回被除数 dividend 除以除数 divisor 得到的商. 整数 ...
一道关于压缩包的ctf题目(包括暴力破解，明文攻击，伪加密)
关于题目附件链接:https://pan.baidu.com/s/1PRshlizSndkgxkslnqJrHA 提取码:p76e zip三连击下载附件得到题目手机号码一般是11位,那么我们设置 ...
小程序中引入iconfont
注释:本人喜欢 font class, 你们可以依葫芦画瓢unicode和 symbol,,下面是 font class 演示: 1.选择好图标,然后: font class 2.步骤二: 复制 ...
CRLF 漏洞学习和工具使用
原理 CRLF 指的是回车符(CR,ASCII 13,\r,%0d) 和换行符(LF,ASCII 10,\n,%0a),操作系统就是根据这个标识来进行换行的.但是如果对输入过滤不严,就会将恶意语句注入 ...
Bugku的exec执行绕过
题目思路 1. 打开网页显示403 2. 回去看题目有提示 3. 不用多说,网页访问. 4. 第一行说要传个参数ip,试一下get传参?ip=127.0.0.1 5. 试下 ① 算术运算符 & ...
使用nmtui命令解决network-scripts目录下无网卡对应配置文件问题
//网卡通过命令ifconfig可以识别到,但是在配置文件目录下,没有该文件,一旦重启等配置了该地址的应用则可能会出现问题所以需要重新生成对应配置文件,我首先想到的就是用 nmtui 这个程序来重新生 ...
Hyperledger Fabric的test-network启动过程Bash源码详解
前言在基于Debian搭建Hyperledger Fabric 2.4开发环境及运行简单案例中,我们已经完成了Fabric 2.4的环境搭建及fabric-samples/test-network官 ...
linux mysql导入导出sql文件
导出导出单独数据库:mysqldump -uroot -p 数据库名 > 数据库名.sql 例:mysqldump -uroot -p database1 > database1.sql ...
1.Docker容器学习之新生入门必备基础知识
0x00 Docker 快速入门 1.基础介绍描述:Docker [ˈdɑ:kə(r)] 是一个基于Go语言开发实现的遵循Apache 2.0协议开源项目,目标是实现轻量级的操作系统虚拟化解决方案: ...
1.Markdown语法
Markdown学习一.标题:(# +标题名字) 标题三级标题四级标题二.字体 (空格内容前后的空格删掉) Hello,World! **粗体** Hello,World! *斜体* Hell ...

用js给闺女做了一个加减乘除的html

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

随机推荐

热门专题