主要功能是想要实现查询，每个字母表达的意思是不一样的，大写字母的R和小写字母的r以及图片命名也不能冲突，所以要在代码里面给小写的字母加上s或者其他的符号，'单引号作为一种特殊的符号，也是需要处理的，再就是又对输入框做了一个空格符的处理。
基本功能实现，但没有处理好的地方在于，光标插入不正常，默认是在文本结束，但是在调试的过程中bug不断，所以这个就放弃了。
预览页面：三阶魔方公式图解系统-青青学魔方
分享部分代码（图片需要自己做）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="base.css" rel="stylesheet">
<title>三阶魔方公式图解系统-青青学魔方</title>
<script>
function trimInput() {
var inputField = document.getElementById('input-field');
// 获取输入框的值并移除所有空格
var notation = inputField.value.replace(/\s/g, ''); // 使用正则表达式替换所有空格
return notation;
}
function showImages(notation) {
// 假设img文件夹与HTML文件在同一目录下
var baseUrl = 'img/';
var imagesDiv = document.getElementById('notation-images');
imagesDiv.innerHTML = '';
function processTitle(title) {
var processedTitle = title.replace(/_/g, "'");
if (/^[s][a-z]/.test(processedTitle)) {
processedTitle = processedTitle.slice(1);
}
return processedTitle;
}
function getImageName(notationPart) {
var imageName;
// 如果字符串只包含一个单引号，则直接返回下划线
if (notationPart === "'") {
return "_";
}
// 移除末尾可能存在的数字（但保留单独的数字2）
var match = notationPart.match(/^(.*?)(\d*)$/);
var letterOrNotation = match[1];
var numberSuffix = match[2];
// 检查是否包含'或2，并构建图片名
if (letterOrNotation.endsWith("'")) {
// 如果字符串末尾是数字2，则移除'并添加_2
if (numberSuffix === "2") {
imageName = letterOrNotation.slice(0, -1) + '_2.png';
} else {
// 否则，只添加一个下划线，并替换'为_
imageName = letterOrNotation.replace(/'/g, '_') + (numberSuffix ? numberSuffix + '.png' : '.png');
}
} else if (numberSuffix === "2") {
// 如果末尾是数字2但没有'，则直接添加2
imageName = letterOrNotation + '2.png';
} else {
// 没有特殊字符，直接使用原始字符串
imageName = letterOrNotation + (numberSuffix ? numberSuffix + '.png' : '.png');
}
// 根据字母的大小写来添加's'前缀（仅针对小写字母）
if (letterOrNotation.toLowerCase() === letterOrNotation) {
imageName = 's' + imageName;
}
return imageName;
}
// 分割输入字符串，并为每个部分创建图片
var parts = notation.split(/(?=[A-Za-z])(?![0-9])/); // 使用正则表达式分割，但保持数字和字母组合在一起
parts.forEach(function(part) {
if (part.match(/[A-Za-z]/)) { // 确保是有效的字母或字母组合
var img = document.createElement('img');
var imageName = part; // 假设这里imageName就是part，没有额外处理
var imageTitle = processTitle(imageName); // 调用新函数处理title
img.src = baseUrl + getImageName(part);
img.alt = imageTitle;
img.title = imageTitle; // 设置处理后的图片标题
// 如果要在图片前后加<li>标签和旁边的<p>标签显示title
var listItem = document.createElement('li');
var titleParagraph = document.createElement('p');
titleParagraph.textContent = imageTitle;
listItem.appendChild(img);
listItem.appendChild(titleParagraph);
imagesDiv.appendChild(listItem); // 假设imagesDiv是一个<ul>元素
}
});
}
</script>
<script>
function insertQuote() {
var inputField = document.getElementById('input-field');
// 获取输入框的当前值
var currentValue = inputField.value;
// 获取光标的位置
var selectionStart = inputField.selectionStart;
var selectionEnd = inputField.selectionEnd;
// 在光标位置插入单引号
var newValue = currentValue.slice(0, selectionStart) + "'" + currentValue.slice(selectionEnd);
inputField.value = newValue;
// 将光标移动到插入单引号之后的位置
inputField.setSelectionRange(selectionStart + 1, selectionStart + 1);
}
</script>
</head>
<body>
<main>
<h1>三阶魔方公式图解系统</h1>
<div id="output"></div>
<!-- 用于显示输入的指令 -->
<input type="text" id="input-field" placeholder="输入公式字母" class="gongshi">
<div class="mtn">
<button onclick="showImages(trimInput())">显示图解</button>
<button id="clear-button" class="btb">清空</button>
</div>
<div id="cube-buttons">
<button class="cube-button" data-action="R">R</button>
<button class="cube-button" data-action="R'">R'</button>
<button class="cube-button" data-action="F">F</button>
<button class="cube-button" data-action="F'">F'</button>
<button class="cube-button" data-action="L">L</button>
<button class="cube-button" data-action="L'">L'</button>
<button class="cube-button" data-action="B">B</button>
<button class="cube-button" data-action="B'">B'</button>
<button class="cube-button" data-action="U">U</button>
<button class="cube-button" data-action="U'">U'</button>
<button class="cube-button" data-action="D">D</button>
<button class="cube-button" data-action="D'">D'</button>
<!-- 小写字母 -->
<button class="cube-button" data-action="r">r</button>
<button class="cube-button" data-action="r'">r'</button>
<button class="cube-button" data-action="f">f</button>
<button class="cube-button" data-action="f'">f'</button>
<button class="cube-button" data-action="l">l</button>
<button class="cube-button" data-action="l'">l'</button>
<button class="cube-button" data-action="b">b</button>
<button class="cube-button" data-action="b'">b'</button>
<button class="cube-button" data-action="b">u</button>
<button class="cube-button" data-action="b'">u'</button>
<button class="cube-button" data-action="d">d</button>
<button class="cube-button" data-action="d'">d'</button>
<button class="cube-button" data-action="M">M</button>
<button class="cube-button" data-action="M'">M'</button>
<button class="cube-button" data-action="S">S</button>
<button class="cube-button" data-action="S'">S'</button>
<button class="cube-button" data-action="E">E</button>
<button class="cube-button" data-action="E'">E'</button>
<button class="cube-button" data-action="2" id="2-button">2</button>
<button onclick="insertQuote()" class="btc">插入单引号</button>
</div>
<ul id="notation-images" class="notation-images">
</ul>
<script>
let inputField = document.getElementById('input-field');
let clearButton = document.getElementById('clear-button');
let imagesDiv = document.getElementById('notation-images'); // 获取notation-images元素
// 为每个按钮添加点击事件监听器
document.querySelectorAll('#cube-buttons .cube-button').forEach(button => {
button.addEventListener('click', function() {
// 读取按钮的data-action属性，并添加到输入字段
let action = this.getAttribute('data-action');
inputField.value += action;
});
});
// 为清空按钮添加点击事件监听器
clearButton.addEventListener('click', function() {
// 清空输入字段的内容
inputField.value = '';
// 清空notation-images中的图片
imagesDiv.innerHTML = ''; // 清空innerHTML将移除所有子元素（即图片）
});
</script>
</main>
</body>
</html>
扫一扫
2672
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
