文字逐个显示

最新推荐文章于 2024-04-01 16:53:35 发布
最新推荐文章于 2024-04-01 16:53:35 发布
阅读量626 收藏
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhaohehe123/article/details/8263629
版权


<script language="JavaScript">
<!-- Begin
text = "欢迎光临我们的网站"; //显示的文字
color1 = "blue"; //文字的颜色
color2 = "red"; //转换的颜色
fontsize = "6"; //字体大小
speed = 100; //转换速度 (1000 = 1 秒)
i = 0;
if (navigator.appName == "Netscape") {
document.write("<layer id=a visibility=show></layer><br><br><br>");
}
else {
document.write("<div id=a></div>");
}
function changeCharColor() {
if (navigator.appName == "Netscape") {
document.a.document.write("<center><font face=arial size =" + fontsize + "><font color=" + color1 +
">");
for (var j = 0; j < text.length; j++) {
if(j == i) {
document.a.document.write("<font face=arial color=" + color2 + ">" + Text.charAt(i) + "</font>");
}
else {
document.a.document.write(text.charAt(j));
}
}
document.a.document.write('</font></font></center>');
document.a.document.close();
}
if (navigator.appName == "Microsoft Internet Explorer") {
str = "<center><font face=arial size=" + fontsize + "><font color=" + color1 + ">";
for (var j = 0; j < text.length; j++) {
if( j == i) {
str += "<font face=arial color=" + color2 + ">" + text.charAt(i) + "</font>";
}
else {
str += text.charAt(j);
}
}
str += "</font></font></center>";
a.innerHTML = str;
}
(i == text.length) ? i=0 : i++;
}
setInterval("changeCharColor()", speed);
// End -->
</script>
<html>
<head>
</head>
<body>
<script language="JavaScript">

<!--
Begin
text = "欢迎光临我们的网站"; //显示的文字

color1 = "blue"; //文字的颜色

color2 = "red"; //转换的颜色

fontsize = "6"; //字体大小

speed = 100; //转换速度
(1000 = 1 秒)
i = 0;

if (navigator.appName == "Netscape")
{
document.write("<layer id=a visibility=show></layer><br><br><br>");
}

else
{
document.write("<div id=a></div>");
}

function changeCharColor()
{
if (navigator.appName == "Netscape")
{
document.a.document.write("<center><font face=arial size =" + fontsize + "><font color=" + color1 +
">");

for (var j = 0; j < text.length; j++)
{
if(j == i) {
document.a.document.write("<font face=arial color=" + color2 + ">" + Text.charAt(i) + "</font>");
}

else {
document.a.document.write(text.charAt(j));
}
}

document.a.document.write('</font></font></center>');

document.a.document.close();
}

if (navigator.appName == "Microsoft Internet Explorer")
{
str = "<center><font face=arial size=" + fontsize + "><font color=" + color1 + ">";

for (var j = 0; j < text.length; j++)
{
if( j == i) {
str += "<font face=arial color=" + color2 + ">" + text.charAt(i) + "</font>";
}

else {
str += text.charAt(j);
}
}
str += "</font></font></center>";

a.innerHTML = str;
}
(i == text.length) ? i=0 : i++;
}

setInterval("changeCharColor()", speed);
// End
-->

</script>

</body>
</html>

