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 相关文章推荐
AJAX的跨域与JSONP(为文章自动添加短址的功能)
Jan 17 Javascript
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
Apr 27 Javascript
javascript date格式化示例
Sep 25 Javascript
js实现图片在未加载完成前显示加载中字样
Sep 03 Javascript
jquery操作select方法汇总
Feb 05 Javascript
AngularJS基础知识笔记之表格
May 10 Javascript
JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法
Aug 03 Javascript
Ionic + Angular.js实现图片轮播的方法示例
May 21 Javascript
详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用
Jun 16 Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
Aug 19 Javascript
React降级配置及Ant Design配置详解
Dec 27 Javascript
微信小程序基于Taro的分享图片功能实践详解
Jul 12 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
PHP4(windows版本)中的COM函数
2006/10/09 PHP
《PHP编程最快明白》第二讲 数字、浮点、布尔型、字符串和数组
2010/11/01 PHP
Yii2 rbac权限控制之菜单menu实例教程
2016/04/28 PHP
php将print_r处理后的数据还原为原始数组的解决方法
2016/11/02 PHP
php格式文件打开的四种方法
2018/02/24 PHP
基于laravel-admin 后台 列表标签背景的使用方法
2019/10/03 PHP
JS版网站风格切换实例代码
2008/10/06 Javascript
jquery简单实现滚动条下拉DIV固定在头部不动
2013/11/25 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
2015/04/12 Javascript
JS中捕获console.log()输出的方法
2015/04/16 Javascript
JS中产生标识符方式的演变
2015/06/12 Javascript
javascript HTML+CSS实现经典橙色导航菜单
2016/02/16 Javascript
JavaScript兼容性总结之获取非行间样式案例
2016/08/07 Javascript
JS实现动态修改table及合并单元格的方法示例
2017/02/20 Javascript
微信小程序动态添加分享数据
2017/06/14 Javascript
AngularJS 中的数据源的循环输出
2017/10/12 Javascript
微信小程序使用request网络请求操作实例
2017/12/15 Javascript
使用async、enterproxy控制并发数量的方法详解
2018/01/02 Javascript
vue拖拽组件使用方法详解
2018/12/01 Javascript
微信小程序事件 bindtap bindinput代码实例
2019/08/26 Javascript
vue遍历生成的输入框 绑定及修改值示例
2019/10/30 Javascript
python实现简单点对点(p2p)聊天
2017/09/13 Python
Windows下实现将Pascal VOC转化为TFRecords
2020/02/17 Python
详解python环境安装selenium和手动下载安装selenium的方法
2020/03/17 Python
Numpy一维线性插值函数的用法
2020/04/22 Python
CSS3制作酷炫的条纹背景
2017/11/09 HTML / CSS
广告学专业应届生求职信
2013/10/01 职场文书
党支部书记岗位责任制
2014/02/11 职场文书
预备党员表决心书
2014/03/11 职场文书
毕业自我鉴定总结
2014/03/24 职场文书
委托书模板
2014/04/04 职场文书
纪念九一八事变83周年国旗下讲话稿
2014/09/15 职场文书
企业培训简报范文
2015/07/20 职场文书
中学生打架检讨书之500字
2019/08/06 职场文书
JVM入门之类加载与字节码技术(类加载与类的加载器)
2021/06/15 Java/Android
Redis Cluster集群动态扩容的实现
2021/07/15 Redis