当前位置：首页 > 行业动态 > 正文

html好玩的js

HTML构建网页骨架，JS赋予交互灵魂，结合可创造动态动画、趣味游戏等，让网页生动有趣

动态文字特效

通过JS控制HTML元素样式，实现文字颜色、大小、位置的动态变化。
示例：点击按钮让文字变色并旋转 

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">动态文字</title>
  <style>
    #text {
      font-size: 30px;
      transition: all 0.5s;
    }
  </style>
</head>
<body>
  <div id="text">点击我变色旋转！</div>
  <button onclick="animateText()">触发动画</button>
  <script>
    function animateText() {
      const text = document.getElementById('text');
      text.style.color = '#' + Math.floor(Math.random()16777215).toString(16); // 随机颜色
      text.style.transform = 'rotate(360deg)'; // 旋转一周
    }
  </script>
</body>
</html>

图片轮播图

用JS定时切换图片，模拟自动轮播效果。
核心逻辑：

  1. 定义图片数组 images = ['img1.jpg','img2.jpg','img3.jpg']
  2. 用 setInterval 定时更换 <img> 的 src 属性
  3. 配合CSS实现过渡动画

代码框架： 

let currentIndex = 0;
const images = ['img1.jpg','img2.jpg','img3.jpg'];
setInterval(() => {
  currentIndex = (currentIndex + 1) % images.length;
  document.getElementById('carousel').src = images[currentIndex];
}, 2000); // 每2秒切换一次

⏱️ 简易计时器

用JS实现倒计时功能，结合 setInterval 更新页面显示。
关键步骤：

  1. 获取用户输入的倒计时秒数
  2. 用 setInterval 每秒减少剩余时间
  3. 时间归零时清除定时器并提示

代码片段： 

let timeLeft = 10; // 初始10秒
const timer = setInterval(() => {
  if(timeLeft > 0){
    document.getElementById('timer').innerText = timeLeft;
    timeLeft--;
  } else {
    clearInterval(timer);
    alert('时间到！');
  }
}, 1000);

单元表格：常见JS操作对照

功能描述 HTML元素 JS方法 效果示例
修改文本 <p> element.innerText 更改段落文字
隐藏元素 <div> element.style.display='none' 隐藏DIV区域
添加事件 <button> element.addEventListener('click',function) 点击触发函数
创建元素 document.createElement('tag') 动态生成新标签

问题与解答

问题1：如何让文字颜色每隔1秒随机变化？
解答： 

setInterval(() => {
  document.getElementById('text').style.color = 
    '#' + Math.floor(Math.random()16777215).toString(16);
}, 1000);

问题2：如何在图片轮播图中添加左右箭头手动切换？
解答：

  1. 在HTML中添加左右按钮： 
    <button id="prev">←</button>
<img id="carousel" src="img1.jpg">
<button id="next">→</button>
  2. 监听按钮点击事件： 
    document.getElementById('prev').onclick = () => {
  currentIndex = (currentIndex 1 + images.length) % images.length;
  document.getElementById('carousel').src = images[currentIndex];
};
document.getElementById('next').onclick = () => {
  currentIndex = (currentIndex + 1) % images.length;
  document.getElementById('carousel').src = images[currentIndex];
};
javascript
0

相关文章