<html>
<head>
<title>故障效果文字转换器</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
* {
font-family: Noto Sans SC, verdana, arial, helvetica, sans-serif;
}
textarea {
width: 100%;
padding: 0.5em;
}
img.user {
vertical-align: -0.3em;
margin: 0;
width: 16px;
height: 16px;
z-index: 0;
padding: 1px 9px 1px 8px;
background-repeat: no-repeat;
background-position: center left;
}
a {
color: #b01;
text-decoration: none;
background: transparent;
}
a:visited {
color: #824;
}
a:hover {
text-decoration: underline;
background-color: transparent;
}
#convMode {
width: 120px;
}
#glitchinessBar {
width: 120px;
height: 1em;
}
#convertButton {
width: 5em;
color: green;
font-weight: bold;
}
#inputArea {
border: solid 1px;
}
#outputArea {
background-color: transparent;
border: dashed 1px;
}
.convMode {
width: 100%;
height: 2em;
float: left;
}
.glitchiness {
width: 100%;
height: 2em;
float: left;
}
.leftButtons {
float: left;
}
.rightButtons {
float: right;
}
.buttonsWrap {
width: 100%;
height: 1.5em;
margin: 0.5em 0;
}
.settingsWrap {
width: 100%;
height: 3.5em;
margin: 0.5em 0;
}
.inputArea {
width: 100%;
height: 8em;
margin: 0.5em 0;
}
.outputArea {
width: 100%;
height: 8em;
margin: 0.5em 0;
}
</style>
<script type="text/javascript">
function generateRandomDiacritic() {
var num=Math.ceil(Math.random()*112)+767;
return String.fromCharCode(num);
}
function generateDiacritics(density) {
var diacritics="";
for (let i=0; i<density; i++) {
diacritics+=generateRandomDiacritic();
}
return diacritics;
}
function showRangeValueNumber() {
rangeValueNumber.innerHTML=glitchinessBar.value;
}
function convertText() {
var mode=convMode.value;
var outputText="";
var inputText=inputArea.value;
if (inputText=="") {
alert("没有可转换的内容!请先在白色框内输入待转换的文本。");
return 0;
}
switch (mode) {
case "mode1":
var density=glitchinessBar.value;
for (let i=0; i<inputText.length; i++) {
if (/^[\x00-\x7F]*$/.test(inputText[i])) {
outputText+=inputText[i]+generateDiacritics(density);
} else {
outputText+=inputText[i]+"\u200b"+generateDiacritics(density);
}
}
break;
case "mode2":
for (let i=0; i<inputText.length; i++) {
if (!(/^[\u200b\u0300-\u036f]*$/.test(inputText[i]))) {
outputText+=inputText[i];
}
}
break;
default:
alert("似乎发生了意外错误,请重试或联系作者。");
}
outputArea.value=outputText;
}
function clearText() {
inputArea.value="";
outputArea.value="";
}
function copyText() {
if (outputArea.value=="") {
alert("没有可复制的内容!请先进行转换。");
} else {
outputArea.select();
document.execCommand("Copy");
alert("转换后的内容已复制到剪贴板,可供粘贴。");
}
}
</script>
</head>
<body>
<div class="settingsWrap">
<div class="convMode">
模式选择 ►
<select id="convMode">
<option value="mode1">添加故障效果</option>
<option value="mode2">去除故障效果</option>
</select>
</div>
<div class="glitchiness">
字符密度 ►
<input id="glitchinessBar" type="range" min="0" max="50" value="15" step="1" oninput="showRangeValueNumber()">
<span id="rangeValueNumber">15</span>
</div>
</div>
<div class="buttonsWrap">
<div class="leftButtons"><input id="convertButton" type="button" value="转换!" onclick="convertText()"></div>
<div class="rightButtons">
<input type="button" value="清空全部内容" onclick="clearText()">
<input type="button" value="复制转换结果" onclick="copyText()">
</div>
</div>
<div class="textAreaWrap">
<div class="inputArea"><textarea id="inputArea" rows="7"></textarea></div>
<div class="outputArea"><textarea id="outputArea" rows="7" readonly="readonly"></textarea></div>
</div>
<div style="text-align: right; font-size: 10px;">
<p>“故障效果文字转换器”由后室维基中文站的 <a
href="https://www.wikidot.com/user:info/lupus-caeruleus"><img class="user"
src="https://www.wikidot.com/avatar.php?userid=4196724" alt="Lupus Caeruleus"
style="background-image:url(https://www.wikidot.com/userkarma.php?u=4196724)" />Lupus Caeruleus</a>
制作。</p>
</div>
</body>
</html>