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.hqwc.cn/news/322943.html

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

相关文章

Jvm垃圾收集器系列之Parallel Scavenge收集器(个人见解仅供参考)

问&#xff1a;什么是Parallel Scavenge&#xff1f; 答&#xff1a;Parallel Scavenge是Java HotSpot虚拟机中的一种垃圾收集器&#xff0c;它主要用于提高应用程序的吞吐量。 问&#xff1a;Parallel Scavenge的主要目标是什么&#xff1f; 答&#xff1a;Parallel Scavenge的…

[Redis实战]分布式锁-redission

五、分布式锁-redission 5.1 分布式锁-redission功能介绍 基于setnx实现的分布式锁存在下面的问题&#xff1a; 重入问题&#xff1a;重入问题就是指获得锁的线程可以再次进入到相同的锁的代码中&#xff0c;可重入锁的意义在于防止死锁。比如HashTable这样的代码中&#xf…

纯前端上传word,xlsx,ppt,在前端预览并下载成图片(预览效果可以,下载图片效果不太理想)

纯前端上传word,xlsx,ppt,在前端预览并下载成图片&#xff08;预览效果可以&#xff0c;下载图片效果不太理想&#xff09; 一.安装依赖二、主要代码 预览效果链接: https://github.com/501351981/vue-office 插件文档链接: https://501351981.github.io/vue-office/examples/d…

conda虚拟环境搭建和打包,删除,移动等全流程及相关问题汇总

私人笔记无偿分享&#xff0c;更多内容请访问&#xff1a;链接&#xff1a;https://pan.baidu.com/s/19mS5N9XJ_AotF20kUwSA3w?pwdp5kx 提取码&#xff1a;p5kx 复制这段内容后打开百度网盘手机App&#xff0c;操作更方便哦 4.4. anaconda虚拟环境搭建&#xff1a; 网址&am…

爬虫网易易盾滑块案例:某乎

声明&#xff1a; 该文章为学习使用&#xff0c;严禁用于商业用途和非法用途&#xff0c;违者后果自负&#xff0c;由此产生的一切后果均与作者无关 一、滑块初步分析 js运行 atob(‘aHR0cHM6Ly93d3cuemhpaHUuY29tL3NpZ25pbg’) 拿到网址&#xff0c;浏览器打开网站&#xff0…

springboot中引入AOP切面编程

在Spring Boot 3.0中引入AOP的过程如下所示&#xff1a; 1、首先&#xff0c;确保已经添加了相关依赖。可以通过Maven或Gradle来管理项目的依赖。对于使用Maven构建的项目&#xff0c;需要将以下依赖添加到pom.xml文件中 <dependency><groupId>org.springframewo…

Java项目:109SpringBoot超市仓管系统

博主主页&#xff1a;Java旅途 简介&#xff1a;分享计算机知识、学习路线、系统源码及教程 文末获取源码 一、项目介绍 超市仓管系统基于SpringBootMybatis开发&#xff0c;系统使用shiro框架做权限安全控制&#xff0c;超级管理员登录系统后可根据自己的实际需求配角色&…

信息论与编码期末复习——概念论述简答题(一)

个人名片&#xff1a; &#x1f981;作者简介&#xff1a;一名喜欢分享和记录学习的在校大学生 &#x1f42f;个人主页&#xff1a;妄北y &#x1f427;个人QQ&#xff1a;2061314755 &#x1f43b;个人邮箱&#xff1a;2061314755qq.com &#x1f989;个人WeChat&#xff1a;V…

了解单元测试

一&#xff0c;测试分类 1.1 E2E测试&#xff08;end to end端到端测试&#xff09; 属于黑盒测试。 主要通过测试框架&#xff0c;站在用户测试人员的角度&#xff0c;模拟用户的操作进行页面功能的验证&#xff0c;不管内部实现机制&#xff0c;完全模拟浏览器的行为。&am…

李沐机器学习系列5---循环神经网络

1 Introduction 对于样本的分析&#xff0c;通过全连接层处理表格数据&#xff0c;通过卷积神经网络处理图像数据&#xff1b;第一种假设&#xff0c;所有数据都是独立同分布的RNN 处理序列信号 序列数据的更多场景 1&#xff09;用户使用习惯具有时间的先后性 2&#xff09;外…

JS新手入门笔记整理:JS语法基础

变量与常量 变量 语法 var 变量名值&#xff1b; 1、在JavaScript中&#xff0c;给一个变量命名&#xff0c;需要遵循以下2个方面的原则&#xff1a; 变量由字母、下划线、$或数字组成&#xff0c;并且第一个字母必须是字母、下划线或$。变量不能是系统关键字和保留字。 2…

生成式AI:开发效率的提升者

文章目录 摘要引言应用方向应用示例1. 自动化代码生成2. 智能样式生成3. 自动化测试与调试 总结&#x1f636; 写在结尾 摘要 生成式AI作为一种新兴技术&#xff0c;正在迅速改变软件开发的方式。通过自动化和优化开发流程&#xff0c;它可以帮助开发人员更快地生成代码、测试…