JavaScript 动态网页实例 —— 背景效果

        页面背景是网页设计中必不可少的重要内容之一,其背景的好坏直接影响网页浏览者的浏览兴趣。网页背景分为背景图和背景色两种,对于普通的背景图和背景色,完全可以通过HTML实现,而要实现复杂的背景效果,则需要借助于JavaScript。本章介绍页面背景的一些实现效果。首先是一个页面背景随机切换的实例:然后,通过3种不同的方法,分别实现用户对页面背景的自动选择:最后,介绍一个闪电的页面背景效果。

随机更换页面背景

本节给出一段随机更换页面背景的示例代码,当用户每次刷新页面时,都会出现与前一次不同的页面背景。

要点

本节代码主要使用了Math对象的random()方法和fo0r()方法,两个方法的主要功能和用法如下。

  • Math 对象用于进行数学运算,其属性是数学中一些常见的常数值,在程序中,这些属性可以直接使用。
  • 在Mat对象的方法中,除了random()之外的所有方法都需要一个或几个参数。典型的是三角函数在作为一个参数的值上进行操作,其他参数决定传递的参数中哪一个是最大值或最小值。random()方法没有参数,返回 0~1之间的随机浮点数。Math.foor(n)方法表示小于或等于n的整数。
  • 如果要生成0和上限之间的随机数,可使用“Math.floor(Math.random()*n)”的格式,其中n表示上限。
  • 若要生成不同范围的随机数,可以使用首先“Math.floor(Math.random()*n)+m”的格式,其中 m是下限,n是上限。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
<title>随页面刷新更换页面背景</title>
<script LANGUAGE="JavaScript">
<!--
bg = new Array(3); //设定图片数量,注意数组下标从0开始
bg[0] = '随机更换页面背景1.gif' //显示的图片路径,可用http://
bg[1] = '随机更换页面背景2.gif'
bg[2] = '随机更换页面背景3.gif'
bg[3] = '随机更换页面背景4.gif'
//随机选择图片,并保存在index中
index = Math.floor(Math.random() * bg.length); 
//将选择的图片作为页面背景进行显示
document.write("</head><BODY BACKGROUND="+bg[index]+">");
//-->
</script>
<h1><font color="white">随页面刷新更换页面背景</font></h1><hr>
<font color="white">每次刷新页面都会更换不同的背景图片,共有4种图片可供随机选择。</font>
</body>
</html>

分析

  • (1)程序首先建立了一个名为bg的数组,该数组包含4个元素,分别是4个不同的背景图片。如果要改变页面背景的可选数量,可以改变这里数组的元素数量。
  • (2)随后,使用“Math.floor(Math.random()*bg.length)”生成一个0与数组长度之间的随机数,并将其存储在变量imndex中。
  • (3)最后,使用 document.write()语句,将<body>的 background 属性设置为刚刚产生的随机数。这样,当每次刷新页面时,都会产生一个不同的随机数,程序运行到 document.write()语句时,就会更换页面的背景图像。
  • (4)由于图片是随机产生的,因此,程序每次运行时产生的结果都可能是不同的,并且,刷新页面后,可能选择了与上次相同的图片,因此,会给人背景未变的感觉。

用户自选背景之一

本节给出一段用户自选背景色的示例代码,当鼠标指针指向页面中的色块时,页面背景随之变为色块所指示的颜色。

要点

本节代码主要使用了onmouseover事件、document.bgColor 属性、作为属性值使用JavaScript,主要功能和用法如下。

  • onmouseover事件,当鼠标指针移动至某个页面元素时被触发。
  • document.bgColor 属性用于设置当前文档的背景色,常用于进行写入操作。
  • HTML, 中的超链接标签<a>的 href属性值除了可以使用 http和mailto 等协议外,还可以使用 JavaScript,使用方式为“<ahref="javascript:alert(new Date();)">JavaScript</a>”。
  • JavaScript 扩展了标准的 HTML,为 HTML,标签增加了各种事件属性,例如,对于 button表单元素,可以设置一个新的属性 onclick,onclick属性值就是一段JavaScript 代码,单击该按钮后,onclick属性值中的JavaScript代码就会被浏览器解释执行。例如“<imputtype = button value = test onclick = "alert(new Date();">”。
  • 用作 URL 的 JavaScript 代码前要增加“javascript:”,以说明使用的是 JavaScript 协议,而事件属性中的JavaScript代码前不需要增加javascript:进行说明。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2

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

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

