js css模仿打字效果

1.效果

2.源码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<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>

 


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/362480.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

iframe 高度根据子页面来确定

标题描述一、解决方法解决代码二、关于高度问题简单讲一下jquery中的 height()&#xff0c;innerHeight()、outHeight()&#xff0c;js中的offsetHeight、clientHeight、scrollHeight。如何获取没有给出高度的元素的高度&#xff1f;详细介绍offsetHeight,clientHeight,scrollH…

layui 子页面写弹出框覆盖父页面,以及给弹框中的表单赋值

咋说呢&#xff0c;因为对 layui 不太熟悉&#xff0c;这个弹出框搞了好久&#xff0c;看了好多解决方案&#xff0c;大致尝试了一下其中几种&#xff0c;在坑中无法自拔。。。总之终于搞出来了&#xff0c;在这里分享一下我的笔记。 着急的直接 戳这里 看解决代码。 尝试 1、…

html实现文字垂直居中且设置间隔

使用table和table-call布局 将表格作为一个table表&#xff0c;使用table-cell定义每个单元格的布局为table-cell, 抛出display的有效值 单元格中间的间隔使用 border-spacing:10px; border-collapse: separate;定义单元格vertical-align: middle; display: table-cell;代码源码…

Hibernate隐藏的宝石:pooled-lo优化器

介绍 在这篇文章中&#xff0c;我们将揭示一个序列标识符生成器&#xff0c;​​它结合了标识符分配效率和与其他外部系统的互操作性&#xff08;同时访问底层数据库系统&#xff09;。 传统上&#xff0c;有两种序列标识符策略可供选择。 序列标识符&#xff0c;对于每个新值…

vue inheritAttrs、$attrs和$listeners使用

inheritAttrs、$attrs和$listeners使用场景&#xff1a; 组件传值&#xff0c;尤其是祖孙组件有跨度的传值。 &#xff08;1&#xff09;inheritAttrs 属性说明&#xff1a;https://cn.vuejs.org/v2/api/#inheritAttrs 说明比较晦涩。 组件传值一般是通过props传值的。inhe…

仍不切换到Java 8的6个理由

Java 8很棒。 期。 但是……在我们有机会玩耍并玩弄它之后&#xff0c;就该退出了&#xff0c;避免吃盐。 所有的好东西都是有代价的&#xff0c;在这篇文章中&#xff0c;我将分享Java 8的主要痛点。请确保在升级和放弃7之前您已经意识到了这些痛点。 1.并行流实际上会使您减…

鼠标滚轮切屏效果

某天发现一个网站《北京新鸿儒世纪网络技术有限公司》&#xff0c;一开始打开&#xff0c;哇&#xff0c;好简单啊&#xff0c;特别是首页&#xff0c;就一张图&#xff0c;后来发现里面有挺多小细节的&#xff0c;比如&#xff1a;做了媒体响应式、滚轮切屏&#xff08;第一次…

小程序 自定义组件报错[“usingComponents“][“my-list“] 未找到

根据官网案例写了一个自定义组件&#xff0c;引入时总是报这个错误。 后面在社区里面找到了解决办法&#xff0c;把上面配置中改成&#xff1a;"my-list": "/components/my-list/my-list" 就可以了。 具体原因&#xff1a;官方文档上的自定义组件是 4 个文…

http 请求报文和响应报文

1、请求报文 示例&#xff1a; 2、响应报文 示例&#xff1a; 更多专业前端知识&#xff0c;请上 【猿2048】www.mk2048.com

小程序 封装table组件

实在是懒得自己封装了&#xff0c;就在网上找了一下别人封装好的&#xff0c;这里主要参考的是 灰信网上的一篇文章&#xff0c;我在他的基础上改了一下样式&#xff0c;动态生成列表每一列列宽。 表格可左右横向滑动 一、子页面 table.wxml <scroll-view class"ta…

服务器--停止启动服务,查看日志文件

停止启动服务 ./shutdown.sh 停止掉当前服务 ./startup.sh 启动当前服务 例如&#xff1a; Tomcat服务器&#xff1a;在apache-tomcat-7.0.82/bin 目录下&#xff0c;sh shutdown.sh 停止掉当前服务&#xff0c;sh startup.sh 启动当前服务 查看日志文件&#xff1a; Tomcat查看…

linq 解决winForm中控件CheckedListBox操作的问题。(转载)

1.获取CheckedListBox选中项的文本的字符串&#xff0c;并用分隔符连接。系统没有提供相应的属性&#xff0c;方法。 这里我们利用3.0的特性给其来个扩展方法,如下&#xff1a; public static stringGetCheckedItemsText(thisCheckedListBox box) { stringre…

Glass Fish 4.0.1中的Jersey SSE功能

Glass Fish为各种Java EE规范捆绑了不同的参考实现&#xff0c;例如&#xff0c;CDI的Weld&#xff0c;JSF的Mojarra&#xff0c;WebSocket的Tyrus&#xff0c;JAX-RS的Jersey。 Glass Fish 4.0.1即将发布&#xff0c;并计划涵盖许多组件/模块的更新&#xff0c;这些组件/模块当…

canvas1:简单介绍、开始使用、画直线+虚线

目录 一、简单介绍 二、开始使用 三、画直线、虚线 3.1 画直线 1. 画直线的步骤&#xff1a; 2. 设置直线的样式 3. 绘制多条直线 3.2 画虚线 四、整理使用到的方法&#xff1a; 参考了廖雪峰老师的笔记。 一、简单介绍 Canvas是 HTML5新增的组件&#xff0c;它就像…

Test of etco

Test of etco 转载于:https://www.cnblogs.com/yanjunz/archive/2010/12/22/1913852.html

js setTimeout和setInterval区别

1、区别 2、示例代码 <!DOCTYPE html><html lang"zh"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><meta http-equiv"X-UA-Compatibl…

将Android源码集成到Eclipse中的方法

1、 首先&#xff0c;下载Android源码&#xff1a; Android 2.0源码下载地址&#xff1a;http://download.csdn.net/source/2931366 Android 2.1源码下载地址&#xff1a;http://download.csdn.net/source/2931364 2、 然后&#xff0c;新建一个名为【sources】的文件夹&#x…

为GWT设置开发环境

介绍 这是旨在用Java开发跨平台移动应用程序的系列文章的一部分 。 在此博客文章中&#xff0c;我们将了解GWT是什么&#xff0c;并为GWT设置开发环境。 GWT是一个开源开发工具包&#xff0c;用于开发基于浏览器的复杂Ajax应用程序。 使用GWT&#xff0c;您可以用Java开发Rich…

vue slot的使用

一、自定义组件中多个 slot 很久之前就想把表格封装了&#xff0c;奈何那时太过担心自己的技术。今天趁着劲头大致看了一下&#xff0c;把表格封装了&#xff0c;倒是比想象中的要简单很多 O(∩_∩)O 哈哈~ 暂且不考虑细节&#xff0c;大致封装表格要考虑的有&#xff1a;是否…

虫师Selenium2+Python_6、Selenium IDE

P155——创建测试用例录制脚本编辑脚本定位辅助P159——Selenium IDE 命令在浏览器中打开URL&#xff0c;可以接受相对路径和绝对路径两种形式openopen(url)单击链接、按钮、复选框和单选框click(elementLocator)模拟键盘的输入&#xff0c;向指定的input中输入值type(inputLoc…