使用 html,css, js
修改前：之前需求效果以及功能的分析
https://blog.csdn.net/weixin_51249285/article/details/124512827
可以把html，css，JavaScript 代码分三个文件夹写就看起来比较清晰，目前我的习惯是全部写在html中
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>课程相关信息添加title>
<style>
* {
/*Webkit 实现了名为-webkit-font-smoothing的相似属性。这个属性仅在 Mac OS X/macOS 下生效。
Firefox 实现了名为 -moz-osx-font-smoothing 的相似属性。这个属性仅在 Mac OS X / macOS 下生效。*/
-webkit-font-smothing: antialiased; /*抗锯齿，字体清晰。*/
-moz-osx-font-smoothing: grayscale; /*用灰度抗锯齿渲染文本，而不是子像素。从亚像素渲染切换到黑暗背景上的浅色文本的抗锯齿使其看起来更轻。*/
margin: 0;
padding: 0;
box-sizing: border-box;
}
h6 {
display: inline-block;
}
html,
body {
height: 100%;
display: inline-grid;
}
.bg-wrap {
display: flex;
align-items: center;
justify-content: center;
height: auto;
}
.content-wrap {
position: relative;
width: 930px;
padding: 60px 0;
border: 1px solid #ccc;
background: url(./bg.jpg) repeat;
display: flex;
flex-direction: column;
align-items: center;
}
.back {
position: absolute;
left: 10px;
top: 10px;
}
.title {
padding-bottom: 10px;
color: #1e7c1c;
}
.main {
border-radius: 30px;
opacity: 0.5; /*透明度*/
background-color: #fff;
padding: 0px 16px 50px;
}
.course-num {
padding-top: 50px;
}
.course-num h6 {
font-size: 19px;
font-weight: bold;
color: #000;
width: 157px;
}
.course-num input {
width: 260px;
height: 23px;
font-size: 14px;
}
.course-ratio {
display: flex;
margin-top: 27px;
}
.course-ratio h6 {
font-size: 16px;
width: 112px;
min-width: 112px;
line-height: 70px;
}
.course-ratio input {
font-size: 20px;
}
.input-list {
padding-left: 40px;
display: inline-block;
}
.course-number {
margin-top: 36px;
}
.course-number h4 {
font-size: 18px;
font-weight: bold;
display: inline-block;
}
.course-number input {
width: 40px;
height: 28px;
}
.input {
width: 105px;
height: 28px;
border: 1px solid #000;
border-radius: 4px;
margin-bottom: 10px;
}
.btn {
width: 76px;
height: 32px;
border: 1px solid #000;
background: #98ca67;
border-radius: 4px;
cursor: pointer;
}
.mr28 {
margin-right: 10px;
}
.course-add {
display: flex;
flex-direction: column;
}
.handle-btn {
line-height: 70px;
}
.data { /* data 在js里面*/
width: 80px;
display: inline-block;
color: #000;
font-weight: 500;
}
.hold {
line-height: 28px;
display: inline-block;
}
.all {
width: 100%;
text-align: center;
margin: 0 0 0;
}
.tip {
position: absolute;
margin-left: 10px;
line-height: 28px;
}
.red {
color: red;
}
.green {
color: green;
}
style>
head>
<body>
<div class="bg-wrap">
<div class="content-wrap">
<div class="back"><a href="#" class="btn hold" style="text-decoration: none; text-align:center; color: #000;">返回a>div>
<h1 class="title">课程相关信息添加h1>
<div class="main">
<div class="course-num">
<h6>课程目标个数：h6>
<div class="input-list">
<input type="text" class="input" id="targetNum" value="">
div>
<button class="btn" id="targetNumBtn">确定button>
div>
<div id="box">div>
<div class="course-number">
<h4>课程达标分数：h4>
<input type="text" value="">
div>
<div class="all">
<div class="btn hold" id="holdBtn" onclick="holdBtn()">保存div>
div>
<div>
<div style="display: flex; justify-content:center; margin-top: 20px;">
<a href="" class="btn hold" style="text-decoration:none; color: #000; text-align: center;" >下一步a>
div>
div>
div>
div>
div>
<script>
; (function() {
// 获取‘确定’按钮事件
let targetNumBtn = document.getElementById('targetNumBtn');
// 注册 点击事件
targetNumBtn.onclick = function () {
let targetNum = document.getElementById('targetNum').value; // 获取确定按钮事件里面的value值
let courseLength = document
.getElementById('box')
.querySelectorAll('.course-ratio');
let num = Number(targetNum) + Number(courseLength.length); // 这次输入的值 + 上一次保留的值 = 新的一次要渲染的值
if (targetNum == 0) return;
var box = document.getElementById('box'); // 每次输入先清空一遍，在append，避免第一次输入1 ，第二次输入2 ，序列号显示的错误
box.innerHTML = ''
for(let i = 0; i < num; i++){ // num 课程目标个数
var box = document.getElementById('box');
var oDiv = document.createElement('div'); // 添加元素 div
oDiv.classList.add('course-ratio1');
oDiv.innerHTML = `
课程目标${numberToUpperCase(i)}:
数据来源
占比
`
box.appendChild(oDiv);
}
}
let addInput = document.getElementById('addInput');
let deleteInput = document.getElementById('deleteInput');
let courseRatioList1 = document.getElementById('course-ratio-list1'); // 占比列表
let courseRatioList2 = document.getElementById('course-ratio-list2'); // 占比列表
addInput.onclick = function() {
let courseRatioListItem1 = document
.getElementById('course-ratio-list1')
.querySelectorAll('input');
// let courseRetioListItem2 = document
// .getElementById('course-ratio-list2')
// .querySelectorAll('input');
if (courseRatioListItem1.length >= 4) return;
let input1 = documnet.createElement('input'); // 创建input
courseRatioList1.appendChild(input1);
let input2 = documnet.createElement('input'); // 创建input
courseRatioList2.appendChild(input2);
input1.classList.add('input');
input1.classList.add('mr28');
input2.classList.add('input');
input2.classList.add('mr28');
}
deleteInput.onclick = function() {
let courseRatioListItem1 = document
.getElementById('course-ration-list1')
.querySelectorAll('input');
if(courseRatioListItem1.length == 0) return;
courseRatioList.removeChild(
courseRatioListItem1[courseRatioListItem1.length - 1]
)
}
})()
// 保存按钮调用的函数
function holdBtn() {
// getElementsByClassName() 方法返回文档中所有指定类名的元素集合,作为 NodeList 对象。
// NodeList 对象代表一个有顺序的节点列表。NodeList 对象 我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)。提示： 你可以使用 NodeList 对象的 length 属性来确定指定类名的元素个数，并循环各个元素来获取你需要的那个元素。
let list = document.getElementsByClassName('thanInput');
if(list.length == 0) return;
let num = 0;
for(let index = 0; index < list.length; index++) {
const element = list[index];
num += Number(element.value);
}
let all = document.getElementsByClassName('all')[0];
let thisNode = document.getElementsByClassName("tip")[0];
if (thisNode) {
all.removeChild(thisNode);
}
var span = document.createElement('span');
// 创建p
span.classList.add('tip');
if(num == 1 || num == 0.9999999999999999) { // 此处num指的所有有效占比值的和
span.classList.add('green');
} else {
span.classList.add('red');
}
span.innerHTML = num == 1 || num == 0.9999999999999999 ? '占比和为1' : '占比和不为1'
all.appendChild(span);
}
function delCourseInput(obj) {
// obj 删除按钮 父元素是handle-btn 在父元素是 course-ratio
let i=objParentNode = obj.parentNode.parentNode; // 父元素的父元素
let objParentNodeList = objParentNode.getElementsByClassName('course-add')[0];
let list1 = objParentNodeList.getElementsByClassName('list1')[0]; // 获取占比元素
let list2 = objParentNodeList.getElementsByClassName('list2')[0]; // 获取数据来源元素
let course1 = list1
.getElementsByClassName('input-list')[0]
.querySelectorAll('input'); // 获取全部的input
let course2 = list2
.getElementsByClassName('input-list')[0]
.querySelectorAll('input'); // 获取全部的input
let courselist1 = list1.getElementsByClassName('input-list')[0]; // 获取input的父元素
let courselist2 = list2.getElementsByClassName('input-list')[0]; // 获取input的父元素
if(list1.length == 0) return;
courselist1.removeChild(course1[course1.length - 1]);
courselist2.removeChild(course2[course2.length - 1]);
}
function addCourseInput(obj) {
// obj是删除按钮 父元素是handle-btn 在父元素是 course-rati
let objParentNode = obj.parentNode.parentNode // 父元素的父元素
let objParentNodeList = objParentNode. getElementsByClassName('course-add')[0]
let list1 = objParentNodeList
.getElementsByClassName('list1')[0] // 获取占比元素
let list2 = objParentNodeList
.getElementsByClassName('list2')[0] // 获取数据来源元素
let course1 = list1
.getElementsByClassName('input-list')[0]
.querySelectorAll('input') // 获取全部的input
let courselist1 = list1.getElementsByClassName('input-list')[0] // 获取input的父元素
let courselist2 = list2.getElementsByClassName('input-list')[0] // 获取input的父元素
if (course1.length >= 4) return
let input1 = document.createElement('input') // 创建input
let input2 = document.createElement('input') // 创建input
courselist1.appendChild(input1)
courselist2.appendChild(input2)
input1.classList.add('input')
input1.classList.add('mr28')
input2.classList.add('input')
input2.classList.add('mr28')
input2.classList.add('thanInput')
}
// 1 转大写 一 类似。。。
function numberToUpperCase(textIndex) {
let newString = '';
let newTextIndex = textIndex + 1 + '';
function sum(value, index) {
var newValue = '';
if(textIndex === 9) {
return !index ? '十' : '';
}
let isSeat = ~~textIndex > 9 && ~~textIndex < 19;
switch (~~value) {
case 1:
newValue = !index ? (isSeat ? '' : '一') : '十一';
break;
case 2:
newValue = !index ? (isSeat ? '' : '二') : '十二';
break;
case 3:
newValue = !index ? (isSeat ? '' : '三') : '十三';
break;
case 4:
newValue = !index ? (isSeat ? '' : '四') : '十四';
break;
case 5:
newValue = !index ? (isSeat ? '' : '五') : '十五';
break;
case 6:
newValue = !index ? (isSeat ? '' : '六') : '十六';
break;
case 7:
newValue = !index ? (isSeat ? '' : '七') : '十七';
break;
case 8:
newValue = !index ? (isSeat ? '' : '八') : '十八';
break;
case 9:
newValue = !index ? (isSeat ? '' : '九') : '十九';
break;
case 0:
newValue = '十';
break;
default:
break;
}
}
}
script>
body>
html>
效果：
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）