js小学生数学作业生成器代码（原生js）

最新推荐文章于 2022-07-18 20:26:24 发布
最新推荐文章于 2022-07-18 20:26:24 发布
阅读量2.5k 收藏 3
点赞数 1
分类专栏： javascript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_49569569/article/details/124306042
版权

HTML

<div style="margin-top:10vh;">
    <div class="ming">
        <span></span>月
        <span></span>日
        <s></s>姓名:<span></span>

    </div>
    <div class="ming">
        <span></span>分
        <span></span>秒
        <s></s>班级:<span></span>
    </div>
</div>

<div class="这是100内加减法-标题">
    100内加减法<br> //
</div>
<div class="这是100内加减法-内容" id="is100+-">


</div>


<div class="这是100以内竖式计算-标题">
    这是100以内竖式计算<br> //
</div>
<div class="这是100以内竖式计算-内容" id="is100ss">


</div>

CSS

.ming {
	width:70vw;
	height:7.5vh;
	margin:0 auto;
	text-align:right;
	line-height:7.5vh;
	font-size:2.5vh;
	font-weight:700;
}
.ming>span {
	display:inline-block;
	width:8%;
	height:1%;
	background:black;
}
.ming>s {
	margin-left:2vw;
}
.这是100内加减法-标题,.这是100以内竖式计算-标题 {
	width:70vw;
	height:10vh;
	margin:5vh auto 0 auto;
	font-size:3vh;
	font-weight:700;
}
.这是100内加减法-内容,.这是100以内竖式计算-内容 {
	width:70vw;
	margin:0 auto;
	font-size:3vh;
	font-weight:700;
}
.这是100内加减法-内容>div,.这是100以内竖式计算-内容>div {
	display:flex;
	justify-content:space-between;
	line-height:10vh
}
.这是100内加减法-内容>div>div,.这是100以内竖式计算-内容>div>div {
	display:inline-block;
}
.这是100内加减法-内容>div>div:nth-child(5) {
	margin-right:5vw;
}
.这是100以内竖式计算-内容>div>div {
	line-height:5vh;
	width:20%;
	height:25vh;
	text-align:right;
	letter-spacing:1.5vw;
}
.这是100以内竖式计算-内容>div>div>div:nth-child(2) {
	border-bottom:2px solid black;
}
.竖式计算结果 {
	width:100%;
	height:5vh;
	letter-spacing:0px;
}
.竖式计算结果>div {
	width:20%;
	height:100%;
	border:1px solid black;
	display:inline-block;
	margin-top:.5vh;
}

js

window.onload = function() {
    var zzjjcc = "";
    var jjcc = "";

    var zzss = "";
    var ss = "";

    for (var i = 1; i <= 20; i++) {
        var jie = (Math.random() * (5 - 1) + 1) >> 0;
        switch (jie) {
            case 1:
                jie = "  +  ";
                break;
            case 2:
                jie = "  -  ";
                break;
            case 3:
                jie = "  *  ";
                break;
            case 4:
                jie = "  /  ";
                break;

        }
        jjcc += "<div>" + ((Math.random() * (100 - 1) + 1) >> 0).toString() + jie + ((Math.random() * (100 - 1) + 1) >> 0).toString() + "  =" + "</div>";
        ss += "<div><div>" + ((Math.random() * (100 - 1) + 1) >> 0).toString() + "</div><div>" + jie + ((Math.random() * (100 - 1) + 1) >> 0).toString() + "</div><div class='竖式计算结果'><div></div><div></div><div></div><div></div></div></div>"
        if (i % 5 == 0) {
            zzjjcc += "<div>" + jjcc + "</div>"
            jjcc = "";
        }
        if (i % 4 == 0) {
            zzss += "<div>" + ss + "</div>"
            ss = "";
        }
    }
    document.getElementById("is100+-").innerHTML += zzjjcc;
    document.getElementById("is100ss").innerHTML += zzss;


}

总结起来代码就是：

<div style="margin-top:10vh;">
    <div class="ming">
        <span></span>月
        <span></span>日
        <s></s>姓名:<span></span>

    </div>
    <div class="ming">
        <span></span>分
        <span></span>秒
        <s></s>班级:<span></span>
    </div>
</div>

<div class="这是100内加减法-标题">
    100内加减法<br> //
</div>
<div class="这是100内加减法-内容" id="is100+-">


</div>


<div class="这是100以内竖式计算-标题">
    这是100以内竖式计算<br> //
</div>
<div class="这是100以内竖式计算-内容" id="is100ss">
</div>


