分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 前端开发

js渐显文字 时间间隔

发布时间:2023-09-06 01:26责任编辑:胡小海关键词:js

文字指定时间间隔,逐渐显现所有文字。

一日,看到一官网首页有个文字渐显,感觉和手写上去一样,很是炫酷。F12发现不是动画,于是研究了下。

<!doctype html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>渐显</title></head><body><div style="font-family:宋体" id="append"></div><script> ???var append = document.getElementById("append");
   ???var str1 = ‘你好世界,世界那么大,我好想去看看!!‘;  //要显现的文字 ???var array1 = str1.split(‘‘);  //将文字切割成单个 ???console.log(array1); ???var timer = setInterval(jianbian, 300);  //设置时间间隔 循环周期为300毫秒,自行修改 ,每300毫秒执行一次jianbian方法 ???console.log(array1.length); ???var i = 0;
  //进入方法 ???function jianbian() {
     //循环完毕撤销时间器 ???????if (i == array1.length) { ???????????clearInterval(timer); ???????????console.log(‘取消时间器‘); ???????} else {
       //依次追加文字 ???????????append.innerHTML += array1[i]; ???????????console.log(i + ‘:‘ + array1[i]); ???????????i++; ???????} ???}</script></body></html>

  字体样式就不贴了。

总结:多看别人写的东西,终会成就那样的人。

js渐显文字 时间间隔

原文地址:https://www.cnblogs.com/yangchas/p/9275001.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved