如何解决如何在逻辑中打印最后一个字母
- 我有一个代码,可以打印突出显示的文本上按下键的字母。但是我无法打印最后一个字母(这里的字母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.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,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.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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。