Changed around line 1
- buildHtml
- theme roboto
+
+
+
+
+
+
逐行单词听写程序+
+ body {
+ font-family: Arial, sans-serif;
+ text-align: center;
+ margin: 50px;
+ background-color: #f0f8ff;
+ }
+ #inputSection, #dictationSection, #resultSection {
+ margin: 20px;
+ display: none;
+ }
+ #submitButton, #dictateButton {
+ padding: 15px 30px;
+ font-size: 20px;
+ cursor: pointer;
+ border: none;
+ border-radius: 50%;
+ background-color: #4CAF50;
+ color: white;
+ }
+ #dictateButton {
+ background-color: #2196F3;
+ }
+ #dictateButton:hover, #submitButton:hover {
+ opacity: 0.8;
+ }
+ #wordList {
+ margin-top: 20px;
+ font-size: 18px;
+ }
+
+
+
- Hello World my name is Peter LU NUS
+
逐行单词听写程序 🎤
+
+
+
+
+
+ const submitButton = document.getElementById('submitButton');
+ const dictateButton = document.getElementById('dictateButton');
+ const wordInput = document.getElementById('wordInput');
+ const wordListDiv = document.getElementById('wordList');
+ const resultSection = document.getElementById('resultSection');
+ const resultsDiv = document.getElementById('results');
+
+ let words = [];
+ let currentIndex = 0;
+
+ // 显示输入框
+ document.getElementById('inputSection').style.display = 'block';
+
+ submitButton.addEventListener('click', () => {
+ words = wordInput.value.split('\n').map(word => word.trim()).filter(word => word);
+ if (words.length > 0) {
+ wordInput.value = '';
+ document.getElementById('inputSection').style.display = 'none';
+ document.getElementById('dictationSection').style.display = 'block';
+ wordListDiv.innerHTML = `待听写单词数量: ${words.length}`;
+ } else {
+ alert('请至少输入一个单词!');
+ }
+ });
+
+ dictateButton.addEventListener('click', () => {
+ if (currentIndex < words.length) {
+ const word = words[currentIndex];
+ const utterance = new SpeechSynthesisUtterance(word);
+ speechSynthesis.speak(utterance);
+ currentIndex++;
+ wordListDiv.innerHTML = `待听写单词数量: ${words.length - currentIndex}`;
+ } else {
+ document.getElementById('dictationSection').style.display = 'none';
+ resultSection.style.display = 'block';
+ resultsDiv.innerHTML = words.map((word, index) => `
${index + 1}. ${word}
`).join('');
+ }
+ });
+
+
+
+