web期末作业数字时钟,实时更新,音乐播放

文章目录

  • 月球动态引导页
  • 加载引导页
  • 主页面
  • 主页面html
  • 需要完整代码私信我

月球动态引导页

在这里插入图片描述

加载引导页

在这里插入图片描述

主页面

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

主页面html

<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>作业</title>
	<!-- jQuery -->
	<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-y/jquery/3.5.1/jquery.min.js"></script>
	<!--页面核心样式-->
	<link rel="stylesheet" href="css/style1.css">
	<link rel="stylesheet" href="css/style02.css" />
	<link rel="stylesheet" type="text/css" href="css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="css/default.css">
	<link rel="stylesheet" type="text/css" href="css/logding.css" />
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<!-- Aplayer -->
	<link rel="stylesheet" href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-y/aplayer/1.10.1/APlayer.min.css"
		crossorigin="anonymous" referrerpolicy="no-referrer" />
	<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-y/aplayer/1.10.1/APlayer.min.js" crossorigin="anonymous"
		referrerpolicy="no-referrer"></script>
	<!-- <script type="text/javascript">browserRedirect("/m");</script> -->
	<!-- <script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.animate/1.9.1/jquery.animate.min.js"></script> -->
	<style media="screen">
		body {
			overflow: hidden;
			height: 100%;
			margin: 0;
			padding: 0;
			z-index: 999;
		}

		img {
			width: 100%;
			height: 100%;
			z-index: -2;
		}
	</style>
	<script src="js/rainyday.min.js"></script>
	<script>
		function showContent() {
			setTimeout(function () {
				$("#content").show();
			}, 2000);
		}
	</script>
	<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>

</head>

<body onload="run();" id="body">
	<!--加载动画-->
	<div id="loading-box">
		<div class="loading-left-bg"></div>
		<div class="loading-right-bg"></div>
		<div class="spinner-box">
			<div class="loader">
				<div class="inner one"></div>
				<div class="inner two"></div>
				<div class="inner three"></div>
			</div>
			<div class="loading-word">
				<p class="loading-title" id="loading-title">客官请耐心等待</p>
				<span id="loading-text">字体及文件加载可能需要一定时间...</span>
			</div>
		</div>
	</div>
	<img id="background" alt="background" src="./1234.jpg" />
	<div class="container slideTxtBox" onLoad="demo()" id="container">

		<div class="header flex flex-pack-justify flex-align-center">
			<div class="user-info flex flex-align-center">
				<div class="portrait"><img
						src="https://p1.music.126.net/RWrtPE-7nm-V7gB9MTj7-A==/109951168892318896.jpg?param=180y180"
						id="logo">
				</div>
				<div class="name PangMenZhengDao">期末的一个作业</div>

			</div>
			<div class="link te_c p_r hd">
				<ul class="flex flex-align-center">
					<li class="p_r"><a href="javascript:void(0);" class="transition OPPOSans-R di_bl">数字时钟</a></li>
					<li class="p_r"><a href="javascript:void(0);" class="transition OPPOSans-R di_bl">制作团队</a></li>
				</ul>
				<div class="move-bg" style="display: block; left: 125px;"></div><!--右上方 部件-->
			</div>

		</div>
		<div class="clock-container">
			<div class="clock-digital">
				<div class="date"></div>
				<div class="time"></div>
				<div class="day"> </div>
			</div>
			<div class="clock-analog">
				<div class="spear"></div>
				<div class="hour"></div>
				<div class="minute"></div>
				<div class="second"></div>
				<div class="dail"></div>
			</div>
		</div>
		
	</div>
	<!--翻页内容-->
	<div class="warp" id="content">
		<div class="txt OPPOSans-R">参与的合作伙伴们</div>
		<ul class="flex flex-warp">
			<li class="transition">
				<div class="icon">
					<a href="https://music.163.com/" target="_blank"><img
							src="https://p1.music.126.net/RWrtPE-7nm-V7gB9MTj7-A==/109951168892318896.jpg?param=180y180"></a>
				</div>
				<h3 class="OPPOSans-M ellipsis"><a href="https://music.163.com/" target="_blank">China</a></h3>
				<p class="OPPOSans-M ellipsis">China</p>
			</li>
			<li class="transition">
				<div class="icon">
					<a href="https://music.163.com/" target="_blank"><img
							src="https://p1.music.126.net/RWrtPE-7nm-V7gB9MTj7-A==/109951168892318896.jpg?param=180y180"></a>
				</div>
				<h3 class="OPPOSans-M ellipsis"><a href="https://music.163.com/" target="_blank">China</a></h3>
				<p class="OPPOSans-M ellipsis">China</p>
			</li>
			<li class="transition">
				<div class="icon">
					<a href="https://music.163.com/" target="_blank"><img
							src="https://p1.music.126.net/RWrtPE-7nm-V7gB9MTj7-A==/109951168892318896.jpg?param=180y180"></a>
				</div>
				<h3 class="OPPOSans-M ellipsis"><a href="https://music.163.com/" target="_blank">China</a></h3>
				<p class="OPPOSans-M ellipsis">China</p>
			</li>
		</ul>

		<canvas id="background"></canvas>
	</div>
	</div>
	</div>
	<script src="js/index.js"></script>
	<script src="js/jquery.min02.js"></script>
	<script>jQuery(".slideTxtBox").slide({});</script>

	<!-- 滑动效果 -->
	<script src="js/jquery.movebg.js"></script>

	<script>
		$(function () {
			$(".link").movebg({ width: 125/*滑块的大小*/, extra: 40/*额外反弹的距离*/, speed: 300/*滑块移动的速度*/, rebound_speed: 400/*滑块反弹的速度*/ });
		})
	</script>
	<!-- 音频效果 -->


	<div id="music" key="6573dad9bc612" api="https://music.xfyun.club"></div>
	<script id="xplayer" src="https://player.xfyun.club/Static/player4/js/player.js"></script>
	<script>
		function run() {
			var image = document.getElementById('background');
			image.onload = function () {
				var engine = new RainyDay({
					image: this
				});
				engine.rain([[1, 2, 8000]]);
				engine.rain([[3, 3, 0.88], [5, 5, 0.9], [6, 2, 1]], 100);
			};
			image.crossOrigin = 'anonymous';
			image.src = './1234.jpg';
		}
		run(); // 在页面加载完毕后立即执行
	</script>
	</script>
	<script src="js/fireworks.js"></script>
	<script src="js/flexible.js"></script>
	<script src="js/index2.js"></script>
	<script src="js/main.js"></script>
