<!DOCTYPE html>
|
<html lang="en">
|
<head>
|
<meta charset="UTF-8">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<title>Document</title>
|
</head>
|
<style>
|
*{
|
margin: 0;
|
padding: 0;
|
border: 0;
|
}
|
.box_none{
|
width: 100%;
|
height: 100px;
|
float: left;
|
}
|
.box1{
|
width: 100%;
|
clear: both;
|
overflow: hidden;
|
}
|
.box2{
|
/* background-color: rgb(167, 248, 248); */
|
float: left;
|
/* border: 0.5px solid black; */
|
/* margin: 0 10px; */
|
padding: 55.7px 0px 55.7px 40.4px;
|
position: relative;
|
}
|
.left_box{
|
margin-right: 10px;
|
}
|
.right_box{
|
margin-left: 10px;
|
}
|
.box3{
|
float: left;
|
margin: 35px 10px;
|
}
|
.box4{
|
/* background-color: #555555; */
|
float: left;
|
margin: 35px 10px -20px;
|
width: 380px;
|
height: 277px;
|
overflow: hidden;
|
}
|
.box5{
|
position: relative;
|
height: 75px;
|
line-height: 70px;
|
/* font-size: 60px; */
|
text-align: center;
|
}
|
.box6{
|
background-image: url('./image/mizige2.jpg');
|
/* background-position: ; */
|
background-size: 170px 190px;
|
font-size: 140px;
|
text-align: center;
|
height: 190px;
|
width: 170px;
|
position: relative;
|
font-family: '华文楷体';
|
z-index: 2;
|
overflow: hidden;
|
}
|
.hanzi{
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
margin: auto;
|
transform: translateX(-50%) translateY(-50%);
|
}
|
/* .box6::before{
|
content: "";
|
position: absolute;
|
left: 2px;
|
top: -2px;
|
width: 100%;
|
height: 100px;
|
box-sizing: border-box;
|
border-bottom: 0.5px dashed black;
|
transform-origin: bottom center;
|
transform: rotateZ(48.4deg) scale(1.5);
|
}
|
.box6::after{
|
content: "";
|
position: absolute;
|
z-index: -1;
|
left: 2px;
|
top: -8px;
|
width: 100%;
|
height: 100px;
|
box-sizing: border-box;
|
border-bottom: 0.1px dashed black;
|
transform-origin: bottom center;
|
transform: rotateZ(132deg) scale(1.5);
|
} */
|
.box6{
|
border-top: 2px;
|
border-left: 4px;
|
border-bottom: 4px;
|
border-right: 4px;
|
border-color: rgb(44,63,123);
|
border-style: solid;
|
}
|
.box5{
|
font-family: "冬青黑体简体中文";
|
border-top: 4px;
|
border-left: 4px;
|
border-bottom: 2px;
|
border-right: 4px;
|
border-color: rgb(44,63,123);
|
border-style: solid;
|
}
|
p{
|
font-size: 30px;
|
text-align: center;
|
height: 30px;
|
line-height: 30px;
|
width: 280px;
|
white-space: break-word;
|
}
|
.box4 p{
|
width: 98%;
|
margin: 3px 4px 30px;
|
border-radius: 23px;
|
|
/* padding: 0 10px; */
|
font-family: "华文楷体";
|
height: 45px;
|
text-align: center;
|
line-height: 45px;
|
font-size: 38px;
|
font-weight: bold;
|
white-space: nowrap;
|
}
|
.info{
|
position: absolute;
|
font-family: "圆体-简";
|
font-size: 20px;
|
width: 178px;
|
margin: 0;
|
bottom: 60px;
|
display: flex;
|
/* color: white; */
|
justify-content: space-between;
|
}
|
.info span{
|
margin: 0 5px;
|
}
|
.block{
|
display: inline-block;
|
width: 15px;
|
}
|
.box3,.box4 p{
|
background-color: white;
|
}
|
.image_div{
|
text-align: right;
|
}
|
.image_div_right{
|
text-align: left;
|
}
|
img{
|
opacity: 0;
|
width: 100px;
|
height: 100px;
|
}
|
.img_fake_box{
|
opacity: 0;
|
width: 100px;
|
height: 100px;
|
}
|
#long_font{
|
font-size: 44px;
|
}
|
#font_long{
|
font-size: 20px;
|
}
|
#end_id{
|
font-size: 10px;
|
}
|
#dun{
|
font-size: 14px;
|
}
|
.heng{
|
border-bottom:0.5px dashed black;
|
position: absolute;
|
margin: 0;
|
width: 100%;
|
top: 50%;
|
}
|
.shu{
|
border-bottom:0.5px dashed black;
|
position: absolute;
|
margin: 0;
|
width: 190px;
|
top: 50%;
|
left: -7%;
|
transform: rotateZ(90deg);
|
}
|
.heng1,.heng2{
|
position: absolute;
|
left: 0;
|
}
|
.box5::before,
|
.box5::after {
|
content: ""; /* 伪元素需要内容属性，即使它是空的 */
|
position: absolute; /* 伪元素相对于包含块定位 */
|
border-bottom: 0.3px dashed #555555; /* 设置横线样式 */
|
width: 100%; /* 横线宽度与div相同 */
|
}
|
|
.box5::before {
|
top: 35%; /* 第一条横线位于高度33%处 */
|
left: 0;
|
}
|
|
.box5::after {
|
top: 67%; /* 第二条横线位于高度66%处 */
|
left: 0;
|
}
|
.yema_box{
|
font-family: "圆体-简";
|
width: 50px;
|
height: 50px;
|
background-color: white;
|
position: absolute;
|
bottom: 10px;
|
border-radius: 50%;
|
/* text-align: center; */
|
line-height: 50px;
|
font-size: 20px;
|
text-align: center;
|
font-weight: 700;
|
}
|
.yema_left{
|
|
right: -25px;
|
background-color: rgb(16, 149, 126);
|
color: black;
|
}
|
.yema_right{
|
left: -25px;
|
background-color: rgb(16, 149, 126);
|
color: black;
|
}
|
|
.circle_box{
|
width: 100%;
|
position: absolute;
|
top: 0;
|
|
}
|
.title_box{
|
width: 255%;
|
position: absolute;
|
top: 0;
|
overflow: hidden;
|
right: -50px;
|
height: 50px;
|
}
|
.circle_box{
|
left: 30px;
|
}
|
|
.circle_box>div{
|
position: relative;
|
z-index: 1;
|
float: left;
|
width: 95px;
|
height: 95px;
|
border-radius: 50%;
|
right:-20px
|
}
|
.title_box>div{
|
position: relative;
|
top: -100%;
|
z-index: 1;
|
float: right;
|
width: 100px;
|
height: 100px;
|
border-radius: 50%;
|
}
|
/* .circle_box :nth-child(odd),.title_box :nth-child(even) {
|
background-color: #d130c4;
|
}
|
.circle_box :nth-child(even),.title_box :nth-child(odd) {
|
background-color: #f7b6e9;
|
} */
|
.title_box .title{
|
overflow: hidden;
|
position: absolute;
|
top: -50%;
|
left: 47%;
|
width: 380px;
|
height: 70px;
|
background-color: rgb(158, 178, 200);
|
text-align: center;
|
z-index: 0;
|
color: black;
|
line-height: 18px;
|
}
|
#sp{
|
float: right;
|
z-index: 1;
|
}
|
.title_box .title span{
|
color: white;
|
font-family: "圆体-简";
|
font-weight: bold;
|
display: block;
|
width: 100%;
|
font-size: 20px;
|
position: absolute;
|
bottom: 10px;
|
left: 50%;
|
transform: translateX(-50%);
|
/* background-color: white; */
|
}
|
</style>
|
<body>
|
<div id="word_box" class="box1">
|
|
</div>
|
|
</body>
|
<script src="all_json.js"></script>
|
<script>
|
var box = document.getElementById('word_box')
|
var pinyin_id = ''
|
var pinyin_end = ''
|
var word_color
|
var end_color = ''
|
var circle_1_color = ''
|
var circle_2_color = ''
|
// 顶部半圆形背景色
|
var circle2 = ['rgb(158,178,200)','rgb(224,236,239)']
|
// 每三页字格颜色循环一次
|
var color_arr_3 = ["rgb(96,180,157)","rgb(220,223,58)","rgb(221,128,171)","rgb(230,157,60)","rgb(153,127,179)","rgb(233,179,202)","rgb(131,185,72)","rgb(96,183,188)"]
|
function padNumber(number, length) {
|
const stringNumber = number.toString(); // 将数字转为字符串
|
return stringNumber.padStart(length, '0'); // 使用'0'填充到指定长度
|
}
|
function rgbToHex(rgb) {
|
let r = rgb[0].toString(16).padStart(2, '0');
|
let g = rgb[1].toString(16).padStart(2, '0');
|
let b = rgb[2].toString(16).padStart(2, '0');
|
return `#${r}${g}${b}`;
|
}
|
function replaceChars(str, replacements) {
|
// 使用reduce来遍历字符串中的每个字符，并应用替换规则
|
return str.split('').reduce((acc, char) => {
|
// 检查当前字符是否在替换规则中
|
const replacement = replacements[char];
|
// 如果有替换规则，则使用替换后的字符；否则，使用原字符
|
return acc + (replacement ? replacement : char);
|
}, '');
|
}
|
|
// console.log(all_4000_json2)
|
for(let i =0;i<1000;i++){
|
// 根据页数设置半圆背景颜色
|
if(i%24==8||i%24==16||i%24==0){
|
circle_1_color = circle2[1]
|
circle_2_color = circle2[0]
|
}
|
const replacements = {' ':' '}
|
//每页顶部半圆和标题
|
let circle_div =
|
`<div class="circle_box">
|
<div style="background-color:${circle_1_color}"></div>
|
<div style="background-color:${circle_2_color}"></div>
|
<div style="background-color:${circle_1_color}"></div>
|
<div style="background-color:${circle_2_color}"></div>
|
<div style="background-color:${circle_1_color}"></div>
|
<div style="background-color:${circle_2_color}"></div>
|
</div>`
|
let title_box =
|
`<div class="title_box">
|
<div style="background-color:${circle_1_color}"></div>
|
<div style="background-color:${circle_2_color}"></div>
|
<div style="background-color:${circle_1_color}"></div>
|
<div style="background-color:${circle_2_color}"></div>
|
<div style="background-color:${circle_1_color}"></div>
|
<div style="width:350px;"></div>
|
<div class="title"><span>第四册     配套词语训练</span></div>
|
<div style="background-color:${circle_1_color}"></div>
|
<div style="background-color:${circle_2_color}"></div>
|
<div style="background-color:${circle_1_color}"></div>
|
<div style="background-color:${circle_2_color}"></div>
|
<div style="background-color:${circle_1_color}"></div>
|
</div>`
|
let color_index = color_arr_3.length
|
|
pinyin_end = `${all_4000_json2[i+3000]['pinyin']}`
|
let chengyu1 = ''
|
let chengyu2 = ''
|
if(all_4000_json2[i+3000]['chengyu'] != undefined){
|
if(all_4000_json2[i+3000]['chengyu'].length>9){
|
chengyu1 = all_4000_json2[i+3000]['chengyu'].slice(0,9)
|
chengyu2 = all_4000_json2[i+3000]['chengyu'].slice(10)
|
}else{
|
chengyu1 = all_4000_json2[i+3000]['chengyu']
|
}
|
}
|
console.log(chengyu1,"dddddddd",chengyu2)
|
//根据级别更改字的颜色
|
if(all_4000_json2[i+3000].level == '一级'){
|
word_color = 'red'
|
}else if(all_4000_json2[i+3000].level == '二级'){
|
word_color = 'blue'
|
}else if(all_4000_json2[i+3000].level == '三级'){
|
word_color = 'green'
|
}else{
|
word_color = 'black'
|
}
|
|
// 根据拼音长度来设置字体大小
|
if(pinyin_end.length>15){
|
pinyin_id = 'font_long'
|
}else if(pinyin_end.length<=15&&pinyin_end.length>6){
|
pinyin_id = 'end_id'
|
}else{
|
pinyin_id = 'long_font'
|
}
|
|
|
|
//创建每个色块和字格内容
|
var div = `<div class="box2 ${i%2==0?'left_box':'right_box'}">
|
<div class="box3">
|
<div class="box5" id="${pinyin_id}">${pinyin_end}</div>
|
<div class='box6'>
|
<div class='hanzi' style='color:${word_color}'>${all_4000_json2[i+3000].word}</div>
|
</div>
|
<p class = 'info'>
|
<span class = 'xuhao'>${all_4000_json2[i+3000].num}</span>
|
<span class = 'level'>${all_4000_json2[i+3000].level}</span>
|
</p>
|
</div>
|
<div class="box4" style="background-color:${color_arr_3[i%8]}">
|
<p style="display:${all_4000_json2[i+3000]['ciyu1']==''?'none':'block'}">${replaceChars(all_4000_json2[i+3000]['ciyu1'], replacements)}</p>
|
<p style="display:${all_4000_json2[i+3000]['ciyu2']==''?'none':'block'}">${replaceChars(all_4000_json2[i+3000]['ciyu2'], replacements)}</p>
|
<p style="display:${chengyu1==''?'none':'block'}">${replaceChars(chengyu1, replacements)}</p>
|
<p style="display:${chengyu2==''?'none':'block'}">${replaceChars(chengyu2, replacements)}</p>
|
</div>
|
</div>`
|
box.insertAdjacentHTML('beforeend',div)
|
var box2 = document.getElementsByClassName('box2')
|
// console.log(box2)
|
let yema_box = `<div class="yema_box yema_right">${(i+1)/8}</div>`
|
let yema_box2 = `<div class="yema_box yema_left">${(i+2)/8}</div>`
|
// 根据每页八个字为条件插入左右下标页码
|
if((i+1)%8 == 0&&(i+1)%16!=0){
|
box2[i].insertAdjacentHTML('beforeend',yema_box)
|
}else if((i+1)%8 == 1){
|
// box2[i].insertAdjacentHTML('beforeend',circle_div)
|
}else if((i+1)%8 == 2){
|
box2[i].insertAdjacentHTML('beforeend',title_box)
|
}else if((i+1)%16 == 15){
|
box2[i].insertAdjacentHTML('beforeend',yema_box2)
|
}
|
|
}
|
</script>
|
|
</html>
|
