JavaScript 动态网页实例 —— 文字移动

前言

介绍文字使用的特殊效果。本章介绍文字的移动效果,主要包括:文字的垂直滚动、文字的渐隐渐显、文字的闪烁显示、文字的随意拖动、文字的坠落显示、页面内飘动的文字、漫天飞舞的文字、文字的下落效果。对于这些效果,读者只需稍加修改,就可以应用在自己的页面设计中。

文字的垂直滚动

本节给出一段文字垂直滚动的示例代码,页面中,一段文字自下而上逐字滚动显示。在实际应用中,也可去掉文字周围可显示的边框。

要点

  • 本节代码主要使用了字符串对象的length属性和对字符串元素的引用方法,主要功能和用法如下。 在JavaScript中,字符串是一组被引号(单引号或双引号)括起来的文本。至于使用单引号还是双引号,完全可以根据自己的习惯。只要使字符串外的引号匹配成对即可。
  • 与其他语言(如C语言)不同,JavaScript中不对“字符”和“字符串”加以区分,因此,语句“var
    oneChar=“s”;”定义了一个只有一个字符(“s”)的字符串。字符串是与 String 对象关联的。可以使用
    charAt()方法从字符串中提取字符,例如,使用“var
    myName=“Thomas”;”定义了一个字符串,就可以通过“myName.charAt(2)的形式对其元素进行引用。
  • 由于字符串中字符的编号从0开始,因此,上述代码的功能是将字符串(“Thomas”)中的第3个字符“o”取出。
  • 可以使用 length()方法求出字符串的长度。例如,对上述已定义的 myName 字符串,可用“var
    strlen=myName.length();”求出其长度,得到的结果为 6。
<script language="JavaScript">
<!--
msg ="天行健,君子以自强不息。";           //待滚动的文字
align="";           //对齐方式
speed=500;           //设置滚动速度
up=true;           //滚动的方向为上
spas=" ";
for (a=0;a<=3;a++) {
   spas+=" "}
msg=spas+msg+spas;
j=eval(-1);           //j给定初始值
stop=msg.length;
document.write("<form name='form'><table border=5 cellspacing=5 cellpadding=0 bordercolorlight=#C0C0C0 bordercolordark=#008000 bordercolor=#FF0000 style='border-collapse: collapse' align="+align+">");           //设置表单格式
for (i=1;i<=5;i++) {
   
document.write("<tr><td><input type=text name=\"box"+i+"\" size=1 style='color: #008000; border-style: solid; border-width: 1px;  background-color: #FFc0c0'>");           //依次画出5个方框
document.write("</td></tr>");
}
document.write("</table></form>");

function scrollIt() {
   
j++;
with (document.form) {
   
if ((j+5) <= stop) {
              //判断是否满足停止条件
box1.value = msg.charAt(j);           //将第j个字符放在第1个方框中
box2.value = msg.charAt(j+1);           //将第j+1个字符放在第2个方框中
box3.value = msg.charAt(j+2);           //将第j+2个字符放在第3个方框中
box4.value = msg.charAt(j+3);           //将第j+3个字符放在第4个方框中
box5.value = msg.charAt(j+4);           //将第j+4个字符放在第5个方框中



} else 
j=0;           //从头开始循环
   
}
setTimeout("scrollIt()",speed);	           //按照滚动速度的设置,循环滚动字符串
}

scrollIt();           //直接调用scrollIt函数

//-->
</script>

在这里插入图片描述在这里插入图片描述

分析

  • (1)程序首先定义了一组变量,包括字符串变量、对齐方式、滚动速度、滚动方向,以及包含一个空格的字符串 spas。
  • (2)随后,使用一个for 循环对 spas进行了重新定义,使其包含3个空格,然后,对字符串msg重新定义,使其前后各增加3个空格。
  • (3)然后,使用 document.write()语句设置了一个表单,并在该表单内,通过一个for
    循环画出一个5行1列的表格,表格的每个单元格依次命名为“box1”、“box2”、“box3”“box4”、“box5 ”。
  • (4)在函数scrollIt()中,使用一个with语句,将字符串的前5个字符依次取出,并将其放置在已定义的表格各行中。
  • (5)在程序的最后,使用“scrolllt();”直接调用函数 scrolllt(),完成显示。

9.2 文字的渐隐渐显

本节给出一段文字渐隐渐显的示例代码,文字颜色逐渐由深变浅,随后又由浅变深,给人渐隐渐显的效果。

要点

本节代码主要使用了子字符串截取方法 substring()和浏览器版本检测 navigator.appVersion,其主要功能和用法如下。
substring()用于截取一个已知字符串的子字符串,其使用方法为“字符串.substring(开始字符,结束字符)”。
使用 Navigator 对象的 appVersion 属性,可以检测当前浏览器的版本号。

