js+css实现打字效果


Posted in Javascript onJune 24, 2020

本文实例为大家分享了JavaScript实现打字效果的具体代码,供大家参考,具体内容如下

1.效果

js+css实现打字效果

2.源码

<html>
<head>
 <style type="text/css">
 #myDiv{
  display: inline-block;
  width:500px;
  height:300px;
  background-color:rgba(0,0,0,0.3);
  color:hsla(0,100%,70%,1);
  word-wrap:break-word;
  line-height:30px;
  letter-spacing:3px;
  padding-left:3px;
  text-indent:40px;
  border-radius:5px;
  -webkit-box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.1);
  -moz-box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.1);
  box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.1);
 }
 </style>
 <script type="text/javascript">
 window.onload = function () {
  var myDiv = document.getElementById("myDiv");
  var contentArr = "秋天来临了天空像一块覆盖大地的蓝宝石。村外那个小池塘睁着碧澄澄的眼睛,凝望着这美好的天色。一对小白鹅侧着脑袋欣赏自己映在水里的影子。山谷里枫树的叶子,不知是否喝了过量的酒,红的像一团火似的。村前村后的稻子,低着头弯着腰,在秋风中默默地等待着人们去收割,半空中,排着“人”字形的雁群,高兴的唱着歌,告别人们,向天边慢慢飞去……".split("");
  var content = "";
  var index = 0;
  var ID = setInterval(function () {
  content += contentArr[index];
  myDiv.innerHTML = content + "_";
  index++;
  if(index === contentArr.length){
   myDiv.innerHTML = content ;
   clearInterval(ID);
   console.log("结束了");
  }
  },100);
 }
 </script>
</head>
<body>
<div id="myDiv"></div>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS获取IUSR_机器名和IWAM_机器名帐号的密码
Dec 06 Javascript
xml 与javascript结合的问题解决方法
Mar 24 Javascript
jQuery(js)获取文字宽度(显示长度)示例代码
Dec 31 Javascript
JavaScript使用setTimeout实现延迟弹出警告框的方法
Apr 07 Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
Apr 14 Javascript
JavaScript数组的栈方法与队列方法详解
May 26 Javascript
JavaScript ES5标准中新增的Array方法
Jun 28 Javascript
jQuery响应滚动条事件功能示例
Oct 14 jQuery
node使用Koa2搭建web项目的方法
Oct 17 Javascript
Three.js基础学习教程
Nov 16 Javascript
JavaScript时间日期操作实例小结【5个示例】
Dec 22 Javascript
Quasar Input:type=&quot;number&quot; 去掉上下小箭头 实现加减按钮样式功能
Apr 09 Javascript
简单介绍react redux的中间件的使用
Apr 06 #Javascript
webpack源码之loader机制详解
Apr 06 #Javascript
vue.js项目nginx部署教程
Apr 05 #Javascript
常用的 JS 排序算法 整理版
Apr 05 #Javascript
通过 JS 判断页面是否有滚动条的实现方法
Apr 05 #Javascript
mint-ui在vue中的使用示例
Apr 05 #Javascript
webpack热模块替换(HMR)/热更新的方法
Apr 05 #Javascript
You might like
PHP基础学习小结
2011/04/17 PHP
PHP的substr_replace将指定两位置之间的字符替换为*号
2011/05/04 PHP
php操作memcache缓存方法分享
2015/06/03 PHP
ajax+php实现无刷新验证手机号的实例
2017/12/22 PHP
PHP convert_cyr_string()函数讲解
2019/02/13 PHP
PHP常用工具函数小结【移除XSS攻击、UTF8与GBK编码转换等】
2019/04/27 PHP
javascript学习随笔(使用window和frame)的技巧
2007/03/08 Javascript
P3P Header解决Cookie跨域的问题
2013/03/12 Javascript
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
2014/05/05 Javascript
node.js将MongoDB数据同步到MySQL的步骤
2017/12/10 Javascript
Angular2+如何去除url中的#号详解
2017/12/20 Javascript
Vue中v-for的数据分组实例
2018/03/07 Javascript
nodejs高大上的部署方式(PM2)
2018/09/11 NodeJs
微信小程序swiper禁止用户手动滑动代码实例
2019/08/23 Javascript
JS寄快递地址智能解析的实现代码
2020/07/16 Javascript
[04:44]显微镜下的DOTA2第二期——你所没有注意到的细节
2014/06/20 DOTA
详解Python中DOM方法的动态性
2015/04/11 Python
用python编写第一个IDA插件的实例
2018/05/29 Python
总结Python图形用户界面和游戏开发知识点
2019/05/22 Python
python命令行工具Click快速掌握
2019/07/04 Python
Django rest framework分页接口实现原理解析
2020/08/21 Python
python 实现单例模式的5种方法
2020/09/23 Python
中国高端家电购物商城:顺电
2018/03/04 全球购物
联想阿根廷官方网站:Lenovo Argentina
2019/10/14 全球购物
结构和类有什么异同
2012/07/16 面试题
如何写一封打动人心的求职信
2014/02/17 职场文书
情况说明书格式范文
2014/05/06 职场文书
生产操作工岗位职责
2014/09/16 职场文书
2014年幼儿园个人工作总结
2014/11/10 职场文书
2014年创卫工作总结
2014/11/24 职场文书
2015年档案管理工作总结
2015/04/08 职场文书
离婚被告代理词
2015/05/23 职场文书
心得体会格式及范文
2016/01/25 职场文书
详解解Django 多对多表关系的三种创建方式
2021/08/23 Python
不负正版帝国之名 《重返帝国》引领SLG手游制作新的标杆
2022/04/07 其他游戏
mysql 索引的数据结构为什么要采用B+树
2022/04/26 MySQL