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.mzph.cn/bicheng/37930.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

idea常用配置 | 快捷注释

idea快速注释 一、类上快速注释 &#xff08;本方法是IDEA环境自带的&#xff0c;设置特别方便简单易使用&#xff09; 1、偏好设置->编辑器->文件和代码模版 | File-Settings-Editor-File and Code Templates 2、右下方的“描述”中有相对应的自动注注释配置格式 贴…

力扣 单词规律

所用数据结构 哈希表 核心方法 判断字符串pattern 和字符串s 是否存在一对一的映射关系&#xff0c;按照题意&#xff0c;双向连接的对应规律。 思路以及实现步骤 1.字符串s带有空格&#xff0c;因此需要转换成字符数组进行更方便的操作&#xff0c;将字符串s拆分成单词列表…

Java单体架构项目_云霄外卖-特殊点

项目介绍&#xff1a; 定位&#xff1a; 专门为餐饮企业&#xff08;餐厅、饭店&#xff09;定制的一款软件商品 分为&#xff1a; 管理端&#xff1a;外卖商家使用 用户端&#xff08;微信小程序&#xff09;&#xff1a;点餐用户使用。 功能架构&#xff1a; &#xff08…

Python学习笔记20:进阶篇(九)常见标准库使用之sys模块和re模块

前言 本文是根据python官方教程中标准库模块的介绍&#xff0c;自己查询资料并整理&#xff0c;编写代码示例做出的学习笔记。 根据模块知识&#xff0c;一次讲解单个或者多个模块的内容。 教程链接&#xff1a;https://docs.python.org/zh-cn/3/tutorial/index.html 错误输出…

电商平台数据爬取经验分享

一、引言 在电商领域&#xff0c;数据的重要性不言而喻。无论是市场趋势分析、竞争对手研究&#xff0c;还是用户行为洞察&#xff0c;都离不开数据的支持。而数据爬虫作为获取这些数据的重要工具&#xff0c;其技术的掌握和运用对于电商平台来说至关重要。本文将结合个人实际…

AI绘画 Stable Diffusion【实战进阶】:图片的创成式填充,竖图秒变横屏壁纸!想怎么扩就怎么扩!

大家好&#xff0c;我是向阳。 所谓图片的创成式填充&#xff0c;就是基于原有图片进行扩展或延展&#xff0c;在保证图片合理性的同时实现与原图片的高度契合。是目前图像处理中常见应用之一。之前大部分都是通过PS工具来处理的。今天我们来看看在AI绘画工具 Stable Diffusio…

架构师篇-7、企业安全架构设计及实践

摘要&#xff1a; 认识企业安全架构企业安全案例分析及实践 内容&#xff1a; 为什么做企业安全架构怎么做好安全架构设计案例实践分析&随堂练 为什么要做企业安全架构 安全是麻烦制造者&#xff1f; 整天提安全需求增加开发工作增加运维要求增加不确定性延后业务上线…

[C++][设计模式][适配器模式]详细讲解

目录 1.动机2.模式定义3.要点总结4.代码感受 1.动机 在软件系统中&#xff0c;由于应用环境的变化&#xff0c;常常需要将”一些现存的对象“放在新的环境中应用&#xff0c;但是新环境要求的接口是这些现存对象所不满足如何应对这些”迁移的变化“&#xff1f;如何既能利用现…

【单片机毕业设计选题24038】-基于STM32的木材厂环境监测系统

系统功能: 系统上电后根据采集到的传感器值自动控制&#xff0c;温度过高后自动开启风扇通风降温&#xff0c;湿度过 高后自动开启风扇除湿&#xff0c;光照过低后自动开启补光&#xff0c;雨量过高蜂鸣器报警&#xff0c;火焰传感器检 测到火灾后蜂鸣器报警并打开水泵灭火。…

20240629在飞凌的OK3588-C开发板的Linux R4系统下使用i2cdetect确认I2C总线

