JavaScript 实现打字机效果,跑马灯效果

时间: 2018-07-04阅读: 1657标签: 效果

这篇文章在不使用任何插件的情况,以最简洁的原生JavaScript来实现打字机效果和跑马灯效果。


一、打字效果

打字效果即把一段话一个字一个字的显示出来。首先规定好显示字数的速度即settimeout执行间隔用来控制每个字之间输出速度。循环总字数来实现一个字一个字的输出。  

html:

<form name="tickform">
    <textarea name="tickfield" rows="5" cols="100"> cool</textarea>
</form>
<button onclick="doTyping()">开始打字</button>  

javacript:

var str = "罗斯参加了全场个人训练,期间他与骑士助教和训练师们共同进行了一些小规模的对抗训练。\罗斯说道:“我感觉不错,每天都在跑动,每天都在调整身体状态。我没再感到任何疼痛了,也没有出现任何伤情反复。每一天,每一周我都在取得进展,所以我处于正确的轨道之中";
var i = 0 ;
var interId = null;
function typing(){
    var textField  = document.tickform.tickfield;
    if(i <= str.length){
        console.log(str.slice(0,i++)); //截取从0 到当前位置
        textField.value = str.slice(0,i++) + "_";


    }else{//字已打完

        textField.value = str;
       window.clearInterval(interId);//清除定时器
    }
}
function doTyping(){
    interId = setInterval("typing()",200);
}



二、跑马灯效果: 

var id ,pause = 0 ,posit = 0;
function banner(){
    var i,k;
    var msg = "你好,欢迎使用JavaScript,这里介绍文字的跑马灯效果";
    var speed = 10;
    var xc = document.tickform.tickfield;
    xc.value = msg.substr(posit,posit + 160); //从postion 开始截取 而后赋值
    console.log(xc.value);
    if(posit ++ == msg.length){
        posit = 0 ;
    }
    id = setTimeout("banner()",2000/speed);
}



站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/909

background 实现四角选中框效果

background 上绑定的多项背景图实际为background-image 和 background-position;也就是图片和位置;linear-gradient 是一种特殊的image类型,之后禁止重复和background-size是设置每个点的宽高

vue实现 toggle显示隐藏效果

jQuery中有个toggle()方法,可以切换元素的显示状态,在用vue时如果不引入jQuery如何实现这种效果?常见有三种场景:1.控制页面中一个dom元素2.控制页面中多个dom元素3.控制页面中的dom元素是从服务端返回,且有多个

如何用 CSS Animations 实现滑动图片展现文字的效果

在这篇文章中,我希望能带领大家了解一下 CSS animation property ,以及详细地解释我的个人网站 中的一个效果:让文字在移动的物体后出现。如果你想要看最后的成果,这里有一个例子 。

CSS3转换

改变元素在页面中位置,大小,角度以及形状的一种方式:2D转换:只在x轴和y轴上发生转换效果,3D转换:增加了z轴的转换效果

bubbly-bg.js漂亮的动态气泡背景效果

bubbly-bg.js是一款漂亮的动态气泡背景js插件。它是基于HTML5 canvas,压缩后的版本小于1kb,但是它能制作出各种漂亮的动态气泡背景效果,非常强大。

Js实现时钟效果

在JavaScript中,有一个内置对象Date,它重要的一个作用就是实现了时间的时刻更新,通过代码来创造一个实实在在的时间表。

CSS 搞怪的 text-decoration

今天在改一个项目的时候却遇到了一个莫名其妙的属性:text-decoration,这个属性,其实就只是用来把一段文字加上上横线、删除线或底线的属性罢了,通常会用在移除超链接的底线、或一些特殊强调的效果里头

用纯css模拟下雪的效果

下雪效果只是一类效果的名称,可以是红包雨等一些自由落体的运动效果,本文就是用纯css模拟下雪的效果,更多效果大家可以自行发挥。

一个简易的 LED 数字时钟Js实现方法

这个应该是已经有很多人做过的东西,我应该只是算手痒,想写一下,所以,花了点时间折腾了这个,顺便把 Dark Mode 的处理也加上了

CSS垂直翻转/水平翻转

随着现代浏览器对CSS3的支持愈发完善,对于实现各个浏览器兼容的元素的水平翻转或是垂直翻转效果也就成为了可能。相关的CSS代码如下:

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!