我试图创建一个带间隔循环的提示器Web应用程序。
我试图创建一个工具，文本缓慢向上滚动，可以通过播放，停止，暂停，速度更快，速度更慢来控制。
我认为我有大部分内容，但我很困惑如何设置一个带点击的区间循环。
对此有任何帮助都非常感谢
var tpSpeed = 1
//Places text into Prompter
function startPrompter() {
var teleprompter = document.getElementById("text").value;
document.getElementById("script").innerHTML = teleprompter;
}
//Sets loop
myLoop = setInterval(loopFunc, 20)
clearInterval(loopFunc)
clearInterval(myLoop)
tpLooper = setInterval(tpAnimate, 20)
//Scrolls text up
function play(){
tpScrollTop = tpScrollTop + tpSpeed;
$(".scriptContainer").scrollTop(tpScrollTop);
if(tpScrollTop >= $("#teleprompter").height()){
//stop when height is reached
clearInterval(tpLooper);
}
}
//Slow down teleprompter
$("#slow").click(function() {
if(tpSpeed>1){
tpSpeed--;
}
});
//Speed up teleprompter
$("#fast").click(function() {
if(tpSpeed<10){
tpSpeed++;
}
});
//Starts text scrolling
//$(document).ready(function(){
// $("#play").click(function(){
// $("#teleprompter").animate();
// });
//});@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import url('https://fonts.googleapis.com/css?family=Roboto');
a{
color: #00CDCD;
}
body{
font-family: 'Roboto', sans-serif;
font-size: 1em;
width: 100%;
background-color: #E0E0E0;
text-align:center;
}
h1{
font-size: 1.5em;
}
h2{
font-size: 1em;
}
.title{
background-color: #5D0076;
color: white;
text-align:center;
padding: 10px;
width: 100%;
margin-bottom: 10px;
}
.footer{
background-color: #5D0076;
color: white;
text-align:center;
padding: 10px;
margin-top: 10px;
width: 100%;
}
textarea{
font-family: 'Roboto', sans-serif;
font-size: 0.8em;
cursor: pointer;
}
.wrapper{
display: flex;
flex-wrap: wrap;
flex-direction: column;
overflow:hidden;
}
.container{
width: 610px;
margin-left: auto;
margin-right: auto;
word-wrap: break-word;
overflow:hidden;
}
button {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f9f9f9), color-stop(1, #e9e9e9));
background:-moz-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background:-webkit-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background:-o-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background:-ms-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background:linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9',GradientType=0);
background-color:#f9f9f9;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #dcdcdc;
display:inline-block;
cursor:pointer;
color:#666666;
font-family:Arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:0px 1px 0px #ffffff;
}
button:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e9e9e9), color-stop(1, #f9f9f9));
background:-moz-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
background:-webkit-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
background:-o-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
background:-ms-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
background:linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9e9e9', endColorstr='#f9f9f9',GradientType=0);
background-color:#e9e9e9;
}
button:active {
position:relative;
top:1px;
}
#text{
border: 5px solid white;
-webkit-box-shadow:
inset 0 0 8px rgba(0,0,0,0.1),
0 0 16px rgba(0,0,0,0.1);
-moz-box-shadow:
inset 0 0 8px rgba(0,0,0,0.1),
0 0 16px rgba(0,0,0,0.1);
box-shadow:
inset 0 0 8px rgba(0,0,0,0.1),
0 0 16px rgba(0,0,0,0.1);
padding: 15px;
background: rgba(255,255,255,0.5);
margin-top: 10px;
}
.scriptContainer{
width: 550px;
height: 300px;
border: 5px solid black;
-webkit-box-shadow:
inset 0 0 8px rgba(0,0,0,0.1),
0 0 16px rgba(0,0,0,0.1);
-moz-box-shadow:
inset 0 0 8px rgba(0,0,0,0.1),
0 0 16px rgba(0,0,0,0.1);
box-shadow:
inset 0 0 8px rgba(0,0,0,0.1),
0 0 16px rgba(0,0,0,0.1);
padding: 15px;
background-color: #000000;
overflow:hidden;
word-wrap:break-word;
margin: 0 auto;
}
#script{
color: #ffffff;
font-family: Arial, sans-serif;
font-size: 70px;
font-weight: 700px;
line-height: 90px;
text-align:left;
}
.marquee{
width: 550px;
height: 300px;
margin: 0 auto;
}
.teleprompter{
width: 550px;
height: 300px;
border: 5px solid black;
-webkit-box-shadow:
inset 0 0 8px rgba(0,0,0,0.1),
0 0 16px rgba(0,0,0,0.1);
-moz-box-shadow:
inset 0 0 8px rgba(0,0,0,0.1),
0 0 16px rgba(0,0,0,0.1);
box-shadow:
inset 0 0 8px rgba(0,0,0,0.1),
0 0 16px rgba(0,0,0,0.1);
padding: 15px;
background-color: #000000;
overflow:hidden;
word-wrap:break-word;
margin: 0 auto;
}<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="wrapper">
<div class="title">
<h1>TELEPROMPTER TOOL</h1>
</div>
<div class="container">
<div id="cover"></div>
<div class="scriptContainer">
<div class="teleprompter" id="teleprompter">
<!--<marquee class="marquee" direction="up" id="script" loop="infinite"></marquee>-->
<p id="script"></p>
</div>
</div>
<div class="controls">
<button class="controls" id="play" onclick="play()" alt="play"><i class="material-icons">play_arrow</i></button>
<button class="controls" id="stop" onclick="stop()" alt="stop"><i class="material-icons">stop</i></button>
<button class="controls" id="pause" onclick="pause()" alt="pause"><i class="material-icons">pause</i></button>
<button class="controls" id="rewind" onclick="rewind()" alt="rewind"><i class="material-icons">fast_rewind</i></button>
<button class="controls" id="slow" onclick="slowDown()" alt="speed slow">Slow down</button>
<button class="controls" id="fast" onclick="speedUp()" alt="speed fast">Speed up</button>
</div>
<p>Please type of copy and paste your script in the text box</p>
<textarea cols="77" rows="20" id="text" value="Input Script Here"></textarea>
</div>
<div class="footer">
<button onclick="startPrompter()">Start Prompter</button>
</div>
</form>
</div>
答案 0 :(得分：1)
关键是使用递归超时，女孩可以在每次转弯时重新设置间隔。这是一个关于如何处理这些事件的小例子（代码中的注释）：
<html>
<head>
<script>
//Just some namespace
var MyStuff = {
Teleprompter: {
_Interval: 5000, //This is our current interval
_Timeout: 0, //This is our timeout-object
//This is the function which gets called on each turn/interval
_Turn: function(){
/*
Put whatever you see fit here, scrolling to top or w/e.
*/
document.querySelector('ins').textContent = new Date().getTime() + ' (' + this._Interval + ')';
this.Pause(); //Cleanup
this.Play() //The whole loop starts again
},
//To decrease the interval (=faster)
Faster: function(){
this._Interval = Math.max(1000, this._Interval-1000); //Cant drop below one second
this.Play() //Also calls play - in case its not running yet
},
//To pause and/or stop the interval
Pause: function(){
window.clearTimeout(this._Timeout);
delete this._Timeout
},
//To start the timeout, if not already running
Play: function(){
this._Timeout = this._Timeout || window.setTimeout(function(){MyStuff.Teleprompter._Turn()}, this._Interval)
},
//To increase the interval (=slower)
Slower: function(){
this._Interval = Math.min(10000, this._Interval+1000); //Cant go above ten seconds
this.Play() //Also calls play - in case its not running yet
}
}
}
</script>
</head>
<body>
<b onclick = 'MyStuff.Teleprompter.Slower()'>Slower</b>
<b onclick = 'MyStuff.Teleprompter.Faster()'>Faster</b>
<b onclick = 'MyStuff.Teleprompter.Play()'>Play</b>
<b onclick = 'MyStuff.Teleprompter.Pause()'>Pause</b>
<ins></ins>
</body>
</html>