- 我有一个代码，可以打印在突出显示的文本上按键的字母。但我无法打印最后一个字母(此处为字母F(。有人能指出我逻辑中的问题吗
- 如果不在输入标签中打印文本，我想在按下时转到另一页，我该怎么做(我需要将它们更改为锚定标签并添加6页吗？(
let curr_div_on = 0,curr_div_off = 0;
const key = document.getElementsByClassName("key");
function setPlayingOn() {
key[curr_div_on % 6].classList.add("playing");
curr_div_on = (curr_div_on + 1) % 6;
}
function setPlayingOff() {
key[curr_div_off % 6].classList.remove("playing");
curr_div_off = (curr_div_off + 1) % 6;
}
setInterval(setPlayingOn, 500);
setTimeout(() => setInterval(setPlayingOff, 500), 500);
document.addEventListener('keypress', function(){
var input = document.getElementById('message');
if(curr_div_on==1){
let letter = 'A';
input.value += letter;
}else if(curr_div_on==2){
let letter = 'B';
input.value += letter;
}else if(curr_div_on==3){
let letter = 'C';
input.value += letter;
}else if(curr_div_on==4){
let letter = 'D';
input.value += letter;
}else if(curr_div_on==5){
let letter = 'E';
input.value += letter;
}else if(curr_div_on==6){
let letter = 'F';
input.value += letter;
}
});.key{
border: 0.1rem solid black;
border-radius: 0.5rem;
margin : 1rem;
padding: 1rem 0.5rem;
width: 4rem;
text-align: center;
background: rgba(0,0,0,0.4);
transition: all 1.0 ease;
transition-duration: 0.5s;
}
.keys{
display: grid;
grid-template-columns: auto auto auto;
}
.playing{
transform: scale(1,1);
border-color: #ffc600;
box-shadow: 0 0 1rem #ffc600;
}<!DOCTYPE html>
<html>
<head>
<title>Talk</title>
</head>
<body>
<div id="keys">
<div class="key">A</div>
<div class='key'>B</div>
<div class='key'>C</div>
<div class='key'>D</div>
<div class='key'>E</div>
<div class='key'>F</div>
</div>
<input id="message"></input>
</body>
</html>要回答您的第一个问题，您的索引不是1,2,3,4,5,6，而是1,2,3,4,4,5,0。我对代码做了一些更改，现在它可以按预期工作了。
至于第二个问题——我不确定我是否理解你的要求。
如果不在输入标签中打印文本，我想在按下时转到另一页，我该怎么做(我需要将它们更改为锚标签并添加6页吗？(
什么时候按下？你说转到另一页是什么意思？导航到其他URL？
let curr_div = 0;
const key = document.getElementsByClassName("key");
function setPlaying() {
key[curr_div].classList.remove("playing");
curr_div = (curr_div + 1) % 6;
key[curr_div].classList.add("playing");
}
setInterval(setPlaying, 500);
document.addEventListener('keypress', function(){
var input = document.getElementById('message');
if (curr_div==0) {
let letter = 'A';
input.value += letter;
} else if(curr_div==1) {
let letter = 'B';
input.value += letter;
} else if(curr_div==2) {
let letter = 'C';
input.value += letter;
} else if(curr_div==3) {
let letter = 'D';
input.value += letter;
} else if(curr_div==4) {
let letter = 'E';
input.value += letter;
} else if(curr_div==5) {
let letter = 'F';
input.value += letter;
}
});.key{
border: 0.1rem solid black;
border-radius: 0.5rem;
margin : 1rem;
padding: 1rem 0.5rem;
width: 4rem;
text-align: center;
background: rgba(0,0,0,0.4);
transition: all 1.0 ease;
transition-duration: 0.5s;
}
.keys{
display: grid;
grid-template-columns: auto auto auto;
}
.playing{
transform: scale(1,1);
border-color: #ffc600;
box-shadow: 0 0 1rem #ffc600;
}<!DOCTYPE html>
<html>
<head>
<title>Talk</title>
</head>
<body>
<div id="keys">
<div class="key">A</div>
<div class='key'>B</div>
<div class='key'>C</div>
<div class='key'>D</div>
<div class='key'>E</div>
<div class='key'>F</div>
</div>
<input id="message"></input>
</body>
</html>