我想根據 15 秒計時器列印單詞,然后我想更改該單詞。
為此,我使用了一個單詞陣列,然后使用亂數生成器從陣列中提取隨機單詞,使用亂數作為陣列索引值。
對于計時器,我使用 setInterval 作為時間函式,但是當我呼叫陣列,即單詞并嘗試在螢屏上列印它時,我得到未定義的結果,即我無法訪問陣列,即我的 setInterval 函式中的單詞
function startTimer(duration, display) {
var wordCount = 0;
var wordNo = Math.floor((Math.random() * (59 - wordCount)) 1);
wordCount = 1;
word.innerHTML = "<b>" wordCount ". " words[wordNo] "</b>";
words = words - words[wordNo];
var timer = duration,
minutes, seconds;
setInterval(function() {
seconds = parseInt(timer % 60, 10);
seconds = seconds < 10 ? "0" seconds : seconds;
display.textContent = seconds;
if (--timer < 0) {
timer = duration;
}
if (seconds == 5) {
display.style.color = 'red';
}
if (seconds > 5) {
display.style.color = 'unset';
}
if (seconds == 00) {
wordNo = Math.floor((Math.random() * (59 - wordCount)) 1);
wordCount = 1;
word.innerHTML = "<b>" wordCount " . " words[wordNo] "</b>";
words = words - words[wordNo];
}
if (wordCount == 61) {
let wrapper = document.querySelector('.wrapper');
wrapper.innerHTML = "<div class='text-center fs-3 mt-3 text-danger'>Test Ended</div>"
}
}, 1000);
}
var words = ["Scene", "Impossible", "Society", "Choose", "Unjust", "Image", "Exam", "Drive", "Internet", "Communication", "Keys", "Murder", "Commit", "Flee", "Practice", "Organize", "Phone", "New", "Agency", "Security", "Since", "Peace", "Fall", "Hi", "Run", "Chase", "Enter", "Industry", "Limit", "Development", "Coach", "Food", "Special", "Biomass", "Release", "Head", "Launch", "Medal", "Play", "Department", "Under", "Curb", "Cooperate", "HIke", "War", "Normal", "Challenge", "Serving", "Bane", "Rapid", "Actress", "obstacles", "Strict", "Forceful", "Citizens", "Team", "Anxious", "Knowledge", "Polite", "Integrity", "Serve", "Loyal", "Equality", "Justice", "Gratitude", "Rare", "Heavy", "Rude", "Explanation", "Pilot", "Pirate", "Ship", "Captain", "Camp", "Rights", "Ragging", "Rust", "Patriotism", "Primary", "Performance", "Pity", "Meeting", "Obedience", "Quick", "Quiet", "Quotes", "Question", "Try", "Unity", "Urge", "Friendship", "Close", "Migrate", "Decline", "Fly", "Highest", "Shall"]
var display = document.querySelector('#time');
var word = document.querySelector('#word');
var fiveMinutes = 15;
message = "1.60 words would be shown one by one.\r\n2.Each word will appear for only 15 seconds.\r\n3.The candidate has to read the word and write appropriate sentences at the same time.\r\n4.There will be no gap between two simultaneous words.\r\n5.The words can be positive or negative.\r\n6.The duration of WAT is 15 minutes."
alert(message)
startTimer(fiveMinutes, display);
<script src="https://kit.fontawesome.com/bf341fb126.js" crossorigin="anonymous"></script>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="wrapper mt-5">
<header class="text-center pb-4 h1">
Word Association Test
</header>
<div class="text-center">
<i class="fa fa-clock-o fs-3" aria-hidden="true"></i>
</div>
<div id="time" class="text-center fs-3 mt-3"></div>
<div id="word" class="text-center fs-3 mt-3">
</div>
</div>
<script src="JavaScript/script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7 zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG 2QOK9T ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
uj5u.com熱心網友回復:
您需要改組您的代碼以在函式之外擁有全域變數
也干燥,不要重復自己
最后使用陣列的長度作為計數
我使用 splice 從陣列中洗掉單詞
var words = ["Scene", "Impossible", "Society", "Choose", "Unjust", "Image", "Exam", "Drive", "Internet", "Communication", "Keys", "Murder", "Commit", "Flee", "Practice", "Organize", "Phone", "New", "Agency", "Security", "Since", "Peace", "Fall", "Hi", "Run", "Chase", "Enter", "Industry", "Limit", "Development", "Coach", "Food", "Special", "Biomass", "Release", "Head", "Launch", "Medal", "Play", "Department", "Under", "Curb", "Cooperate", "HIke", "War", "Normal", "Challenge", "Serving", "Bane", "Rapid", "Actress", "obstacles", "Strict", "Forceful", "Citizens", "Team", "Anxious", "Knowledge", "Polite", "Integrity", "Serve", "Loyal", "Equality", "Justice", "Gratitude", "Rare", "Heavy", "Rude", "Explanation", "Pilot", "Pirate", "Ship", "Captain", "Camp", "Rights", "Ragging", "Rust", "Patriotism", "Primary", "Performance", "Pity", "Meeting", "Obedience", "Quick", "Quiet", "Quotes", "Question", "Try", "Unity", "Urge", "Friendship", "Close", "Migrate", "Decline", "Fly", "Highest", "Shall"]
var display = document.querySelector('#time');
var word = document.querySelector('#word');
var fiveMinutes = 15;
message = "1.60 words would be shown one by one.\r\n2.Each word will appear for only 15 seconds.\r\n3.The candidate has to read the word and write appropriate sentences at the same time.\r\n4.There will be no gap between two simultaneous words.\r\n5.The words can be positive or negative.\r\n6.The duration of WAT is 15 minutes."
let wordCount = 0
const getWord = () => {
var len = words.length;
var wordNo = Math.floor(Math.random() * wordCount);
wordCount = 1;
word.innerHTML = "<b>" wordCount ". " words[wordNo] "</b>";
words.splice(wordNo, 1);
};
let tId;
const wrapper = document.querySelector('.wrapper');
alert(message)
getWord()
startTimer(fiveMinutes, display);
function startTimer(duration, display) {
var timer = duration,
minutes, seconds;
tId = setInterval(function() {
if (words.length === 0) {
wrapper.innerHTML = "<div class='text-center fs-3 mt-3 text-danger'>Test Ended</div>"
clearInterval(tId);
return
}
seconds = parseInt(timer % 60, 10);
seconds = seconds < 10 ? "0" seconds : seconds;
display.textContent = seconds;
if (--timer < 0) {
timer = duration;
}
if (seconds == 5) {
display.style.color = 'red';
}
if (seconds > 5) {
display.style.color = 'unset';
}
if (seconds == 00) {
getWord()
}
}, 1000);
}
<script src="https://kit.fontawesome.com/bf341fb126.js" crossorigin="anonymous"></script>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="wrapper mt-5">
<header class="text-center pb-4 h1">
Word Association Test
</header>
<div class="text-center">
<i class="fa fa-clock-o fs-3" aria-hidden="true"></i>
</div>
<div id="time" class="text-center fs-3 mt-3"></div>
<div id="word" class="text-center fs-3 mt-3">
</div>
</div>
<script src="JavaScript/script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7 zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG 2QOK9T ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
轉載請註明出處,本文鏈接:https://www.uj5u.com/qukuanlian/494110.html
標籤:javascript 数组 设置间隔
