videos/javascript-interactive-programming-examples

JavaScript 交互式编程示例

交互式编程是JavaScript编程中一种非常有趣和实用的技术，它可以让用户在网页上与代码进行互动。以下是一些JavaScript交互式编程的例子：

基本示例

1. 点击切换文本颜色
   • 当用户点击一个按钮时，页面上的文本颜色会改变。

function changeColor() {
  document.getElementById('text').style.color = 'red';
}

2. 动态显示隐藏内容
   • 点击一个按钮，可以显示或隐藏一段文本。

let isVisible = true;

function toggleText() {
  const textElement = document.getElementById('hiddenText');
  if (isVisible) {
    textElement.style.display = 'none';
  } else {
    textElement.style.display = 'block';
  }
  isVisible = !isVisible;
}

高级示例

1. 创建一个简单的游戏
   • 使用JavaScript创建一个简单的猜数字游戏。

let secretNumber = Math.floor(Math.random() * 100) + 1;
let attempts = 0;

function guessNumber() {
  const userNumber = parseInt(document.getElementById('userGuess').value);
  attempts++;
  if (userNumber === secretNumber) {
    alert(`恭喜你！你猜对了，只用了 ${attempts} 次尝试。`);
  } else if (userNumber < secretNumber) {
    alert('太小了，再试一次！');
  } else {
    alert('太大了，再试一次！');
  }
}

2. 使用Web API制作一个简单的时钟
   • 使用JavaScript和Web API来显示当前时间。

function showTime() {
  const now = new Date();
  const hours = String(now.getHours()).padStart(2, '0');
  const minutes = String(now.getMinutes()).padStart(2, '0');
  const seconds = String(now.getSeconds()).padStart(2, '0');
  document.getElementById('clock').textContent = `${hours}:${minutes}:${seconds}`;
}

setInterval(showTime, 1000);

更多资源

想要了解更多关于JavaScript交互式编程的知识，可以访问本站JavaScript教程。

希望这些例子能帮助你更好地理解JavaScript交互式编程！