<script language="JavaScript">
<!--
function checkBrowserForVersion4(){
             //判断当前浏览器的版本
var x=navigator.appVersion;          //获得当前浏览器的版本
y=x.substring(0,4);
if(y>=4) Effect();}          //如果版本高于4,则调用显示效果函数


var colors=new Array          //颜色数组
(
 "FFFFFF","FFFFFF","FFFFFF","FFFFFF","FFFFFF",
 "FFFFFF","FFFFFF","F9F9F9","F1F1F1","E9E9E9",
 "E1E1E1","D9D9D9","D1D1D1","C9C9C9","C1C1C1",
 "B9B9B9","B1B1B1","A9A9A9","A1A1A1","999999",
 "919191","898989","818181","797979","717171",
 "696969","616161","595959","515151","494949",
 "414141","393939","313131","292929","212121",
 "191919","111111","090909","000000"
)
a=0,b=1          //定义变量

function Effect(){
             //效果函数
color=colors[a];          //设置当前文字显示的颜色
          //待显示的文字
aa="<font size='3'><font size='5' face='隶书, Helvetica, sans-serif'><font color="+color+">大江东去<p>浪淘尽<p>千古风流人物</font></font></font>"
object1.innerHTML=aa          //如果是ie&

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/591855.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

农作物害虫检测数据集VOC+YOLO格式3575张10类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;3575 标注数量(xml文件个数)&#xff1a;3575 标注数量(txt文件个数)&#xff1a;3575 标注…

电话号码的字母组合 【C++】【力扣刷题】

解题思路&#xff1a; 以第一个为例,digits “23”&#xff0c;表明从电话号码的按键中选取2和3这两个字符&#xff0c;然后去寻找它们各自所对应的字母&#xff0c;这里每一个数字字符所对应的字母的不同&#xff0c;0对应的是空字符&#xff0c;而1的话题目中讲到是不对应任…

中药辨别二

声明&#xff1a;参考懒兔子公益课&#xff0c;参考网络资料和部分网络图片整理而成&#xff0c;仅供学习使用&#xff0c;不提供商业活动价值&#xff0c;文章描述的中药仅供学习&#xff0c;请在专业医师或专业医生指导下使用药材&#xff0c;擅自或其他情况下使用&#xff0…

LeetCode406:根据身高重建队列

题目描述 假设有打乱顺序的一群人站成一个队列&#xff0c;数组 people 表示队列中一些人的属性&#xff08;不一定按顺序&#xff09;。每个 people[i] [hi, ki] 表示第 i 个人的身高为 hi &#xff0c;前面 正好 有 ki 个身高大于或等于 hi 的人。 请你重新构造并返回输入数…

初学python记录:力扣1235. 规划兼职工作

题目&#xff1a; 你打算利用空闲时间来做兼职工作赚些零花钱。 这里有 n 份兼职工作&#xff0c;每份工作预计从 startTime[i] 开始到 endTime[i] 结束&#xff0c;报酬为 profit[i]。 给你一份兼职工作表&#xff0c;包含开始时间 startTime&#xff0c;结束时间 endTime …

[嵌入式AI从0开始到入土]17_Ascend C算子开发

[嵌入式AI从0开始到入土]嵌入式AI系列教程 注&#xff1a;等我摸完鱼再把链接补上 可以关注我的B站号工具人呵呵的个人空间&#xff0c;后期会考虑出视频教程&#xff0c;务必催更&#xff0c;以防我变身鸽王。 第1期 昇腾Altas 200 DK上手 第2期 下载昇腾案例并运行 第3期 官…

JDK14特性

JDK14 1 概述2 语法层面的变化1_instanceof的模式匹配(预览)2_switch表达式(标准)3_文本块改进(第二次预览)4_Records 记录类型(预览 JEP359) 3 API层面的变化4 关于GC1_G1的NUMA内存分配优化2_弃用SerialCMS,ParNewSerial Old3_删除CMS4_ZGC on macOS and Windows 4 其他变化1…

PPT基础

5种ppt仅可读形式 Ⅰ 开始选项卡 1.【幻灯片】组中&#xff1a;新建幻灯片&#xff0c;从大纲中导入幻灯片&#xff1b;修改幻灯片的版式&#xff1b;节&#xff08;新增节&#xff0c;重命名节&#xff09;。 2.【字体】组中&#xff1a;设置字体&#xff0c;字体大小&…

ctfshow web入门 sql注入 web224--web233

web224 扫描后台&#xff0c;发现robots.txt&#xff0c;访问发现/pwdreset.php &#xff0c;再访问可以重置密码 &#xff0c;登录之后发现上传文件 检查发现没有限制诶 上传txt,png,zip发现文件错误了 后面知道群里有个文件能上传 <? _$GET[1]_?>就是0x3c3f3d60245…

海外仓系统与跨境电商平台集成:有什么意义,为什么重要

跨境电商的发展趋势并没有丝毫放缓的迹象&#xff0c;这使得对高效率、综合性的海外仓的需求变得比以往任何时间都要多。 预测表明&#xff0c;未来一年跨境电商的市场份额将继续扩大。这一切都要求海外仓企业尽快提升仓储管理效率&#xff0c;在这个过程中&#xff0c;海外仓系…

小苹果

题目描述 小的桌子上放着几个苹果从左到右排成一列&#xff0c;编号为从1 到 。小苞是小的好朋友&#xff0c;每天她都会从中拿走一些苹果。每天在拿的时候&#xff0c;小苞都是从左侧第1个苹果开始、每隔2个苹果拿走1个苹果。随后小苞会将剩下的苹果按原先的顺序重新排成一列…

扩展学习|本体研究进展

文献来源&#xff1a; 王向前,张宝隆,李慧宗.本体研究综述[J].情报杂志,2016,35(06):163-170. 一、本体的定义 本体概念被引入人工智能、知识工程等领域后被赋予了新的含义。然而不同的专家学者对本体的理解不同,所给出的定义也有所差异。 人工智能领域的学者Neches(1991)等人对…

StampedLock(戳记锁)源码解读与使用

&#x1f3f7;️个人主页&#xff1a;牵着猫散步的鼠鼠 &#x1f3f7;️系列专栏&#xff1a;Java源码解读-专栏 &#x1f3f7;️个人学习笔记&#xff0c;若有缺误&#xff0c;欢迎评论区指正 1. 前言 我们在上一篇写ReentrantReadWriteLock读写锁的末尾留了一个小坑&#…

这书不错,古琴乐理实用教程(尹溧新编),有课学得通透。

通篇阅读后&#xff0c;发现这本书以古琴初习者、未系统接触过现代乐理的读者为对象&#xff0c;将复杂的古琴音乐理论简单化、通俗化。书中采用参照比较的方法、通俗易懂的语言、言简意赅的文字&#xff0c;并结合具体音乐作品将古琴研习中最主要的、最核心的理论知识进行简明…

进程间通信(3)信号量初识

我最近开了几个专栏&#xff0c;诚信互三&#xff01; > |||《算法专栏》&#xff1a;&#xff1a;刷题教程来自网站《代码随想录》。||| > |||《C专栏》&#xff1a;&#xff1a;记录我学习C的经历&#xff0c;看完你一定会有收获。||| > |||《Linux专栏》&#xff1…

72.网络游戏逆向分析与漏洞攻防-角色与怪物信息的更新-完善利用角色与怪物创建的功能

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 如果看不懂、不知道现在做的什么&#xff0c;那就跟着做完看效果 现在的代码都是依据数据包来写的&#xff0c;如果看不懂代码&#xff0c;就说明没看懂数据包…

开源模型应用落地-LangChain高阶-Tools工具-集成agents(四)

一、前言 LangChain 的 tools 是一系列关键组件&#xff0c;它们提供了与外部世界进行交互的能力。通过适当的使用这些组件&#xff0c;可以简单实现如执行网络搜索以获取最新信息、调用特定的 API 来获取数据或执行特定的操作、与数据库进行交互以获取存储的信息等需求。 本章…

MATLAB - 自定义惯性矩阵

系列文章目录 前言 一、关键惯性约定 Simscape 多体软件在惯性定义中采用了一系列约定。请注意这些约定&#xff0c;因为如果手动进行惯性计算&#xff0c;这些约定可能会影响计算结果。如果您的惯性数据来自 CAD 应用程序或其他第三方软件&#xff0c;这些约定还可能影响到您需…

TranslatePress Pro插件下载:一键国际化,让您的网站走向世界

在全球化的今天&#xff0c;一个多语言的网站是连接不同文化和市场的桥梁。TranslatePress Pro插件&#xff0c;作为一款专为WordPress用户设计的多语言解决方案&#xff0c;以其简便的操作和强大的功能&#xff0c;帮助您的网站跨越语言障碍&#xff0c;吸引全球用户。 [Tran…

vector 的模拟实现

目录 1. vector 的核心框架 2. size 和 capacity 以及 empty 3. reserve 和 push_back 4. insert 5. erase 6. copy constructor 6.1. 第一个版本 6.2. 第二个版本 6.3. 第三个版本 7. operator 7.1. 第一个版本 7.2. 第二个版本 7.3. 第三个版本 8. constructor…