.ming {
	width:70vw;
	height:7.5vh;
	margin:0 auto;
	text-align:right;
	line-height:7.5vh;
	font-size:2.5vh;
	font-weight:700;
}
.ming>span {
	display:inline-block;
	width:8%;
	height:1%;
	background:black;
}
.ming>s {
	margin-left:2vw;
}
.这是100内加减法-标题,.这是100以内竖式计算-标题 {
	width:70vw;
	height:10vh;
	margin:5vh auto 0 auto;
	font-size:3vh;
	font-weight:700;
}
.这是100内加减法-内容,.这是100以内竖式计算-内容 {
	width:70vw;
	margin:0 auto;
	font-size:3vh;
	font-weight:700;
}
.这是100内加减法-内容>div,.这是100以内竖式计算-内容>div {
	display:flex;
	justify-content:space-between;
	line-height:10vh
}
.这是100内加减法-内容>div>div,.这是100以内竖式计算-内容>div>div {
	display:inline-block;
}
.这是100内加减法-内容>div>div:nth-child(5) {
	margin-right:5vw;
}
.这是100以内竖式计算-内容>div>div {
	line-height:5vh;
	width:20%;
	height:25vh;
	text-align:right;
	letter-spacing:1.5vw;
}
.这是100以内竖式计算-内容>div>div>div:nth-child(2) {
	border-bottom:2px solid black;
}
.竖式计算结果 {
	width:100%;
	height:5vh;
	letter-spacing:0px;
}
.竖式计算结果>div {
	width:20%;
	height:100%;
	border:1px solid black;
	display:inline-block;
	margin-top:.5vh;
}

window.onload = function() {
    var zzjjcc = "";
    var jjcc = "";

    var zzss = "";
    var ss = "";

    for (var i = 1; i <= 20; i++) {
        var jie = (Math.random() * (5 - 1) + 1) >> 0;
        switch (jie) {
            case 1:
                jie = "  +  ";
                break;
            case 2:
                jie = "  -  ";
                break;
            case 3:
                jie = "  *  ";
                break;
            case 4:
                jie = "  /  ";
                break;

        }
        jjcc += "<div>" + ((Math.random() * (100 - 1) + 1) >> 0).toString() + jie + ((Math.random() * (100 - 1) + 1) >> 0).toString() + "  =" + "</div>";
        ss += "<div><div>" + ((Math.random() * (100 - 1) + 1) >> 0).toString() + "</div><div>" + jie + ((Math.random() * (100 - 1) + 1) >> 0).toString() + "</div><div class='竖式计算结果'><div></div><div></div><div></div><div></div></div></div>"
        if (i % 5 == 0) {
            zzjjcc += "<div>" + jjcc + "</div>"
            jjcc = "";
        }
        if (i % 4 == 0) {
            zzss += "<div>" + ss + "</div>"
            ss = "";
        }
    }
    document.getElementById("is100+-").innerHTML += zzjjcc;
    document.getElementById("is100ss").innerHTML += zzss;


}

