用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 ...

随机推荐

Python - Python函数简介
Streamlit：快速数据可视化界面工具
目录 Streamlit简介 Streamlit使用指南常用命令显示文本显示数据显示图表显示媒体交互组件侧边栏缓存机制 Streamlit使用Hack Streamlit的替代品相关 ...
s函数中积分程序更改
function [sys,x0,str,ts,simStateCompliance] = int_hyo(t,x,u,flag) switch flag, case 0, [sys,x0,str,t ...
PIC16F877A.H头文件详细注释
/* * Header file for the Microchip * PIC 16F873A chip * PIC 16F874A chip * PIC 16F876A chip * PIC 1 ...
CSS:两端对齐原理(text-align:justify)
我是一个小白我是一个小白我是一个小白喷我吧,哈哈写样式的是时候经常会碰到字体两端对齐的效果,一般就网上找端css样式复制下就结束了,没有考虑过原理是啥贴下代码 <head> <me ...
throws子句在继承当中overrride时有什么规则
8.throws子句在继承当中overrride时的规则马克-to-win:当子类方法override父类方法时,throws子句不能引进新的checked异常.换句话说:子类override方法的 ...
数组 indexOf()
众所周知,indexOf()这个方法经常出现在字符串的使用中,也许是用来寻找字符串中某一字符在字符串中的位置,或者也可以用来寻找字符串中重复出现的字符有哪些.对于刚接触 JS 的我们来说,在对数组的操 ...
LC-24
[24. 两两交换链表中的节点](https://leetcode-cn.com/problems/swap-nodes-in-pairs/) 给你一个链表,两两交换其中相邻的节点,并返回交换后链表的 ...
SpringCloud Alibaba入门之Nacos(SCA)
SpringCloud Alibaba Spring Cloud Alibaba 致力于提供微服务开发的一站式解决方案.此项目包含开发分布式应用微服务的必需组件,方便开发者通过 Spring Clo ...
What is ACPI
What is ACPI, OnNow, and PCI Power Management? Microsoft began an initiative called OnNow to shorten ...

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

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

随机推荐

热门专题