web期末作业动态时钟UI界面毛玻璃版

效果图

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

html代码奉上

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"><title>期末作业</title><meta name="keywords" content="期末作业"><meta name="description" content="期末作业"><meta name="author" content="作业"><link rel="shortcut icon" href="http://www.qq8y.com/favicon.ico" type="image/x-icon"><link rel="stylesheet" href="https://cdn.staticfile.org/Swiper/8.3.0/swiper-bundle.min.css"><link rel="stylesheet" href="./static/css/normalize.css"><!-- 点开下面两个css，都是第四行代码替换背景 --><link rel="stylesheet" href="./static/css/style.pc.css" media="screen and (min-width: 992px)"> <!-- PC端 --><script src="https://npm.elemecdn.com/sweetalert/dist/sweetalert.min.js"></script><script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
</head><body onmousedown="getClick(event)"><div class="xf_load"><span>页面加载中...</span></div><section class="big_box"><header class="xf_hd_box"><!-- 标题 --><h1>Terminal web Work</h1><!-- 标题阴影（两个要改一样的） --><h2 class="xf_glass">Terminal web Work</h2><div class="xf_search"><form action="https://www.baidu.com/baidu" target="_blank"><input type="text" name="word" size="30" autocomplete="off" placeholder="百度一下"><input type="submit" value=""><i class="iconfont icon-sousuo"></i></form></div></header><div class="main_content"><div class="xf_left_box slidebox"><div class="xf_leftbox_top xf_glass"><div class="xf_time xf_glass"><div class="clock"><div class="hand hours"></div><div class="hand minutes"></div><div class="hand seconds"></div><div class="point"></div><div class="marker"><span class="marker_time marker__1"></span><span class="marker_time marker__2"></span><span class="marker_time marker__3"></span><span class="marker_time marker__4"></span></div></div><div class="display_time"><h3 class="xf_time_1">20:57</h3><h4 class="xf_time_2">2022年10月23日</h4><h5 class="xf_time_3">星期日</h5></div></div><div class="xf_weather xf_glass"><div id="he-plugin-standard"></div></div></div><div class="xf_ico_banner"><div class="swiper-wrapper"><!-- 这是第一个轮播 --><div class="swiper-slide"><ul><li class="xf_glass"><a href="JavaScript:;" target="_blank" rel="noopener noreferrer"><img src="./static/upload/qq.png"></a></li><li class="xf_glass"><a href="JavaScript:;" rel="noopener noreferrer"><img loading="lazy" id="xf_wxImg" src="./static/upload/tx.jpg" alt="扫一扫添加微信" width="300" height="200"><img src="./static/upload/wx.png"></a></li><li class="xf_glass"><a href="JavaScript:;" target="_blank" rel="noopener noreferrer"><img src="./static/upload/bilibili.png"></a></li><li class="xf_glass"><a href="JavaScript:;" target="_blank" rel="noopener noreferrer"><img src="./static/upload/mail.png"></a></li></ul></div><!-- 这是第二个轮播 --><div class="swiper-slide"><ul><li class="xf_glass"><a href="JavaScript:;" target="_blank" rel="noopener noreferrer"><img src="./static/upload/qq.png"></a></li><li class="xf_glass"><a href="JavaScript:;" target="_blank" rel="noopener noreferrer"><img src="./static/upload/wx.png"></a></li></ul></div></div><div class="swiper-button-next swiper-button-next-ico"></div><div class="swiper-button-prev swiper-button-prev-ico"></div></div></div><div class="xf_center_box slidebox"><div class="center_top xf_glass"><div class="xf_jieshao"><div class="xf_tx xf_glass"><img src="./static/upload/tx.jpg" alt="头像"></div><div class="name"><small>China</small><h3>期末作业</h3><p>我热爱你所热爱的一切！</p></div><div class="iconfont icon-zhuanfa xf_zhuanfa"></div></div><div class="xf_but"><a class="but_site" href="JavaScript:;"><span>个人目录</span><div></div></a><a class="but_fortune" href="JavaScript:;"><span>今日运势</span><div></div></a></div></div><div class="center_bottom"><div class="xf_site xf_glass"><h4><font>个人目录</font></h4><ul class="web_site"><li class="xf_glass"><!-- 这里替换链接 --><a href="https://music.163.com/" target="_blank" rel="noopener noreferrer"><!-- 这里替换图标 --><img class="xf_img_light" src="	https://img.88icon.com/upload/jpg/20210524/11ae3592afbb70798842b52aa936cf16_42148_512_512.jpg!bg "><span>酷狗</span></a></li><li class="xf_glass"><a href="JavaScript:;" target="_blank" rel="noopener noreferrer"><img class="xf_img_light" src="https://ts1.cn.mm.bing.net/th/id/R-C.3cfef91f76dd7af5a9eb3d22902f9d69?rik=4%2bEDYJ%2fzHipGkA&riu=http%3a%2f%2fbpic.588ku.com%2felement_pic%2f18%2f07%2f04%2f4faa2499a31d957235882e88e7878f0d.jpg&ehk=hldtRFgGtBBTyqUmtTRlODvaD8OpslWLwQAsFFHPRgA%3d&risl=&pid=ImgRaw&r=0"><span>网易云</span></a></li><li class="xf_glass"><a href="JavaScript:;" target="_blank" rel="noopener noreferrer"><img class="xf_img_light" src="https://img.zcool.cn/community/010e3959428072a8012193a30452e5.png@1280w_1l_2o_100sh.png" ><span>qq音乐</span></a></li><li class="xf_glass"><a href="JavaScript:;" target="_blank" rel="noopener noreferrer"><img class="xf_img_light" src="https://tse4-mm.cn.bing.net/th/id/OIP-C.0Rk6qkLVQh3Kb3vq7JDejAHaHa?w=192&h=192&c=7&r=0&o=5&dpr=1.3&pid=1.7" ><span>腾讯视频</span></a></li></ul></div><div class="xf_fortune xf_glass" style="display: none;"><h4><font>今日运势: <span>★★★★★</span></font></h4><ul class="Today_Fortune xf_glass"><li><strong>运势：</strong><span><em style="width: 45%;"></em></span></li><li><strong>爱情：</strong><span><em style="width: 70%;"></em></span></li><li><strong>健康：</strong><span><em style="width: 100%;"></em></span></li><li><strong>财富：</strong><span><em style="width: 20%;"></em></span></li></ul></div></div></div><div class="xf_right_box xf_glass slidebox"><div class="xf_music_box"><i class="iconfont icon-youjiantou" id="icon-rotate"></i><div class="music_picture xf_glass"><span id="music-img" class="music-img" alt="picture"></span></div><div class="Song_Title"><div class="music-info"></div><div class="runningbox"><div class="start">00:00</div><div class="running" onclick="changeProgress()"><div class="running1"><i class="circular"></i></span></div></div><div class="end">00:00</div></div><ul class="music_but"><li id="pre" class="iconfont" onclick="preMusic()">&#xe603;</li><li id="pause" class="iconfont" onclick="pauseMusic()">&#xe638;</li><li id="next" class="iconfont" onclick="nextMusic()">&#xe602;</li></ul></div></div><div class="xf_friends" style="display: none;"><h4 id="xf-friend-rotate"><img src="./static/images/cooperation.png">我的好友</h4><ul class="xf_friend_YYDS"><li><a href="http://wpa.qq.com/msgrd?v=3&uin=691823605&site=qq&menu=yes" target="_blank" rel="noopener noreferrer"><img src="https://q2.qlogo.cn/headimg_dl?dst_uin=271106735&amp;spec=100" alt="China"><h5>China</h5><p>我热爱你所热爱的一切！</p></a></li><li><a href="JavaScript:;" target="_blank" rel="noopener noreferrer"><img src="http://www.qq8y.com/favicon.ico" alt="China"><h5>China</h5><p>我热爱你所热爱的一切！</p></a></li></ul></div></div></div></section><div id="myModal" class="modal"><span class="close" onclick="document.getElementById('myModal').style.display='none'">&times;</span><img class="modal-content" id="img01"><div id="caption"></div></div><div class="xf-swiper-pagination"></div><footer class="xf_footer xf_glass"><p>Copyright &copy; 2023 <a href="JavaScript:;" rel="noopener noreferrer">网易云音乐 我热爱你所热爱的一切！</a> 团队所有 已安全运行<span class="xf-days"></span></p></footer><script src="https://cdn.staticfile.org/Swiper/8.3.0/swiper-bundle.min.js"></script><!-- <script src="./static/swiper/swiper-bundle.min.js"></script> --><script src="./static/js/flexible.js"></script><script src="./static/js/fireworks.js"></script><script src="./static/js/index.js"></script><script src="https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0"></script><script>// 这里修改网站运行时间var xf_footer_time1=new Date('2023-01-01').getTime()var xf_footer_time2=new Date().getTime()var days=xf_footer_time2-xf_footer_time1var number_of_days=parseInt(days/(1000*60*60*24))$(".xf-days")[0].innerHTML=number_of_days+'天'</script>
</body></html>

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

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

