首页 > 其他分享 >原生js弹字效果

原生js弹字效果

时间:2024-04-18 10:24:56浏览次数:27  
标签:原生 index aa currentWord timer js let 弹字

效果预览:

手速不够快,实际上是整体都是一个个崩出来的


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="width:100%;  margin:0px auto"> 
<div  id="language_two">

</div>
</div>
<script language="javascript">
    var index=0;
	let aa = 
	`我是一个没得感情的杀手,
	一个工具人
	一个没得感情的编码工具
	一个木有心的人
	另外,我真的想吃烧烤,
	还有,请给我一个女同桌
	`
let alen = aa.length  
	let timer = null
    function type(){
		if(index === alen ){
			clearInterval(timer)
			return 
		}
		let currentWord = aa.substring(0,index )
		console.log(currentWord,`currentWord`)
        document.getElementById("language_two").innerText = currentWord + aa[index]
		index++ 
		console.log('++++')
    }
  timer =  setInterval(type, 100);
</script>
</body>
</html>

标签:原生,index,aa,currentWord,timer,js,let,弹字
From: https://www.cnblogs.com/hjk1124/p/18142930

相关文章

  • 30 天精通 RxJS (23):Subject, BehaviorSubject, ReplaySubject, AsyncSubject
    昨天我们介绍了Subject是什么,今天要讲Subject一些应用方式,以及Subject的另外三种变形。Subject昨天我们讲到了Subject实际上就是ObserverPattern的实例,他会在内部管理一份observer的清单,并在接收到值时遍历这份清单并送出值,所以我们可以这样用Subjectvarsubject......
  • commonjs
    Commonjs什么是CommonJsCommonJs是js模块化的社区规范模块化产生的原因随着前端页面复杂度的提升,依赖的第三方库的增加,导致的js依赖混乱,全局变量的污染,和命名冲突单个js文件内容太多,导致了维护困难,拆分成为多个文件又会发生第一点描述的问题v8引擎的出现,让js......
  • paper list(JS变量名恢复)
    PapersListAGeneralPath-BasedRepresentationforPredictingProgramProperties.[pdf]UriAlon,MeitalZilberstein,OmerLevy,EranYahav.PLDI,2018.CharacterizingtheNaturalLanguageDescriptionsinSoftwareLoggingStatements.[pdf][code]Pinji......
  • JS混淆代码数据集构建方法
    数据获取(1)公开JS数据集,比如CodeSearchNet;(2)自行构建JS数据集,爬取Github开源前端项目;数据描述Github中采集前端项目文件分类如下,从中提取JS文件数据预处理  其中比较重要的步骤:  (1)代码混淆:使用现有工具,如UglifyJS、Terser、babel-minify、JS-Obfuscator;   ......
  • JS代码混淆器:iPaGuard — 让你的代码看起来令人头大
     在当今互联网时代,JavaScript作为一种广泛应用的编程语言,扮演着至关重要的角色。然而,随着网络技术的不断发展,JavaScript代码也面临着日益增加的安全威胁。为了保护JavaScript代码免受未经授权的复制、修改和逆向工程,开发者需要借助专业的工具和技术。其中,iPaGuard就是一款......
  • 这篇 DolphinScheduler on k8s 云原生部署实践,值得所有大数据人看!
    在当前快速发展的技术格局中,企业寻求创新解决方案来简化运营并提高效率成为一种趋势。ApacheDolphinScheduler作为一个强大的工具,允许跨分布式系统进行复杂的工作流任务调度。本文将深入探讨如何将ApacheDolphinScheduler适配并整合进现代IT环境,提升其在云原生部署中的表现。......
  • 离线使用Pyecharts制作可视化图表——方法1:启动本地 js 服务
    在离线使用Pyechart进行可视化数据绘图的时候,会有生成的html网页打不开,或者是网页不出图像,是一个空白页面的问题出现,搜索发现其主要原因是:由于PyEcharts在升级到1.x版本后,将原来HTML网页中使用到的很多js文件换为了在线获取的方式,例如打开我本地生成的bar.html示例文件,就会发......
  • autojs 坚果云上传文件跟下载
    例子:点击查看代码/**坚果云*/letJgy=JianGuoYunHelper();//初始化Jgy.init("username","password","坚果云测试_数据备份");//文件名Jgy.setThisFileName("测试文件");//上传数据(覆盖)letputRes=Jgy.put("测试数据测试数据测试数据");//获取数......
  • HarmonyOS 项目 module.json5默认配置属性及描述
    module.json5entry>src>main>module.json5是模块的配置文件,包含当前模块的配置信息。 其中module对应的是模块的配置信息,一个模块对应一个打包后的hap包,hap包全称是HarmonyOSAbilityPackage,其中包含了ability、第三方库、资源和配置文件。其具体属性及其描述可以参照下表1。......
  • js 搜索查找算法
    线性查找线性查找是最简单的一种查找算法,它的基本思想是从头到尾遍历待查找的数据集,找到对应的元素,时间复杂度为O(n)。代码实现:functionlinearSearch(arr,target){for(leti=0;i<arr.length;i++){if(arr[i]===target){returni;......