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("请输入链接显示的文字");
if (href != null && text != null) {
input.innerText += "<a href='" + href + "'>" + text + "</a>";
}
break;
case 2:
var text = prompt("请输入粗体内容");
if (text != null) {
input.innerText += "<strong>" + text + "</strong>";
}
break;
case 3:
var text = prompt("请输入大字内容");
if (text != null) {
input.innerText += "<largr>" + text + "</large>";
}
break;
default:
break;
}
}
function output() {
var choice = document.getElementsByClassName("choice");
var tp = document.getElementsByClassName("tp");
var page = document.getElementById("page").value;
var command = document.getElementsByClassName("command");
var ans = new Object;
ans[page] = {};
ans[page].剧情文本 = document.getElementById("inputer").innerText;
ans[page].选项 = [];
for (i = 0; i <= 3; i++) {
if (choice[i].value != "" && tp[i].value != "") {
ans[page].选项[i] = {}
ans[page].选项[i].选项文本 = choice[i].value;
ans[page].选项[i].传送 = tp[i].value;
if(command[i].value != ""){
ans[page].选项[i].指令 = command[i].value;
}
}
}
document.getElementById("outputer").innerText = JSON.stringify(ans)
}
/*
{
"0": {
"剧情文本": "模板",
"选项": [
{
"选项文本": "选项0",
"传送": 1
},
{
"选项文本": "选项1",
"传送": 1
},
{
"选项文本": "选项2",
"传送": 1
},
{
"选项文本": "选项3",
"传送": 1
}
]
},
"1": {
"剧情文本": "警告!<br/>本游戏内如<br/>“2,2,3,3-四甲基丁烷”<br/>“渣渣珲”<br/>“曹静”<br/>“襄阳四中”<br/>等名词皆为虚构和随机组合!<br/>如有雷同,纯属巧合!",
"选项": [
{
"选项文本": "开始即表示同意此契约",
"传送": 2,
"提示": "[作者] 会记住的",
"指令": "++LIST['作者']"
}
]
},
"2": {
"剧情文本": "你是<strong>2,2,3,3-四甲基丁烷</strong>,你在襄阳四中上学。<br/>有一天,你看到了<strong>渣渣珲</strong>向你说:<br/>“我家有PS4,快来我家Van♂”<br/>你:...",
"选项": [
{
"选项文本": "何乐而不为之!",
"传送": 5,
"提示": "↑ [渣渣辉] 会记住的"
},
{
"选项文本": "不,我再想想...",
"传送": 10
},
{
"选项文本": "走开啦!",
"传送": 3,
"提示": "[渣渣辉] 会记住的"
}
]
},
"3": {
"剧情文本": "你:“走开啦,泥奏凯!”<br/>渣渣珲:“㤙㤙㤙,锕,你这分子烷了!You will Pay for what you said!”",
"选项": [
{
"选项文本": "啊,你要淦嘛!",
"传送": 4
}
]
},
"4": {
"剧情文本": "<p style='color:red;'>结局</p><br/>你失败了!<br/>2020年,2,2,3,3-四甲基丁烷 死于氧化分解(Fire)<img src=\"https://s1.ax1x.com/2020/04/10/GoKPe0.png\" style='max-width: 100%;max-height: 100%;'></a>",
"选项": []
},
"5": {
"剧情文本": "你:“好呀好呀!”<br/>渣渣珲:“太好了(抑制自己的喜悦),那我请你喝杯<a href=\"http://www.nongfuspring.com/upload/201406/2014062416093435365.png\">茶</a>好了!”",
"选项": [
{
"选项文本": "那好吧",
"传送": 6
}
]
},
"6": {
"剧情文本": "渣渣珲给你买了一杯<large>特殊的</large>茶<br/>你喝了,然后就...癫痫了?<br/>失明I **:**<br/>夜视I **:**",
"选项": [
{
"选项文本": "那好吧(好个屁)",
"传送": 7
}
]
},
"7": {
"剧情文本": "当你醒来时,你发现你不在你自己家里",
"选项": [
{
"选项文本": "...",
"传送": 8
}
]
},
"8": {
"剧情文本": "你发现你被ghs了",
"选项": [
{
"选项文本": "...",
"传送": 9
}
]
},
"9": {
"剧情文本": "<p style='color:red;'>结局</p><br/>你失败了!<br/>2020年,2,2,3,3-四甲基丁烷 死于加成反应<br/>渣渣珲真是个大坏蛋!",
"选项": []
},
"10": {
"剧情文本": "你:“我再考虑一下吧...”<br/>渣渣珲:“哦,㤙,好吧。”<br/>你逐渐远离了祂。",
"选项": [
{
"选项文本": "继续",
"传送": 11
}
]
},
"11": {
"剧情文本": "你远离了渣渣珲。<br/>",
"选项": [
{
"选项文本": "继续",
"传送": 12,
"提示": "你似乎逃过一劫"
}
]
}
}
*/
/*
// ans[0] = '{\n';
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"
// 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">
<br/>
<h3>剧情文本</h3>
<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>选项(左边为选项内容,中间为跳转页码,右侧为附加指令)<br/>
(内容和页码必须存在,附加指令选填,全部留白则代表不显示此选项)</h3>
<div>选项0<input class="choice"><input class="tp"><input class="command"></div>
<div>选项1<input class="choice"><input class="tp"><input class="command"></div>
<div>选项2<input class="choice"><input class="tp"><input class="command"></div>
<div>选项3<input class="choice"><input class="tp"><input class="command"></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: 30%;
}
#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;
}
*{
font-family:'Times New Roman', Times, serif
}
h1{
color: green
}
#page{
width: 5em;
text-align: center;
font-size: 1.5em
}