使用js及css逐一显示文字并分类

???我不明白

已于 2023-11-16 19:26:20 修改

阅读量231

点赞数

文章标签： javascript css

于 2023-11-16 19:25:41 首次发布

本文链接：https://blog.csdn.net/m0_52019659/article/details/134449051

版权

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<style>  
    .hidden {  
        opacity: 0;  
		width: 100px;
    }  
	.left{
		width: 100px;
		height: auto;
		background-color: red;
		float: left;
		font-size: 40px;
		margin-left: 25px;
		padding-left:30px ;
		box-sizing: border-box;
	}
	.right{
		width: 100px;
		height: auto;
		background-color: blue;
		float: left;
		font-size: 40px;
		margin-top: 25px;
		padding-left:30px ;
		box-sizing: border-box;
	}
    @keyframes typewriter {  
        0% {opacity: 0;}  
        50% {opacity: 0.4;}  
        100% {opacity: 1;}  
    }  
</style>  
</head>  
<body>  
  
<!-- 使用JavaScript来生成每个字的类名和相应的动画属性 -->  
<div class="left">
	
</div>
<div class="right">
	
</div>

  
<script>  
// 定义字符串变量poem，存储了一句话  
var poem = "欢迎来到这个世界,我亲爱的朋友！";  
// 获取poem的长度，存储在变量len中  
var len = poem.length;  
// 从页面上找到class为'left'的元素，存储在变量targetDiv中，作为初始的目标div  
var targetDiv = document.querySelector('.left');  
// 定义布尔变量addToRight，并初始化为false，作为一个标志变量，用于判断是否将字符添加到.right div中  
var addToRight = false;  
  
// 开始一个循环，从0到poem的长度-1  
for (var i = 0; i < len; i++) {  
  // 创建一个新的div元素，存储在变量div中  
  var div = document.createElement('div');  
  // 给新创建的div元素设置class属性为'typewrite hidden'  
  div.className = 'typewrite hidden';  
  // 给新创建的div元素设置id属性，值为'word'加上它的索引值（索引值从1开始）  
  div.id = 'word' + (i+1);  
    
  // 判断poem的第i个字符是否为逗号','  
  if (poem.charAt(i) === ',') {  
    // 如果是逗号，则设置addToRight为true，意味着下一个非逗号字符需要添加到.right div中  
    addToRight = true; // 设置标志为true  
  } else if (addToRight) {  
    // 如果不是逗号，但是addToRight为true（即上一个字符是逗号），则更改目标div为'.right'  
    targetDiv = document.querySelector('.right'); // 更改目标div为'.right'  
    // 将addToRight重置为false，以便下一个逗号能正常处理  
    addToRight = false; // 重置标志为false  
  }  
    
  // 将新创建的div元素添加到目标div中  
  targetDiv.appendChild(div); // 将新div添加到目标div中  
  // 设置新创建的div元素的文本内容为poem的第i个字符  
  div.textContent = poem.charAt(i);  
}
  
// 获取页面中所有匹配 '.typewrite' 选择器的元素，返回一个 NodeListOf 对象。  
var totalWords = document.querySelectorAll('.typewrite').length;   
  
// 初始化延迟时间为0s，用于控制每个字的动画开始时间。  
var delay = 0;   
  
// 循环遍历所有匹配 '.typewrite' 选择器的元素。  
for (var i = 0; i < totalWords; i++) {   
  
    // 通过 'word' + (i+1) 获取特定 id 的元素，注意 i 从 0 开始，所以需要加1。  
    var wordElement = document.getElementById('word' + (i+1));    
  
    // 如果获取到的元素存在，则进行以下操作。  
    if (wordElement) {    
  
        // 为该元素应用名为 'typewriter' 的动画效果，持续时间为2s，线性速度，延迟时间由 delay 控制，只播放一次，并在动画结束后保持结束状态。  
        wordElement.style.animation = 'typewriter 0.5s linear ' + delay + 's 1 normal forwards';    
    }    
  
    // 每次循环后，延迟时间增加1s。  
    delay++;    
}
</script>  
  
</body>  
</html>

???我不明白

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
使用js及css逐一显示文字并分类

/ 为该元素应用名为 'typewriter' 的动画效果，持续时间为2s，线性速度，延迟时间由 delay 控制，只播放一次，并在动画结束后保持结束状态。// 定义布尔变量addToRight，并初始化为false，作为一个标志变量，用于判断是否将字符添加到.right div中。// 如果不是逗号，但是addToRight为true（即上一个字符是逗号），则更改目标div为'.right'// 从页面上找到class为'left'的元素，存储在变量targetDiv中，作为初始的目标div。
复制链接

扫一扫