</body>


</html>

需要完整代码私信我

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

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

相关文章

【数据采集与预处理】流数据采集工具Flume

一、Flume简介 数据流 &#xff1a;数据流通常被视为一个随时间延续而无限增长的动态数据集合&#xff0c;是一组顺序、大量、快速、连续到达的数据序列。通过对流数据处理&#xff0c;可以进行卫星云图监测、股市走向分析、网络攻击判断、传感器实时信号分析。 &#xff08;…

使用docker安装mysql 8.0

打开命令行&#xff0c;运行 ocker pull mysql:8.0.21 下载成功后&#xff0c;可以看到 进入cmd&#xff0c;输入 docker run -d --name mysql -p 3306:3306 -v /root/mysql/data:/var/lib/mysql -v /root/mysql/config:/etc/mysql/conf.d -e MYSQL_ROOT_PASSWORDabc12345…

Vue3-36-路由-路由的元数据信息 meta

什么是 meta 简单的理解&#xff0c;meta 就是路由对象 的一个属性对象&#xff0c; 可以 通过这个 属性给 路由对象添加 一些必要的属性值&#xff0c; 在使用路由对象时可以获取到这个属性型对象&#xff0c;从而进行一些其他的逻辑判断。 meta 这个非常的简单&#xff0c;就…

最新GPT4教程,GPT语音对话使用,Midjourney绘画,ChatFile文档对话总结+DALL-E3文生图教程工具

一、前言 ChatGPT3.5、GPT4.0、GPT语音对话、Midjourney绘画&#xff0c;文档对话总结DALL-E3文生图&#xff0c;相信对大家应该不感到陌生吧&#xff1f;简单来说&#xff0c;GPT-4技术比之前的GPT-3.5相对来说更加智能&#xff0c;会根据用户的要求生成多种内容甚至也可以和…

【Filament】自定义Blinn Phong光照模型

1 前言 光照元素主要有环境光&#xff08;ambient&#xff09;、漫反射光&#xff08;diffuse&#xff09;、镜面反射光&#xff08;specular&#xff09;&#xff0c;基础的光照模型主要有兰伯特&#xff08;Lambert&#xff09;光照模型、冯氏&#xff08;Phong&#xff09;光…

解决pyuvc无法读取yuv格式的问题

问题描述 我使用pyuvc访问uvc摄像头&#xff0c;但是发现pyuvc只支持了MJPEG的格式和GRAY格式。我在linux下通过v4l2-ctl查看&#xff0c;发现摄像头本身还支持YUV的格式&#xff0c;但是pyuvc解析出的帧格式则没有。后面通过阅读pyuvc的代码&#xff0c;发现libuvc本身没有限…

代码随想录刷题第三十八天| 理论基础 ● 509. 斐波那契数 ● 70. 爬楼梯 ● 746. 使用最小花费爬楼梯

代码随想录刷题第三十八天 动态规划基础理论 斐波那契数 (LC 509) 题目思路&#xff1a; 代码实现&#xff1a; class Solution:def fib(self, n: int) -> int:if n<1: return ndp [0 for _ in range(n1)]dp[1] 1for i in range(2, n1):dp[i] dp[i-1]dp[i-2] …

DS|图(存储与遍历)