相关文章

Spring-循环依赖是如何解决的

1、bean被创建保存到spring容器的过程 1、实例化 -> 获取对象&#xff1b; 2、填充属性&#xff1b;这里可能需要依赖其它的bean。 3、AOP代理对象替换&#xff1b; 4、加入单例池&#xff1b; 问题&#xff1a; 循环依赖怎么处理 ServiceA 中有属性ServiceB b&#…

使用label-studio对OCR数据进行预标注

导读 label-studio作为一款数据标注工具相信大家都不陌生&#xff0c;对于需要进行web数据标注协同来说应该是必备工具了&#xff0c;标注的数据类型很全涉及AI的各个任务(图像、语音、NLP、视频等)&#xff0c;还支持自定义涉及模版。 然而&#xff0c;我们在标注数据的过程…

win11 内存占用过大优化尝试

关闭开机加速 wins打开搜索 控制面板&#xff0c;打开控制面板 找到硬件和声音-电源选项-选择电源按钮的功能-去掉勾选启用快速启动 关闭windows 更新 winr 输入services.msc打开服务-搜索windows 更新-双击打开设置-选择禁用 貌似没什么用。

【Python3的内置函数和使用方法】

目录 Python 特点 Python 中文编码 Python 变量类型 Python列表 Python 元组 元组是另一个数据类型&#xff0c;类似于 List&#xff08;列表&#xff09; Python 字典 Python数据类型转换 Python 运算符 Python算术运算符 Python比较运算符 Python赋值运算符 Pyt…

根据描述表示泥浆密度沿着管路的长度方向在不断变化,如何来表示泥浆密度随管路的变化?

&#x1f3c6;本文收录于《CSDN问答解答》专栏&#xff0c;主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案&#xff0c;希望能够助你一臂之力&#xff0c;帮你早日登顶实现财富自由&#x1f680;&#xff1b;同时&#xff0c;欢迎大家关注&&收藏&…

文件夹内-资源名称前加序号排列

问题&#xff1a;在文件夹下的资源可以按时间排序&#xff0c;导入unity后资源顺序会乱掉&#xff0c;不方便按顺序赋值&#xff0c;为了方便&#xff0c;通过下面方法在文件夹下统一在资源名称前按顺序加上序号 win11在文件夹内右键&#xff0c;选择——在终端中打开 输入&a…

4.SQL注入-xx型

SQL注入-xx型 输入kobe查询&#xff0c;同样展示id和邮箱 xx型的sql语句查询方式&#xff0c;猜测 select 字段1,字段2 from 表名 where username(kobe)在后台语句中的查询 select id,email from member where username(kobe);根据上图构造payload语句为 username(kobe) …

spring-security安全框架(超精细版附带流程讲解图)

目录 一、回顾一下 二、security使用 2.1 覆盖掉默认配置「自定义配置」 2.2 如何自定义认证 2.3 纯纯自定义 2.4 jwt 2.5 官网认证流程 2.6 RBAC模型 4.1. 创建表结构 2.7 如何实现权限流程 一、回顾一下 security干啥的? 认证和授权 使用方式 引入依赖, 基于spri…

【自然资源】国家历史文化名城你知道多少?

【自然资源】国家历史文化名城你知道多少&#xff1f; 中国五千年的历史孕育出了一些因深厚的文化底蕴和发生过重大历史事件而青史留名的城市。根据《中华人民共和国文物保护法》&#xff0c;“历史文化名城”是指保存文物特别丰富&#xff0c;具有重大历史文化价值和革命意义…

小红书多账号管理平台哪个好用?可以快速监测多个小红书账号的数据吗?

随着品牌营销战线的不断扩展&#xff0c;小红书已经成为企业和个人品牌竞相展示的舞台。但是&#xff0c;随之而来的多账号管理问题也让众多运营者头疼不已。一个优秀的多账号管理平台&#xff0c;能让你事半功倍&#xff0c;轻松监控和分析账号数据。 如今&#xff0c;市面上出…

昇思25天学习打卡营第12天 | ResNet50图像分类