zhaohehe123
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
iOS 文字动画,文字逐个显示
分享的才是最美的
01-16 9388
随手记:     对于iOS文字动画,首先想到的应该是基于CoreText框架将文字每个都写出来,加上定时器给定每个字显示的时间,这是一种思维方式: #import "ViewController.h" #import @interface ViewController () { NSMutableArray *labels; NSMutableArray *numArr;
iOS 文字动画(每个字逐个显示)
01-16
基于两种思维方式的文字动画: 1.将每个字按照给定的时间逐个绘制; 2.在label上添加一个挡板
iOS----------文字逐个显示
weixin_38166931的博客
08-30 695
参考文档： https://blog.csdn.net/et295394330/article/details/50529862 转载于:https://www.cnblogs.com/KiVen2015/p/11433861.html
vue&uni-app项目实现一段文字逐个显示
忘忧
04-29 4685
实现思路是 将要显示的字符串用substr() 方法进行分割，使用计时器逐个增加要分割的长度 主要代码： onLoad(options) { this.data=JSON.parse(options.data) this.wen = '' //声明一个变量，用来监听要分割的长度 var wenlen = 0 this.timer=setInterval (()=>{ //取到data.content的第wenlen位 this.wen = this.data.content.su
【cocos creator】文字打字效果，文字逐个显示
烧仙草奶茶的博客
01-16 2178
文字打字效果，文字逐个显示 cc.Class({ extends: cc.Component, properties: { test:cc.Node, } start() { }, setText(){ var str = "欢迎您 " + "\n希望您在这里度过一段愉快的时光"; v...
c#文字逐个显示 实现打字机效果
09-18
在C#编程中，"文字逐个显示"的实现通常涉及到控制台输出或者GUI界面的动态更新，模拟出打字机或卡拉OK歌词滚动的效果。这个功能在游戏、娱乐应用或者教学软件中很常见，可以增加用户体验的趣味性。下面我们将深入...
swift-文字渐渐显示就是文字从左往右依次显示
08-15
在Swift编程中，实现文字渐渐显示，即文字从左往右依次显示的效果，通常涉及到UI动态更新和动画处理。这种效果常用于创建引人入胜的用户界面，比如加载提示或者展示长文本时的视觉效果。以下将详细介绍如何在Swift中...
Android实现文字逐字显示出来
08-30
Android 实现文字逐字显示出来 概述 本文将详细介绍 Android 实现文字逐字显示出来的效果，包括使用自定义 TextView 的方式和使用定时更新文字显示的方法。这些方法可以让文字逐字显示出来，具有很高的参考价值。 ...
js简单实现让文本框内容逐个字的显示出来
10-26
"js简单实现让文本框内容逐个字的显示出来"这个标题所描述的就是一个这样的效果，它模拟了打印机逐行打印文字的过程，使文本内容在文本框中逐字逐渐展示。这个效果在教程、演示或游戏等场景中可能特别有用，因为它...
自定义控件-----逐个显示文字
fengltxx的博客
06-21 1748
自定义控件—–逐个显示文字ONE Goal ,ONE Passion ! 前言: 今天要实现的效果时.让我们的文字一个一个显示出来.上效果图吧:实现原理: 1,拿到要显示的文字.2,计算文字显示的速率 字体显示的速度 v = 总的字体长度 / 总的显示时间3,将文字根据速率显示到控件上.自定义View: public class printTextView extends TextVi
逐个出现的文字的脚本
07-25
逐个出现的文字的脚本
自带逐字打印动画效果的UILabel（iOS-OSX）(iPhone源代码)
03-16
来源： github/CLTypingLabel Licence： MIT 作者： Liiiiin 对此label设置文字时会自动触发打字效果。支持设置每个字体的间隔时间，以及中途暂停，继续打字功能。带demo例子代码，支持cocoapod。
swift-ZCAnimatedLabel是一个拥有多种炫酷的文字显示或消失iOS动画效果库并且易于扩展
08-15
ZCAnimatedLabel 是一个拥有多种炫酷的文字显示或消失 iOS 动画效果库，并且易于扩展
js 特效 html 特效 文字变色逐个出现
10-11
js 特效 html 特效 文字变色逐个出现 js 特效 html 特效 文字变色逐个出现
ios路径文字输出
01-17
iOS上使用TextOut输出文字，文字沿着半圆Path绘制
前端实现逐字展示效果
最新发布
盼涧
04-01 850
前端实现逐字展示功能--vue和react
文字逐个弹出效果（变换，字幕）
clown_drop的博客
10-07 1383
文字逐个弹出效果 制作每个字出现的时间 利用旧版标题放置不同轨道 给字幕添加缩放关键帧
文字逐个出现效果
weixin_30294295的博客
04-17 581
文字一个个出现的demo <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <pre id="showWord"&...
Qt自定义QLabel滚动显示文本文字，label可根据文本长度自动开启滚动显示
02-20
自定义QLabel控件，自动判断文本长度与显示框长度的大小，显示框太短，则自动滚动显示，否则正常显示，类似于广告屏的滚动播放效果，qt 5源码，编译测试通过。
html实现文字逐个显示
07-10
要实现文字逐个显示效果，可以使用以下的HTML和JavaScript代码： ```html <!DOCTYPE html> <html> <head> <title>文字逐个显示</title> <script> function showText() { var text = "这是要逐个显示的文字。"; var container = document.getElementById("text-container"); var index = 0; function displayNextChar() { if (index < text.length) { container.innerHTML += text.charAt(index); index++; setTimeout(displayNextChar, 100); // 控制文字显示的速度，单位是毫秒 } } displayNextChar(); } </script> </head> <body onload="showText()"> <div id="text-container"></div> </body> </html> ``` 这段代码会在页面加载完成后，通过JavaScript逐个显示文字。你可以将要显示的文字替换成你想要的内容，并调整显示速度。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值