动态按钮上实现JS文字逐行显示效果

1星需积分: 50 161 浏览量更新于2024-09-26 2 收藏 1KB TXT 举报

在本篇关于JavaScript实现动态文字显示的教程中，我们将学习如何在一个网页上的按钮上创建一个动态效果，当用户点击该按钮时，按钮的文字会不断循环变化。首先，我们来看一下HTML结构，页面包含一个名为"form2"的表单，其中有一个输入元素`<input>`，其类型为提交按钮，被设置为"Submit"，并关联了一个`onClick`事件，当用户点击时会弹出提示框显示消息。 JavaScript部分的核心是定义了一个名为`banner`的函数，这个函数负责控制文字的动态显示。函数内部，我们首先声明了两个变量：`id`用于存储定时器，`pause`和`position`分别表示暂停和当前显示的文字位置。接下来，通过一个for循环，我们将原始字符串`msg`复制多次，形成一个较长的字符串，这样可以实现文字的无限循环滚动。在循环内，我们使用`substring`方法截取并替换`value`属性中的文本，使其显示从`position`位置开始的前15个字符。然后，如果`position`到达字符串的末尾，就将其重置为0，以便开始下一轮循环。最后，通过`setTimeout`设置了一个定时器，每隔60毫秒调用一次`banner`函数，实现了文字的动态更新。整个过程的关键在于利用JavaScript的DOM操作（Document Object Model）来修改HTML元素的内容，并通过定时器来控制变化的频率。这种技术在Web开发中常用于交互式用户体验的提升，例如计数器、轮播图等动态效果。通过这个例子，开发者可以理解如何结合JavaScript的事件处理和字符串操作来实现动态文字显示功能，为网页添加更多生动和交互的元素。

<html>
<head>
<title>JS实现在一个按钮上动态显示文字的效果 - www.webdm.cn</title>
</head>
<body>

<table border="0" cellspacing="0" cellpadding="0">

<td width="100%"><form name="form2" onSubmit="null">
<input type="submit" name="banner" VALUE="Submit"
onClick="alert('欢迎来到网页代码站！')">

<script language="JavaScript">

var id,pause=0,position=0; 

function banner() { 
var i,k,msg="欢迎来到网页代码站"; 
k=(msg.length)+1;
for(i=0;i<=k;i++) msg+=" "+msg; 
document.form2.banner.value=msg.substring(position,position-15); 
if(position++==msg.length) position=0;
id=setTimeout("banner()",60); } 

banner();
</script>
<br />
<a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！
</body>

下载后可阅读完整内容，剩余1页未读，立即下载

winter91

粉丝: 506
资源: 4

动态按钮上实现JS文字逐行显示效果

JavaScript实现的简单Tab点击切换功能示例

修改按钮文字

javascript实现点击后变换按钮显示文字的方法

js效果：CSS实现超级炫酷的流光按钮效果；在网页中实现文字的一个一个出现

js实现文字在按钮上滚动的方法

js通过更改按钮的显示样式实现按钮的滑动效果

JavaScript实现输入框与清空按钮联动效果

JS简单实现点击按钮或文字显示遮罩层的方法

JS实现点击参数面板按钮显示或隐藏数据

js+css实现有立体感的按钮式文字竖排菜单效果.docx

最新资源