rootok3588:/# i2cdetect -y -r 0 rootrk3588-buildroot:/# i2cdetect -l rootrk3588-buildroot:/# i2cdetect -F 0 20240629在飞凌的OK3588-C开发板的Linux R4系统下使用i2cdetect确认I2C总线 2024/6/29 15:37 在CAM1、CAM2挂载OV13850。 在CAM3、CAM4和CAM5挂载OV5645了。 in…

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

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

phpMyAdmin | mysqli::real_connect(): (HY000/2002): No such file or directory

法一&#xff1a;第一次安装宝塔 第一次安装宝塔mysql服务是默认关闭的&#xff0c;需要手动打开&#xff0c;打开服务再次进入phpMyAdmin发现可以进入了 法二&#xff1a;第一种方法没解决用这种 出现mysqli::real_connect(): (HY000/2002): No such file or directory错误通…

【数据结构|C语言版】四大排序(算法)

前言1. 插入排序1.1 直接插入排序1.2 希尔排序 2. 选择排序2.1 选择排序2.2 堆排序 3. 交换排序3.1 冒泡排序冒泡排序的步骤 3.2 快速排序快速排序的步骤 4. 归并排序归并排序的步骤&#xff1a;代码解释&#xff1a;归并排序的性能&#xff1a; 上期回顾: 【数据结构|C语言版】…

Python项目开发实战:影视作品分析小程序,案例教程编程实例课程详解

在构建一个影视作品分析小程序时,我们将会涉及到多个方面,包括项目规划、需求分析、设计、开发、测试以及部署等。以下是一个简化的指南,用于实战Python项目开发——一个影视作品分析小程序。 一、项目规划和需求分析 1. 项目背景和目标 随着影视行业的快速发展,观众对于影…

kubuadm 方式部署 k8s 集群

准备三台机器 主机名IP地址CPU/内存角色K8S版本Docker版本k8s231192.168.99.2312C4Gmaster1.23.1720.10.24k8s232192.168.99.2322C4Gwoker1.23.1720.10.24k8s233192.168.99.2332C4Gwoker1.23.1720.10.24 需要在K8S集群各节点上面安装docker&#xff0c;如未安装则参考 …

使用cocos2d-android的常见报错

1. 报错&#xff1a;aused by: java.lang.AssertionError: TMX: unsupported compression method 原因&#xff1a;tmx文件中的图块层压缩格式zlib不被支持 解决方法&#xff1a;使用tiled编辑器修改tmx文件的压缩方式为gzip&#xff08;不能为无压缩&#xff0c;否则报错&…

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

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

第四十三章 在 SOAP 消息中使用数据集

文章目录 第四十三章 在 SOAP 消息中使用数据集关于数据集定义类型化数据集 第四十三章 在 SOAP 消息中使用数据集 本主题讨论 %XML.DataSet&#xff0c;这是一个支持 XML 的数据集&#xff0c;当 Web 服务和客户端都基于 IRIS 数据平台或一方使用 .NET 时&#xff0c;可以在 …

大语言模型LLM基础:推理/不同模型/量化对显存、推理速度和性能的影响

通过本文&#xff0c;你将了解以下几个方面的内容&#xff1a; 要运行一个LLM需要多少显存&#xff1f;&#xff08;我的GPU可以运行多大LLM&#xff1f;&#xff09;不同LLM推理速度如何&#xff1f;量化对显存、推理速度和性能的影响&#xff1f;vLLM、DeepSeed等工具的加速…

巴黎成为欧洲AI中心 大学开始输出AI创始人

来自Dealroom 的数据显示&#xff0c;在欧洲和以色列AI创业公司中&#xff0c;法国的AI创业公司资金最充裕。Mistral、Owkin、Hugging Face等法国企业已经融资23亿美元&#xff0c;比英国、德国AI创业公司都要多。 一名大学生走出校门凭借聪明才智和一个黄金点子成为富豪&#…