使用JS实现字体逐渐显示

2023-12-28 15:23:59

<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="utf-8">
?? ??? ?<title></title>
?? ??? ?<style>
?? ??? ??? ?span{
?? ??? ??? ??? ?font-size: 50px;
?? ??? ??? ??? ?font-weight: bold;
?? ??? ??? ??? ?border: 1px solid #000;
?? ??? ??? ??? ?
?? ??? ??? ?}
?? ??? ??? ?p{color:rgb(133,45,200);}
?? ??? ??? ?
?? ??? ?</style>
?? ?</head>
?? ?<body>
?? ??? ?<span> </span>
?? ?
?? ??? ?
?? ??? ?<script>
?? ??? ??? ?
?? ??? ??? ?
?? ??? ??? ?var i = 0;
?? ??? ??? ?var ts = "你好，朋友欢迎关注我！".split('');
?? ??? ??? ?function addSpan(){
?? ??? ??? ??? ?var np = document.querySelector('span').cloneNode(true);
?? ??? ??? ??? ?np.innerHTML = ts[i];
?? ??? ??? ??? ?document.querySelector('body').appendChild(np);
?? ??? ??? ??? ?i++;
?? ??? ??? ??? ?if(i==ts.length){
?? ??? ??? ??? ??? ?clearInterval(dsq);
?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ??? ?var dsq = setInterval(addSpan,1000);//调节字体出现速度? ??
?? ??? ?</script>
?? ??? ?
?? ?</body>
?? ?
</html>

//这以上就可以实现字体逐渐显示，可以自己调节字体颜色和出现速度

文章来源:https://blog.csdn.net/m0_74183915/article/details/135229694
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。