相关文章

数据结构实验1：栈和队列的应用

数据结构实验1：栈和队列的应用

目录 一、实验目的 二、实验原理 1.1栈的基本操作 1.1.1 栈的定义 1.1.2 初始化栈 1.1.3 压栈&#xff08;Push&#xff09; 1.1.4 出栈&#xff08;Pop&#xff09; 1.1.5 判空&#xff08;isEmpty&#xff09; 1.1.6 查看栈顶元素&#xff08;Top&#xff09; 1.1…
阅读更多...
DNS安全与访问控制

DNS安全与访问控制

一、DNS安全 1、DNSSEC原理 DNSSEC依靠数字签名保证DNS应答报文的真实性和完整性。权威域名服务器用自己的私有密钥对资源记录&#xff08;Resource Record, RR&#xff09;进行签名&#xff0c;解析服务器用权威服务器的公开密钥对收到的应答信息进行验证。如果验证失败&…
阅读更多...
【LeetCode】150. 逆波兰表达式求值(ASCII码)

【LeetCode】150. 逆波兰表达式求值(ASCII码)

今日学习的文章链接和视频链接 leetcode题目地址&#xff1a;150. 逆波兰表达式求值 代码随想录题解地址&#xff1a;代码随想录 题目简介 即将后缀表达式转换成中缀表达式并计算。 给你一个字符串数组 tokens &#xff0c;表示一个根据 逆波兰表示法 表示的算术表达式。 …
阅读更多...
Spring学习之——AOP（面向切面）

