console
function Add(num) {
var input = document.getElementById("inputer");
switch (num) {
case 0:
input.innerText += "<br/>";
break;
case 1:
var href = prompt("请输入链接地址:");
var text = prompt("请输入链接显示的文字");
input.innerText += "<a href='" + href + "'>" + text + "</a>";
break;
case 2:
var text = prompt("请输入粗体内容");
input.innerText += "<strong>" + text + "</strong>";
break;
case 3:
var text = prompt("请输入大字内容");
input.innerText += "<largr>" + text + "</large>";
break;
default:
break;
}
}
function output() {
var choice = document.getElementsByClassName("choice");
var tp = document.getElementsByClassName("tp");
var ans = [];
ans[1] = document.getElementById("page").value;
ans[2] = ': {\n "text":"';
ans[3] = document.getElementById("inputer").innerText;
ans[4] = '",\n "choice":[{';
var temp=0;
for (i = 0; i <= 3; i++) {
if (choice[i].value != "" && tp[i].value != "") {
ans[i+5]='\n "text": "'+choice[i].value+'",\n "tp": '+tp[i].value+'\n },';
temp++;
}
}
if(temp==0){
ans[9]=' }]\n }';
}
else{
ans[9]='\n ]}';
}
ans[10]=",\n"
document.getElementById("outputer").innerText += ans.join("");
}
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>甲醛报警器</title>
</head>
<body>
<h1>剧情编辑器v1.0</h1>
<div>
<h3>内容（第一行为页码，第二行为内容）</h3>
<input id="page" type="number" value="0">
<div id="inputer" contenteditable="plaintext-only"></div>
<div class="btnC">
<button class="btn" onclick="Add(0)">插入换行符</button>
<button class="btn" onclick="Add(1)">插入链接</button>
<button class="btn" onclick="Add(2)">插入粗体字</button>
<button class="btn" onclick="Add(3)">插入大字</button>
</div>
<div>
<h3>选项（左边为选项内容，右边为跳转页码，留白不显示此选项）</h3>
<div>选项0<input class="choice"><input class="tp"></div>
<div>选项1<input class="choice"><input class="tp"></div>
<div>选项2<input class="choice"><input class="tp"></div>
<div>选项3<input class="choice"><input class="tp"></div>
</div>
<button class="btn" id="ok" onclick="output()">确定并导出页码内容到下面</button>
<div id="outputer" contenteditable="plaintext-only"></div>
<p>我从来都是手写剧情的，不用这些工具</p>
</body>
</html>
.btn {
background-color: white;
color: black;
width: auto;
height: auto;
font-size: 1.1em;
padding: 5px 5px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
cursor: pointer;
border: 2px solid #4CAF50;
border-radius: 5px;
}
.btn:hover {
background-color: #4CAF50;
color: white;
}
.btn:active {
background-color: rgb(13, 107, 19);
}
#ok{
margin-left: 25%;
width: 40%;
border: 2px solid dodgerblue;
}
#ok:hover {
background-color: dodgerblue;
color: white;
}
#ok:active {
background-color: rgb(20, 87, 155);
}
input{
padding: 2px;
margin: 5px;
background-color: rgba(10, 10, 10, 0.1);
border-style: none;
font-size: 1em;
width: 40%;
}
#page{
width: auto;
}
#outputer{
background-color: rgba(10, 10, 10, 0.1);
font-size: 1em;
padding: 2px;
min-height:100px;
margin-top: 20px;
border-radius: 5px;
}
#inputer{
background-color: rgba(10, 10, 10, 0.1);
padding: 5px;
min-height:100px;
}
#chooser{
background-color: rgba(10, 10, 10, 0.1);
padding: 5px;
margin: 5px;
min-height:10px;
}
#btnC{
vertical-align: center;
}