Wzh小吴
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
js小学生图区_js读取本地图片并显示
weixin_31754149的博客
12-29 5836
版权声明：本文为博主原创文章，未经博主允许不得转载。根据项目需要，需要选择本地图片并显示在页面上，然后上传至服务器。因为自身刚刚接触js,所以比较生疏，碰到问题吼，幸好有强大的网络，搜索很多有用的资源，现在将js读取本地图片并显示的代码总结一下，供大家使用，并给自己一个记录。第一种方法：//图片显示插件(function ($) {$.imageFileVisible = function (op...
小学生数学测试系统(js实现)
weixin_45055194的博客
02-27 2193
闲余时间,使用js做了一个套小学数学测试系统;比较适合刚入门的新手,加深对各个方法的使用,以及对数据类型、做数据比较时数据类型的理解。 **基本功能：** 1. 每次点击开始，刷新测试题目； 2. 对所有测试题计算出答案，和用户输入的答案做对比；这是整个系统的核心，需要对数据类型，数据运算，字符串操作，元素操作有比较熟悉的运用！ 3. 用户提交以后，给出测试结果！ ...
小学四则运算练习（JavaScript版）
Cream_Cicilian的博客
04-02 2437
使用语言：JavaScript需求分析：程序可接收一个输入参数n，然后随机产生n道加减乘除（分别使用符号+-*÷来表示）练习题，每个数字在 0 和 100 之间，运算符在3个到5个之间 每个练习题至少要包含2种运算符。不能存在分数、负数与非整数。 练习题生成好后，将你的学号与生成的n道练习题及其对应的正确答案输出到文件“result.txt”中，不要输出额外信息，文件目录与程序目录一致功能设计：
使用原生js，写了一个心算口算天天练
qq_45503103的博客
11-11 678
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
js随机数学加法计算答题代码
06-11
这是一款非常简单的js随机数学加法计算答题代码，加法算术题求和运算代码，把问题答案填到文本框中点击确定按钮进入下一题，自动判断答案对错。
基于SpringBoot的代码生成器设计源码
最新发布
04-04
本设计源码提供了一个基于SpringBoot的代码生成器。项目包含1001个文件，主要使用Java编程语言，并包含了JavaScript、HTML和CSS。文件类型包括271个JavaScript脚本文件、207个Java源代码文件、126个HTML页面文件、96...
原生Android代码生成器
01-22
Android代码生成器，原生安卓代码生成器
promise和co搭配生成器函数方式解决js代码异步流程的比较
12-10
在es6中引入的原生Promise为js的异步回调问题带来了一个新的解决方式，而TJ大神写的co模块搭配Generator函数的同步写法，更是将js的异步回调带了更优雅的写法。 今天我想对比一下这两种方式，来看看这两种方式的区别...
原生js生成二维码（完美可用）
07-06
独立的js引用文件，源码和min.js文件。含index.html的demo测试文件，只需引用一个方法即可生成二维码。通俗易懂。
原生 JS Ajax,GET和POST 请求实例代码
11-25
javascript/js的ajax的GET请求代码如下所示： [removed] /* 创建 XMLHttpRequest 对象 */ var xmlHttp; function GetXmlHttpObject(){ 　if (window.XMLHttpRequest){ 　// code for IE7+, Firefox, Chrome, Opera...
js代码-随机列出100道100以内的加减数学题
07-15
js代码-随机列出100道100以内的加减数学题
homework-generator:自动为小学生生成作业
05-27
小学作业生成器 自动生成小学生家庭作业 基本使用 编辑配置 使用文本编辑器打开config/config.js，根据实际需要修改其中的配置参数即可。 默认配置为上海小学一年级上的内容。 生成作业 使用浏览器打开main.html，输入各模块所需要的题数后单击相应的生成按钮，即可生成作业题供打印使用。 新模块开发指南 在配置文件中添加模块 打开config/config.js，将模块信息加入其中，范例如下： "sample_module": { // 模块名称 "description": "Sample Module", // 模块说明 "enabled": 1, // 启用状态：1 - 启用；2 - 禁用 "sequence": 10, /
JavaScript大数相加相乘的实现方法实例
01-18
前言 JavaScript 中的最大安全整数是 2 ^{53} – 1 ，即 9007199254740991，当我们进行超出这个范围的数值计算的时候就无法得到精确的值，而是一个近似值，比如我们计算 9007199254740991 + 10 得到的结果是 9007199254741000。本文讲一下如何利用字符串在 JavaScript 中实现大数相加相乘。 相加 用字符串实现相加相乘基本思路就是按照我们在纸上进行竖式运算一样。对于加法，我们需要将两个数 num1 和 num2 上下对齐，然后从个位开始计算两个数对应位的和，循环到最高位，将每一次运算的结果保存到一个数组 result 中去，
javascript 实现在网页上生成自定义数量和范围的加减法口算题 剔重 验证 显示答案
01-17
使用JavaScript在网页上生成自定义数量和范围的口算题，使用随机数来选择加减法，不会出现负数答案，不会出现重复题目，输入答案后可以验证答案正误或没做
Javascript写的小学数学出题练习
07-02
Javascript写的小学数学出题练习
小学生计算题生成器的python实现
shyboyok的专栏
08-21 3221
闺女上小学，计算题总觉得有问题，想提供些题目给她练练，家里也有打印机，就做一个吧。 import random, os import PySimpleGUI as sg from docx import Document from docx.shared import RGBColor, Pt, Mm, Inches from docx.enum.text import WD_ALIGN_PARAGRAPH from docx.oxml.ns import qn ''' 该程序产生口算题doc文件：
HTML+CSS+JS实现小学四则运算自动出题程序
matafeiyanll的博客
07-01 3413
HTML+CSS+JS实现小学四则运算自动出题程序 要求 编写一个小学四则运算自动出题程序 要求： 1、100以内四则运算，题目自动生成； 2、页面需要有计算结果输入框，提交按钮； 3、用户提交结果之后系统能自动计算成绩； 4、系统能提示用户答错的题号，可以在答错的题号后做一个标记。 代码 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></tit
echarts 一个dom重复生成图表
Weather_的博客
09-18 739
清空之前的图表 var myChart = null; document.getElementById(name).innerHTML = ""; document.getElementById(name).removeAttribute("_echarts_instance_"); myChart = echarts.init(document.getElementById(name));
JavaScript实现计算器
wangshiyi13的博客
07-18 5304
使用JavaScript编写了一个简易的计算器，基本与手机计算器一致。
原生js使用@paddlejs-models/facedetect cdn 进行人脸检测 并生成代码
07-17
要在原生 JavaScript 中使用 `@paddlejs-models/facedetect` 的 CDN 进行人脸检测，你可以按照以下步骤操作： 1. 在你的 HTML 文件中引入 `@paddlejs-models/facedetect` 的 CDN。你可以在 `<head>` 标签中添加以下...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Wzh小吴

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值