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

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

效果:

70.gif



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); // 毫秒/1000
            var day = parseInt(time / 86400); // 天  24*60*60*1000
            var 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>

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


目录
打赏
0
0
1
0
114
分享
相关文章
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
53 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
126 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
1月前
html实现的文字发散动画效果代码
html实现的文字发散动画效果代码
70 30
基于HTML5+Canvas绘制的鼠标跟随三角形碎片光标动画代码
基于HTML5+Canvas绘制的鼠标跟随三角形碎片光标动画特效代码,很有意思,一团三角形碎片跟随鼠标的移动,不冗长、不笨重,反而有一种很轻盈的感觉,非常不错
59 29
|
3月前
html实现的破碎拼接文字动画特效代码
html实现的破碎拼接文字动画特效代码是一段会自动产生文字依次破碎再拼接的效果,非常的炫。欢迎对此段代码感兴趣的朋友前来下载使用。
55 1
HTML 统一资源定位器(Uniform Resource Locators)3
URL字符编码是指将URL中非ASCII字符转换为有效的ASCII格式的过程。URL只能使用ASCII字符集,因此需要对超出该集合的字符进行编码。URL编码使用“%”加上两位十六进制数来表示非ASCII字符,空格通常被编码为“+”。例如,€编码为%80,£编码为%A3。更多信息可参见URL编码参考手册。
HTML 统一资源定位器(Uniform Resource Locators)2
常见的URL Scheme包括:http(超文本传输协议,用于普通网页,不加密)、https(安全超文本传输协议,用于安全网页,加密信息交换)、ftp(文件传输协议,用于文件的上传和下载)、file(用于访问本地计算机上的文件)。
HTML 统一资源定位器(Uniform Resource Locators)1
统一资源定位器(URL)是用于标识互联网上资源位置的标准格式。URL通常由方案、主机、域名、端口、路径和文件名组成,如 `http://www.runoob.com/html/html-tutorial.html`。大多数用户通过域名访问网站,因为域名比IP地址更容易记忆。URL在Web浏览器中用于请求页面,通过 `&lt;a&gt;` 标签实现链接跳转。
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
181 6
|
4月前
|
spring boot 整合 itextpdf 导出 PDF,写入大文本,写入HTML代码,分析当下导出PDF的几个工具
这篇文章介绍了如何在Spring Boot项目中整合iTextPDF库来导出PDF文件,包括写入大文本和HTML代码,并分析了几种常用的Java PDF导出工具。
922 0
spring boot 整合 itextpdf 导出 PDF,写入大文本,写入HTML代码,分析当下导出PDF的几个工具
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等