Spring学习之——AOP（面向切面）

AOP 概念 AOP&#xff1a;全称是Aspect Oriented Programming即&#xff1a;面向切面编程。 简单的说它就是把我们程序重复的代码抽取出来&#xff0c;在需要执行的时候&#xff0c;使用动态代理的技术&#xff0c;在不修改源码的基础上&#xff0c;对程序进行增强&#xff…
阅读更多...
CentOS设置docker静态ip

CentOS设置docker静态ip

docker容器的ip地址在每次启动后启动顺序设置ip地址&#xff0c;为解决ip地址变动的问题&#xff0c;我们有必要设置docker内部ip地址固定。 第一步先创建一个本地ip地址固定容器的ip docker network create —driver bridge —subnet172.18.12.0/16 —gateway172.18.1.1 wn_d…
阅读更多...
MybatisPlus—自定义SQL

MybatisPlus—自定义SQL

目录 1. 自定义SQL介绍 2. 自定义SQL使用步骤 3. 自定义SQL实例 4.总结 1. 自定义SQL介绍 介绍&#xff1a;自定义SQL并不是由我们来编写全部SQL语句&#xff0c;而是通过利用MyBatisPlus的Wrapper来构建复杂的Where条件&#xff0c;然后自己定义SQL语句中剩下的部分。 使…
阅读更多...
基于B/S架构的数字孪生智慧监所可视化监管系统

基于B/S架构的数字孪生智慧监所可视化监管系统

1 前言 物联网技术的发展使云计算技术得到了迅猛的发展及广泛的应用&#xff0c;智能体系的创建已经成为监狱发展的必然趋势。 智慧监狱的创建、智能化管理的推行是监狱管理的创新&#xff0c;也是监狱整体工作水平提升的具体体现。 1.1 建设背景 近年来&#xff0c;司法部不…
阅读更多...
vue3+echart绘制中国地图并根据后端返回的坐标实现涟漪动画效果

vue3+echart绘制中国地图并根据后端返回的坐标实现涟漪动画效果

