【前端html+css3+js】实现背景文字渐变色以及js实现数字递增

这篇文章距离上次修改已过205天，其中的内容可能已经有所变动。

以下是实现背景文字渐变色以及数字递增的简单示例代码：

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Text Gradient and Counter</title>
<style>
  .gradient-text {
    font-size: 48px;
    background: -webkit-linear-gradient(45deg, blue, red);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    margin-bottom: 20px;
  }
</style>
</head>
<body>
 
<div class="gradient-text">渐变色文字</div>
<div id="counter">0</div>
 
<script>
  // 数字递增函数
  function incrementValue() {
    var value = parseInt(document.getElementById('counter').innerText, 10);
    value = isNaN(value) ? 0 : value;
    value++;
    document.getElementById('counter').innerText = value;
  }
 
  // 调用函数，每秒递增一次
  setInterval(incrementValue, 1000);
</script>
 
</body>
</html>

CSS3:




.gradient-text {
  font-size: 48px;
  background: -webkit-linear-gradient(45deg, blue, red);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  margin-bottom: 20px;
}

JavaScript:




function incrementValue() {
  var value = parseInt(document.getElementById('counter').innerText, 10);
  value = isNaN(value) ? 0 : value;
  value++;
  document.getElementById('counter').innerText = value;
}
 
setInterval(incrementValue, 1000);

这段代码实现了背景内的文字渐变色效果，并且使用JavaScript实现了数字每秒递增的功能。使用了CSS3的渐变背景属性以及-webkit-background-clip和-webkit-text-fill-color来实现文字的渐变效果。JavaScript 使用 setInterval 函数每秒调用一次递增函数，更新显示计数的div内容。

【前端html+css3+js】实现背景文字渐变色以及js实现数字递增

评论已关闭

推荐阅读