`
guochongcan
  • 浏览: 326155 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

如何在网页中实现打字效果

阅读更多

  如何在网页中实现打字效果
解决思路
所谓打字效果,就是让预定文字逐个显示出来。主要还是字符串的一些方法的运用。
具体步骤

1.先插入要显示打字效果的容器。

<span id="demo"></span>

2.加入脚本。

<script defer>
var text="JavaScript实现的打字效果"
var delay=200
var i=0
function scrollit(){
demo.innerText=text.slice(0,i++)+"_"         
if(i>text.length){
    i=0
    setTimeout("scrollit()",delay*10)       
}
else setTimeout("scrollit()",delay)             
}
scrollit()
</script>

3.完整代码。

<span id="demo"></span>
<script defer>
var text="JavaScript实现的打字效果"    //预定文字
var delay=200                         //文字出现的时间间隔
var i=0                               //初始化变量 i
function scrollit(){
//设置 id 为 demo 的对象内的文字为从变量 text 的 0 开始到 i 间的文字加"_"
demo.innerText=text.slice(0,i++)+"_"   
if(i>text.length){              //当 i 大于 text 的文本长度时
    i=0                           //重设 i 为 0,使文字重新从第一个文字出现
//延时执行scrollit()函数,delay*10是为了让显示完整文字的时间长一点
    setTimeout("scrollit()",delay*10)  
}
    //否则在delay毫秒后再次执行scrollit()函数
else setTimeout("scrollit()",delay)             
}
scrollit() //调用scrollit()函数
</script>

特别提示
代码运行后的效果如图 3.49所示。

图 3.49 JavaScript实现的打字效果

特别说明


JavaScript 中经常需要用到字符串的处理方法,方法不多,主要是要有良好的创意,才能用现有的方法来实现创造性的新效果。

分享到:
评论

相关推荐

    网页实现打字效果-html

    网页中的打字效果是一种...总结,网页实现打字效果是通过HTML、CSS和JavaScript的组合来完成的。HTML提供内容结构,CSS负责样式和动画,而JavaScript则负责动态内容的更新和事件处理,共同创造出吸引人的打字动画效果。

    易语言源码易语言模仿网页打字效果源码.rar

    在"易语言模仿网页打字效果源码"中,我们可以看到具体的实现细节。源码会包含初始化窗口、设定定时器、更新文本的函数调用等关键部分。通过阅读和理解这些代码,我们可以了解如何在易语言中创建和控制定时器,以及...

    HTML-TYPE-EFFECT实现网页上创建打字效果

    在"typing-effect.js"这个文件中,很可能包含了实现打字效果的核心代码。JavaScript 可能通过操作DOM(文档对象模型)来控制HTML元素,特别是`&lt;span&gt;`或`&lt;p&gt;`等包含待显示文本的标签。代码可能使用了定时器(如`...

    网页版打字游戏

    总的来说,【网页版打字游戏】是一款利用JavaScript技术实现的在线学习工具,它将教育与娱乐相结合,通过游戏化设计激发用户的学习兴趣,同时提供了一种自我评估和提高打字技能的有效途径。无论是初学者还是经验丰富...

    纯CSS3属性animation实现的打字效果

    网页打字效果,相信大家已经见过了,基本上都是基于JS实现的,还比较麻烦 今天特意给大家推荐一个只用CSS3就可以实现的打字效果 使用方法: 将head中的样式应用到你需要显示的文字上即可 (注意:不兼容低...

    仿金山打字通而来的网页版打字游戏javascrip

    【标题】"仿金山打字通网页版打字游戏基于JavaScript实现" 【正文】 在IT领域,编程游戏是一种有效的学习工具,尤其是对于初学者来说,它们可以将枯燥的编程概念转化为有趣的游戏体验。"仿金山打字通网页版打字...

    易语言模仿网页打字效果

    在这个“易语言模仿网页打字效果”项目中,我们将探讨如何使用易语言来实现类似网页上的动态打字效果。 在网页设计中,动态打字效果常常用于吸引用户的注意力,提升页面的互动性和趣味性。这种效果通常是通过...

    打字效果动画的4种实现方法(超简单)

    在本文中,我们将探讨四种实现打字效果动画的方法,这些方法简单易懂,适合不同技术水平的开发者使用。打字效果动画是一种常见的网页交互设计,能够为用户提供生动有趣的体验,尤其适用于展示文本内容或模拟真实打字...

    纯CSS3属性animation实现的打字效果.zip

    网页打字效果,相信大家已经见过了,基本上都是基于JS实现的,还比较麻烦 今天特意给大家推荐一个只用CSS3就可以实现的打字效果 使用方法: 将head中的样式应用到你需要显示的文字上即可 (注意:不兼容低版本...

    标题有打字效果jQuery焦点图.zip

    3. JavaScript文件:包含实现打字效果和焦点图滚动的核心逻辑,可能包括自定义的jQuery插件。 4. 图片文件:是焦点图中要展示的内容,可能包括多个不同图片。 5. 其他资源文件:如图标、字体等,可能用于增强界面...

    web打字效果

    var text = "JavaScript实现打字效果"; // 设置每个字符显示之间的延迟时间(毫秒) var delay = 200; // 初始化索引值 var i = 0; // 定义显示函数 function scrollit() { // 获取id为demo的元素 var demo = ...

    打字效果代码.rar

    在打字效果中,它们用于在每次添加字符后暂停一段时间,以模拟打字速度。 3. **字符串遍历**:通过遍历要显示的文本字符串,每次迭代取出一个字符,然后将其添加到页面上。可以使用`for`循环或`Array.prototype....

    AutoType原生JavaScript实现的自动打字效果

    AutoType是一种常见的网页动态效果,通常用于...以上就是使用原生JavaScript实现AutoType自动打字效果的基本方法和一些扩展思路。通过这样的实现,开发者可以在网页中创造出各种有趣的动态文字展示效果,提升用户体验。

    省市区,打字效果样例

    在HTML(HyperText Markup Language)中,可以利用JavaScript或者CSS(Cascading Style Sheets)来实现打字效果。JavaScript是一种客户端脚本语言,能够动态改变网页内容;而CSS则主要负责网页的样式设计,也可以...

    打字效果和网页加载图片渐显.rar

    在这个项目中,HTML用于创建页面的基本结构,包括文本输入框、按钮等元素,以便实现打字效果。例如,一个隐藏的文字元素和一个触发打字效果的按钮可能是HTML部分的关键组件。 接下来,CSS3(Cascading Style Sheets...

    jQuery打字特效.zip

    2. **选择元素**:使用jQuery的选择器选取需要实现打字效果的文本元素,例如: ```javascript var typingElement = $('#typing'); ``` 这里`#typing`是元素的ID。 3. **设置初始状态**:清除元素中的文本,并...

    TypewriterJS实现一个很酷打字机效果的javascript插件

    总之,TypewriterJS是一款实用且富有创意的JavaScript插件,它能帮助开发者轻松地在网页中实现打字机效果,丰富网站的动态表现,提高用户的参与度。通过深入理解和应用,我们可以将其巧妙地融入到各种网页设计中,...

    易语言模仿网页打字效果源码.7z

    在给定的“易语言模仿网页打字效果源码.7z”压缩包中,包含了一个易语言编写的项目,这个项目的目标是模拟网页中的打字效果,也就是常说的“打字机效果”。这种效果常见于网站加载文本、故事叙述或展示信息时,给人...

    易语言模仿打字效果(文字一个一个输入到编辑框)

    通过以上步骤,我们可以成功地在易语言中实现文字一个一个输入到编辑框的打字效果。这种效果不仅适用于简单的文本显示,还可以结合其他功能,如进度条、声音效果等,打造出更加丰富的用户交互体验。

    打字机效果FLASH源文件

    在IT行业中,动画和视觉效果的制作是至关重要的部分,特别是在网页设计、游戏开发和多媒体应用中。"打字机效果"是一种常见的动态效果,它模拟了老式打字机在纸上逐字打印的场景,为用户带来复古而有趣的体验。这种...

Global site tag (gtag.js) - Google Analytics