内容介绍&#xff1a; ResNet50网络是2015年由微软实验室的何恺明提出&#xff0c;获得ILSVRC2015图像分类竞赛第一名。在ResNet网络提出之前&#xff0c;传统的卷积神经网络都是将一系列的卷积层和池化层堆叠得到的&#xff0c;但当网络堆叠到一定深度时&#xff0c;就会出现…

NPOI入门指南:轻松操作Excel文件的.NET库

目录 引言 一、NPOI概述 二、NPOI的主要用途 三、安装NPOI库 四、NPOI基本使用 六、性能优化和内存管理 七、常见问题与解决方案 八、结论 附录 引言 Excel文件作为数据处理的重要工具&#xff0c;广泛应用于各种场景。然而&#xff0c;在没有安装Microsoft Office的…

JavaScript面试宝典

栈和堆的区别 栈(stack)&#xff1a; 栈是内存的简称&#xff0c;栈是自动分配相对固定大小的内存空间&#xff0c;并由系统自动释放&#xff0c;栈数据结构遵循FILO&#xff08;first in last out&#xff09;先进后出的原则。 堆(heap)&#xff1a; 是堆内存的简称&#xff…

【杂说咋说】中国历史上最古老的十大建筑​,看看你都去过几个?

【杂说咋说】中国历史上最古老的十大建筑​&#xff0c;看看你都去过几个&#xff1f; 中国作为世界四大文明古国之一&#xff0c;历史文化源远流长。在几千年的历史变迁中&#xff0c;中华先祖在神州大地上留下了无数遗迹&#xff0c;其中包括很多古建筑。本期就来介绍一下中…

Pinia详解

文章目录 简介特点用法1. 安装Pinia2. 注册Pinia Store3. 创建Pinia Store4. 使用Pinia Store 区别 Vuex详解 Pinia是一个基于Vue 3的状态管理库&#xff0c;专为Vue 3设计。它提供了一种简单、直观且可扩展的方式来组织和访问应用程序的状态。Pinia的设计灵感来源于Vuex&#…

【proteus经典实战】16X192点阵程序

一、简介 6X192点阵程序通常用于表示高分辨率图像或文字&#xff0c;其中16X表示像素阵列的宽度&#xff0c;192表示每个像素阵列中的点阵数&#xff0c;16X192点阵程序需要一定的编程知识和技能才能编写和调试&#xff0c;同时还需要考虑硬件设备的兼容性和性能等因素。 初始…

玩游戏就能学习亚马逊云科技AWS技术并通过热门技术认证考试??

亚马逊AWS限时活动&#xff0c;玩免费游戏Cloud Quest Practitioner送AWS云从业证书考试25%折扣券(价值171元)&#xff0c;玩游戏的同时还能学知识一举两得。Cloud Quest是AWS出的一款3D角色扮演游戏/虚拟城市建造形式的实验课程(游戏画面有点像天际线)&#xff0c;大家通过完成…

FPV穿越机集群控制技术详解

随着无人机技术的不断发展&#xff0c;FPV&#xff08;First Person View&#xff0c;第一人称视角&#xff09;穿越机在娱乐、航拍、搜索与救援等领域的应用日益广泛。FPV穿越机集群控制技术则是这一领域的热点研究方向&#xff0c;旨在通过协同控制多个穿越机实现更高效、更复…

Efficient Unified Demosaicing for Bayer and Non-Bayer Patterned Image Sensors

这篇文章是 2023 ICCV 的一篇文章&#xff0c;主要介绍一套统一的去马赛克的算法框架的 由于手机 Camera 上 CMOS 的单个 pixel size 比较小&#xff0c;所以现在很多手机的 Camera CMOS 会采用一些独特的非 Bayer 模式的 CFA (Quad, Nona 以及 Q X Q) 等&#xff0c;这类非 B…

【Linux】已解决:Ubuntu虚拟机安装Java/JDK

文章目录 一、分析问题背景二、可能出错的原因三、错误代码示例四、正确代码示例五、注意事项结论 已解决&#xff1a;Ubuntu虚拟机安装Java/JDK 一、分析问题背景 在Ubuntu虚拟机上安装Java开发工具包&#xff08;JDK&#xff09;是许多开发者的常见任务。然而&#xff0c;在…