1.效果图 2.前期准备 main.js app.use(BaiduMap, {// ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */ak: sRDDfAKpCSG5iF1rvwph4Q95M6tDCApL,// v:3.0, // 默认使用3.0// type: WebGL // ||API 默认API (使用此模式 BMapBMapGL) });i…
阅读更多...
数据库设计-DDL

数据库设计-DDL

D D L \huge{DDL} DDL DDL&#xff1a;数据库定义语言&#xff0c;用来定义数据对象&#xff08;数据库、表&#xff09; 简单操作 首先在cmd中进行操作&#xff0c;登录数据库 show databases; -- 以列表的形式显示所有的数据库create database [if not exists] 数据库名称…
阅读更多...
【unity】Obi插件架构组成（参数详细解释）——解算器四面板设置、三种更新器、参与者介绍

【unity】Obi插件架构组成（参数详细解释）——解算器四面板设置、三种更新器、参与者介绍

文章目录 一、架构&#xff08;Architecture&#xff09;1.1 Obi解算器&#xff08;ObiSolver&#xff09;1.2 ObiUpdater1.3 ObiActorBlueprint1.4 Obi参与者&#xff08;ObiActor&#xff0c;如ObiRope等&#xff09; 二、Obi解算器&#xff08;ObiSolver&#xff09;2.1 解算…
阅读更多...
uniapp中组件库的Textarea 文本域的丰富使用方法

uniapp中组件库的Textarea 文本域的丰富使用方法

目录 #平台差异说明 #基本使用 #字数统计 #自动增高 #禁用状态 #下划线模式 #格式化处理 API #List Props #Methods #List Events 文本域此组件满足了可能出现的表单信息补充&#xff0c;编辑等实际逻辑的功能&#xff0c;内置了字数校验等 注意&#xff1a; 由于…
阅读更多...
【深度学习：Few-shot learning】理解深入小样本学习中的孪生网络

【深度学习：Few-shot learning】理解深入小样本学习中的孪生网络

【深度学习&#xff1a;Few-shot learning】理解深入小样本学习中的孪生网络 深入理解孪生网络&#xff1a;架构、应用与未来展望小样本学习的诞生元学习小样本学习孪生网络的基本概念孪生网络的细节Triplet Loss架构特点关键组件训练过程主要应用领域未来展望示例图片结论 深入…
阅读更多...
经典八股文之RocketMQ

经典八股文之RocketMQ

核心概念 NameServer nameserver是整个rocketmq的大脑&#xff0c;是rocketmq的注册中心。broker在启动时向所有nameserver注册。生产者在发送消息之前先从 NameServer 获取 Broker 服务器地址列表(消费者一 样)&#xff0c;然后根据负载均衡算法从列表中选择一台服务器进行消…
阅读更多...
Matplotlib for C++不完全手册

Matplotlib for C++不完全手册

matplotlib-cpp是Matplotlib&#xff08;MPL&#xff09;为C提供的一个用于python的matplotlib绘图库的C包装器。它的构建类似于Matlab和matplotlib使用的绘图API。 However, the function signatures might differ and Matplotlib for C does not support the full functional…
阅读更多...
电子学会C/C++编程等级考试2023年12月（二级）真题解析

电子学会C/C++编程等级考试2023年12月（二级）真题解析

C/C++编程（1~8级）全部真题・点这里 第1题：统计指定范围里的数 给定一个数的序列S，以及一个区间[L, R], 求序列中介于该区间的数的个数，即序列中大于等于L且小于等于R的数的个数。 时间限制：1000 内存限制：65536 输入 第一行1个整数n，分别表示序列的长度。（0 < n ≤…
阅读更多...
ThinkPHP5多小区物业管理系统源码(支持多小区)

ThinkPHP5多小区物业管理系统源码(支持多小区)

基于 ThinkPHP5 Bootstrap 倾力打造的多小区物业 管理系统源码&#xff0c;操作简单&#xff0c;功能完善&#xff0c;用户体验良好 开发环境PHP7mysql 安装步骤: 1.新建数据库db_estate,还原数据db_estate.sql 2.修改配置文件&#xff1a;application/database.php 3.运…
阅读更多...
pyqt6 + pycharm 搭建+使用入门

pyqt6 + pycharm 搭建+使用入门

首先安装PyQt6和PyQt6-tools。使用如下命令&#xff1a; pip install PyQt6 PyQt6-tools 但是运行后会报如下错误&#xff1a; 这个时候按照提示执行命令升级pip即可 python.exe -m pip install --upgrade pip 配置pycharm&#xff1a; 打开pycharm&#xff0c;进入setting&am…
阅读更多...
Java最大优先队列设计与实现

Java最大优先队列设计与实现

Java 学习面试指南&#xff1a;https://javaxiaobear.cn 1、API设计 类名MaxPriorityQueue构造方法MaxPriorityQueue(int capacity)&#xff1a;创建容量为capacity的MaxPriorityQueue对象成员方法private boolean less(int i,int j)&#xff1a;判断堆中索引i处的元素是否小…
阅读更多...
Mathtype7.4安装与嵌入WPS

Mathtype7.4安装与嵌入WPS

文章目录 Mathtype安装教程&#xff08;7.4&#xff09;Mathtype简介Mathtype下载安装软件下载软件安装运行MathType.exe运行注册表 Mathtype嵌入wps Mathtype安装教程&#xff08;7.4&#xff09; Mathtype简介 MathType是一款强大的数学公式编辑器&#xff0c;适用于教育教…
阅读更多...
npm发布js工具包

npm发布js工具包

一、创建项目 1、在github上创建一个项目&#xff0c;然后拉取至本地&#xff0c;进入项目目录2、执行 npm init 生成json文件3、创建 src/index.ts 入口文件和 src/isObject.ts 工具方法 src/index.ts export { default as isObject } from ./isObject src/isObject.ts /…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023