html中好玩的代码

你是不是在学习HTML编程时感到很枯燥呢?如果你想在写代码的同时加入更多的趣味性,那么你一定不能错过下面这些HTML中好玩的代码!

奇妙的画图代码
<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.fillStyle = "#FF0000";
  ctx.fillRect(0,150,75);
</script>

html中好玩的代码

这段代码可以通过HTML5的canvas标签在网页上绘制出一个红色矩形。如果你对canvas的使用还比较生疏，那么可以通过更多的实践来练习。

神奇的鼠标特效代码
<script>
  var heart = document.createElement('div');
  heart.innerHTML = '❤';
  heart.style.fontSize = Math.floor(Math.random() * 30 + 10) + 'px';

  document.body.appendChild(heart);
  
  heart.style.left = Math.floor(Math.random() * window.innerWidth) + 'px';
  heart.style.animationDuration = Math.floor(Math.random() * 10 + 5) + 's';
  
  setTimeout(() => {
    heart.remove();
  },10000);
</script>

这段代码可以添加一个叫做"心形"的特效，当鼠标在页面上移动时，会出现许多飘动的小心心。如果你想提高鼠标特效的数量，可以将setTimeout的时间换成更小的值。

简单的计时器代码
<div id="div_timer">00:00:00</div>
<button onclick="startStop()">开始/暂停</button>
<button onclick="reset()">重置</button>
<script>
  var second = 0;
  var minute = 0;
  var hour = 0;
  var interval;

  function startStop() {
    if (!interval) {
      interval = setInterval(startTimer,1000);
    } else {
      clearInterval(interval);
      interval = null;
    }
  }

  function startTimer() {
    second++;
    if (second >= 60) {
      second = 0;
      minute++;
    }
    if (minute >= 60) {
      minute = 0;
      hour++;
    }
    document.getElementById('div_timer').innerHTML = 
      (hour ? (hour > 9 ? hour : "0" + hour) : "00") + ":" +
      (minute ? (minute > 9 ? minute : "0" + minute) : "00") + ":" +
      (second > 9 ? second : "0" + second);
  }

  function reset() {
    clearInterval(interval);
    second = 0;
    minute = 0;
    hour = 0;
    interval = null;
    document.getElementById('div_timer').innerHTML = "00:00:00";
  }    
</script>

这段代码可以编写一个简单的计时器。按下开始/暂停按钮可以开始或暂停计时器，并按下重置按钮可以重置计时器。如果你想更深入地了解计时器的实现，可以在代码中添加更多的JavaScript功能。

以上是我为大家带来的三个HTML中好玩的代码，相信可以给你带来更多的乐趣。记得在实践中不断尝试吧!

相关推荐