2022跨年代码(HTML·资源都是网上的可以直接使用)

效果：

HTML编码：

<!doctype html>
<html><head><meta charset="utf-8"><title>新年快乐</title><style>canvas {padding: 0;margin: 0;}body {overflow: hidden;margin: 0;background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.ayla.com.cn%2Fassets%2Fblt8947f26905c0f94e%2FCSDN.jpg&refer=http%3A%2F%2Fwww.ayla.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643517927&t=77c836c02ff00e1906d2c826b82c85e8');background-repeat: no-repeat;background-size: 70%;background-position-x: 50%;}h1 {position: fixed;left: 0;top: 50%;width: 100%;text-align: center;transform: translateY(-50%);font-family: '行楷', cursive;font-size: 60px;color: black;padding: 0 20px;}h1 span {position: fixed;left: 0;width: 100%;text-align: center;margin-top: 20px;font-size: 5rem;color: red;}</style>
</head><body><h1 id="h1"></h1><script>window.onload = function starttime() {time(h1, '2022/1/1');ptimer = setTimeout(starttime, 1000); // 添加计时器}function time(obj, futimg) {var nowtime = new Date().getTime(); // 现在时间转换为时间戳var futruetime = new Date(futimg).getTime(); // 未来时间转换为时间戳var msec = futruetime - nowtime; // 毫秒 未来时间-现在时间var time = (msec / 1000); // 毫秒/1000var day = parseInt(time / 86400); // 天  24*60*60*1000var hour = parseInt(time / 3600) - 24 * day; // 小时 60*60 总小时数-过去的小时数=现在的小时数var minute = parseInt(time % 3600 / 60); // 分 -(day*24) 以60秒为一整份 取余 剩下秒数 秒数/60 就是分钟数var second = parseInt(time % 60); // 以60秒为一整份 取余 剩下秒数obj.innerHTML = "<br>距离2022年还有：<br>" + day + "天" + hour + "小时" + minute + "分" + second + "秒" + "<br><span>新年快乐</span>"}</script><audio autoplay="autoplay" src="http://music.163.com/song/media/outer/url?id=1851244378.mp3" id="song">
</audio>
</body></html>

希望能给大家带来一定的欢乐，谢谢,新年快乐。

2022跨年代码(HTML·资源都是网上的可以直接使用)相关推荐

JS代码大全（都是网上看到自己整理的）
原文 JS代码大全 (都是网上看到自己整理的) 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElemen ...
2022跨年烟花代码
演示 2022跨年烟花演示基于b站的视频修改了一点点,演示:抖音演示我的b站:川川菜鸟部署网站链接:跨年烟花部分代码 <!DOCTYPE html PUBLIC "-//W3C ...
Three.js实例详解___旋转的精灵女孩(附完整代码和资源)（一）
Three.js实例详解___旋转的精灵女孩(附完整代码和资源)(一) 本文目录: 一.[旋转的精灵女孩]案例运行效果二.Three.js简介三.Three.js代码正常运行显示条件 (1)不载入 ...
圆满收官，百花齐放！2022企业级低代码应用大赛获奖结果公布
在企业全面拥抱数字化的进程中,不断简化范式化流程.减少重复性工作,是数字化时代各行各业变革的核心诉求,也是厂商们需要思考和赋能的价值趋势.低代码,作为软件开发发展的必然趋势,可以高效集成既有系统并且满 ...
Three.js实例详解___旋转的精灵女孩(附完整代码和资源)（二）
Three.js实例详解___旋转的精灵女孩(附完整代码和资源)(二) 本篇目录: 五.实例中所使用的代码语法详细解释 (1).构建一个三维空间场景 (2).选择一个透视投影相机作为观察点 (a).创 ...
成都扬帆际海跨境：2022跨境出海怎么玩
跨境电商的品牌非常多,做跨境电商,主要是选对品牌,与投入更多的热情去经营,今天扬帆跨境电商就给你分享一下:成都扬帆际海跨境:2022跨境出海怎么玩中国企业出海的本质一直是向国外溢出品牌优势,但几十年 ...
分享9个最棒的代码片段资源网站
作为一个奋斗在第一线的码农来说,能找到自己能在项目中直接使用的代码无疑是一件天大的喜事.代码片段和代码库到处都有,如何找到自己需要的东西绝对是一个大问题,为了帮助大家更好的找到自己需要的代码,今天我们 ...
Web前端开发最佳实践（3）：前端代码和资源的压缩与合并
一般在网站发布时,会压缩前端HTML.CSS.JavaScript代码及用到的资源文件(主要是图片文件),目的是加快文件在网络中的传输,让网页更快的展现.当然,CDN分发.缓存等方式也是加快代码或资源 ...
90% 的前端都会使用 ES6 来简化代码，你都用过哪些？
点击上方前端瓶子君,关注公众号回复算法,加入前端编程面试算法每日一题群前言 (介绍 ECMAScript) 最初 JavaScript 语言有 2 份标准: ECMA-262:主标准,由 ECM ...

2022跨年代码(HTML·资源都是网上的可以直接使用)

2022跨年代码(HTML·资源都是网上的可以直接使用)相关推荐

最新文章

热门文章