js+css实现打字效果

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

1.效果

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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • C++实现类似延时停顿的打字效果

    C++实现类似延时停顿的打字效果

    能够定位光标位置,改变屏幕设置 #include <iostream> #include <windows.h> #include <conio.h> #include <stdlib.h> //system函数所需头文件 #define stoptimelong 500 //Sleep函数以毫秒为单位,Sleep(500);表示停半秒 using namespace std; //跳到屏幕指定坐标 void gotoxy(int x,int y) { CO

  • javascript实现自动输出文本（打字特效）

    主要利用了setTimeout(),递归和String.substring(); 做出的效果就像是有一个打字员在打字. <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name=&quo

  • JavaScript打字小游戏代码

    JavaScript打字小游戏代码

    功能模块: 程序设计: 1.可选择游戏时间,显示倒计时 1.定义全局变量 2.可选择英文字母出现个数 2.控制游戏时间函数 3.统计得分 3.动画效果 4.菜单选项 4.设定字母图片出现的时间 5.判断函数 6.游戏菜单 7.游戏时间选项 8.显示游戏时间 9.游戏难度选项 10.游戏得分 先上效果图:(PS:美工是硬伤) 主要代码设计: 复制代码 代码如下: //-------全局变量------- var data={ "10":["<img src='images

  • JavaScript模拟实现键盘打字效果

    $(function () { var input_type = { init:function ($obj) { this.name = $obj.html().split("") this.length = this.name.length; this.i = 0; }, pri:function () { var $this = this //在此处只能使用闭包,因为windown.settimeout使函数的this指向object windown,而非原型链的this对象.而

  • JavaScript实现打字效果的方法

    本文实例讲述了JavaScript实现打字效果的方法.分享给大家供大家参考.具体实现方法如下: <input type="button" onclick='start("高考了")' value="start"/> <input type="text" id="here" /> <script type="text/javascript"> funct

  • javascript 打字游戏实现代码

    javascript 打字游戏实现代码

    效果如图所示:下面是核心代码 复制代码 代码如下: GAME = { //随机产生字母 randLetter: function() { var arrLetter = new Array("A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K&qu

  • javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字

    javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字

    前两讲我告诉了大家如何使人物移动,那么今天我们就来看看如何实现仿<三国志曹操传>人物情景对话.具体的链接我写在下方. 一.前言 相信大家都还记得吧,在某些新闻里会有一些惨不忍睹的结果是用像打字机一样的方式把文字弄出来.那么今天的主要目的就是要办到这个. 就在9月5日的时候,我在办公室里起了个做这种程序的念头,并且有了点思路.我首先想用调margin的方法,按理说是作出来了,但很不让人满意,毕竟很麻烦,并且技术也差.所以我打算用上数组和循环.9月13日我抽空写出来了,但由于这几天很忙,基本上在工

  • javascript 打字效果的文字特效

    本节代码主要使用了 onMousedown 事件和 event.button 属性,主要功能和用法如下. • setTimeout 方法,在执行时是在载入后延迟指定时间后,去执行一次表达式,仅执行一次. • charAt 方法返回一个字符值,该字符位于指定索引位置.字符串中的第一个字符的索引为0,第二个的索引为1,等等.超出有效范围的索引值返回空字符串. 打字效果的文字特效 var layers = document.layers; var style = document.all; var b

  • C++实现的打字母游戏示例

    本文实例讲述了C++实现的打字母游戏.分享给大家供大家参考,具体如下: // 打字母的游戏 // 编译代码请先安装 VC 绘图库(V20091123) #include <graphics.h> #include <conio.h> #include <time.h> // 欢迎界面 void welcome() { // 输出屏幕提示 cleardevice(); setcolor(YELLOW); setfont(64, 0, "黑体"); ou

  • C语言制作简易金山打字通功能的代码

    C语言制作简易金山打字通功能的代码

    本小项目最终的实现如下: 输入相应的字符,然后在最下面能够统计错误的个数,输入字符总个数,输入个数以及错误率. 那如何来实现这个小项目呢?规划如下,我们需要大致实现以下三个模块: (1)输入模块 (2)显示模块 (3)统计模块 实现过程: 使用getch()函数可以获取键盘输入的字符,显示可以使用Window自带的API来实现,统计就很简单了,就是计算输入字符的个数等等...接下来就是简单的软件逻辑的实现. 源码如下: #include <stdio.h> #include <strin

  • javascript之textarea打字机效果提示代码推荐

    比较不错的应用 function $(id){return document.getElementById(id);} var msgall="一个专业的收藏精品脚本学习资料的网站,修正错误,努力打造精品脚本学习站,我们将会为大家附上游戏脚本资源,源码,软件等信息" var msg = "输入问题内容,点击"我要提问"." ; var interval = 100 var spacelen = 100; var space10=" &q

  • 基于Css3和JQuery实现打字机效果

    基于Css3和JQuery实现打字机效果

    先给大家附上效果图: 最近做项目的时候需要实现一个字符逐个出现的打字效果,用css的clip+css的动画实现的,与自己写的打字机效果相结合,整 理一起,效果很赞. 先来说说这个线条,我们会看到它是条,实际上就是个四周border有规律的显示隐藏,那么这里必定会想到after,before属性, 我们暂且先考虑after. 先建立一个box,然后after一个边框 <div class="box"></div> .box:before{ content: '';

随机推荐