题目一&#xff1a;DS图 -- 构建邻接表 题目描述&#xff1a; 已知一有向图&#xff0c;构建该图对应的邻接表。 邻接表包含数组和单链表两种数据结构&#xff0c;其中每个数组元素也是单链表的头结点&#xff0c;数组元素包含两个属性&#xff0c;属性一是顶点编号info&…

Spark概述

Spark概述 Spark是什么 Apache Spark是一个快速的&#xff0c;多用途的集群计算系统&#xff0c;相对于Hadoop MapReduce将中间结果保存在磁盘中&#xff0c;Spark使用了内存保存中间结果&#xff0c;能在数据尚未写入硬盘时在内存中进行运算Spark只是一个计算框架&#xff0c;…

unity PDFRender Curved UI3.3

【PDF】PDFRender 链接&#xff1a;https://pan.baidu.com/s/1wSlmfiWTAHZKqEESxuMH6Q 提取码&#xff1a;csdn 【曲面ui】 Curved UI3.3 链接&#xff1a;https://pan.baidu.com/s/1uNZySJTW0-pPwi2FTE6fgA 提取码&#xff1a;csdn

Syntax Error: Error: Cannot find module ‘imagemin-optipng‘

一、背景&#xff1a; 心酸&#xff0c;很难受&#xff1b;本人主要做后端开发&#xff0c;这几天要打包前端项目 遇到了这个报错 Syntax Error: Error: Cannot find module imagemin-optipng 搞了3天时间才打包成功&#xff0c;使用了各种姿势才搞定。期间百度了各种方案都…

JVM工作原理与实战(七):类的生命周期-初始化阶段

专栏导航 JVM工作原理与实战 RabbitMQ入门指南 从零开始了解大数据 目录 专栏导航 前言 一、类的生命周期 1.加载&#xff08;Loading&#xff09; 2.连接&#xff08;Linking&#xff09; 3.初始化&#xff08;Initialization&#xff09; 4.使用&#xff08;Using&…

噬菌体序列分析工具PhaVa的使用和使用方法

github: 25280841/PhaVa: Adapting the phasefinder approach for identifying phase variation to long reads (github.com) 挺简单的&#xff0c;这里就不翻译了&#xff0c;大家看着直接用吧。 PhaVa PhaVa is an approach for finding potentially Phase Variable invert…

linux中的系统安全

一.账号安全 将非登录用户的shell设为/sbin/nologin 系统中用户有三种&#xff1a;超级管理员 普通用户 程序用户 前两种用户可以登录系统&#xff0c;程序用户不给登录 所以称为非登录用户 命令格式&#xff1a; usermod -s /sbin/nologin&#xff08;改已有用户&#…

【动态规划】【字符串】132.分割回文串 II

作者推荐 【动态规划】【字符串】扰乱字符串 本文涉及的基础知识点 动态规划 字符串 LeetCode132. 分割回文串 II 给你一个字符串 s&#xff0c;请你将 s 分割成一些子串&#xff0c;使每个子串都是回文。 返回符合要求的 最少分割次数 。 示例 1&#xff1a; 输入&#x…

11.2 Linux串口驱动框架

tty 驱动程序框架 tty 驱动程序从下往上分别是设备驱动层、行规程、终端虚拟化、TTY I/O层&#xff0c;它们的功能如下&#xff1a; 设备驱动层&#xff1a;用于驱动设备&#xff0c;如串口、显示器、键盘等。行规程&#xff1a;用于处理控制字符、回显输入数据、缓存输入数据…

矩阵的乘法

首先矩阵的乘法定义如下&#xff1a; #include <stdio.h> int main() { int i 0; int j 0; int arr[20][20] { 0 }; int str[20][20] { 0 }; int s[20][20] { 0 }; int n1 0; int n2 0; int m2 0; int z 0; int m1 0;…

使用IDEA官方docker插件构建镜像

此方法同样适用于jetbrains系列的其他开发软件 在IDEA中&#xff0c;如果是maven项目&#xff0c;可以使用插件 <plugin><groupId>com.spotify</groupId><artifactId>docker-maven-plugin</artifactId><version>1.2.2</version> &…

用于查询性能预测的计划结构深度神经网络模型--大数据计算基础大作业

用于查询性能预测的计划结构深度神经网络模型 论文阅读和复现 24.【X1.1】 在关系数据库查询优化领域&#xff0c;对查询时间的估计准确性直接决定了查询优化结果&#xff0c;进而影响到数据库整体的查询效率。但由于数据库自身的复杂性&#xff0c;查询时间受到数据分布、数据…

Linux操作实例 – 输入输出重定向

Linux操作实例 – 输入输出重定向 Input & Output Redirection Examples in Linux By Jackson 1. 前言 在操作计算机的时候&#xff0c;我们能够很容易通过键盘、鼠标给计算机输入信息&#xff08;例如&#xff1a;写公文、邮件&#xff0c;同时通过显示器得到输出。这就…