雪花代码

最新推荐文章于 2024-01-23 22:16:47 发布
最新推荐文章于 2024-01-23 22:16:47 发布
阅读量2.8k 收藏 5
点赞数 1
分类专栏： 测试用
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HeroRazor/article/details/85334326
版权 
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>文件下载</title>
    <script>
        window.onload = function() {
            clickToHref();
        }

        function clickToHref() {
            var eles = document.querySelectorAll("div[href]");
            eles.forEach(function(item) {
                item.addEventListener("click", function() {
                    var href = item.getAttribute("href");
                    var target = item.getAttribute("target");
                    if (!target) {
                        location.href = href;
                    } else {
                        window.open(href, target);
                    }
                });
            })
        }

        function deleteFile(path) {
            event.stopPropagation();
            var httpRequest = new XMLHttpRequest();
            var url = "http://172.16.71.247:28801/wkdelete?path=" + path;
            alert(url);

            httpRequest.open('GET', url, true);
            httpRequest.send();
            httpRequest.onreadystatechange = function() {
                window.location.reload();
            };
        }
    </script>
    <style>
        .windmill__sun {
            position: absolute;
            height: 30px;
            width: 30px;
            top: 250px;
            left: 10%;
            border-radius: 100%;
            background: #B6E2FF;
            box-shadow: 0 0 300px 80px #B6E2FF, 0 0 200px 40px #B6E2FF, 0 0 50px 10px #B6E2FF;
        }
        
        .windmill__snowflake {
            position: absolute;
            background-color: #B6E2FF;
            transform: rotate(45deg);
            height: 10px;
            width: 10px;
            animation: snowflake 10s linear infinite;
            opacity: .5;
        }
        
        .windmill__snowflake:nth-child(1) {
            left: 100px;
            top: -23px;
            animation-delay: 0s;
        }
        
        .windmill__snowflake:nth-child(2) {
            left: 800px;
            top: -100px;
            animation-delay: 1s;
        }
        
        .windmill__snowflake:nth-child(3) {
            left: 1200px;
            top: -42px;
            animation-delay: 2s;
        }
        
        .windmill__snowflake:nth-child(4) {
            left: 356px;
            top: -15px;
            //animation-delay: 3s;
        }
        
        .windmill__snowflake:nth-child(5) {
            left: 1600px;
            top: -90px;
        }
        
        .windmill__snowflake:nth-child(6) {
            left: 610px;
            top: -50px;
            animation-delay: 2s;
        }
        
        .windmill__snowflake:nth-child(7) {
            left: 840px;
            top: -123px;
            animation-delay: 1s;
        }
        
        .windmill__snowflake:nth-child(8) {
            left: 2000px;
            top: -37px;
            animation-delay: 3s;
        }
        
        .windmill__snowflake:nth-child(9) {
            left: 1320px;
            top: -200px;
            animation-delay: 1s;
        }
        
        .windmill__snowflake:nth-child(10) {
            left: 954px;
            top: -100px;
            animation-delay: 2s;
        }
        
        @keyframes blades {
            100% {
                transform: rotate(-360deg);
            }
        }
        
        @keyframes cloud {
            0% {
                transform: translateX(1000px);
            }
            50% {
                transform: translateX(800px);
            }
            100% {
                transform: translateX(0);
            }
        }
        
        @keyframes snowflake {
            0% {
                transform: rotate(45deg) translateX(0) translateY(0px);
            }
            20% {
                transform: rotate(45deg) translateX(-100px) translateY(240px);
            }
            40% {
                transform: rotate(45deg) translateX(-40px) translateY(480px);
            }
            60% {
                transform: rotate(45deg) translateX(-100px) translateY(720px);
            }
            80% {
                transform: rotate(45deg) translateX(-40px) translateY(960px);
            }
            100% {
                transform: rotate(45deg) translateX(-10px) translateY(1200px);
            }
        }
        
        body {
            margin: 0;
            padding: 0;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-size: 62.5%;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }
        
        .rootDiv {
            position: absolute;
            width: 100%;
            text-align: left;
            min-height: 100%;
            background-color: #6096C4;
        }
        
        a:hover {
            color: #DAA520;
        }
        
        a {
            color: #FFD700;
            font-size: 16px;
            font-family: Helvetica, Arial, "PingFang SC", "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
        }
        
        table {
            *border-collapse: collapse;
            border-spacing: 0;
            width: 100%;
            font-size: 16px;
        }
        
        .zebra td,
        .zebra th {
            padding: 10px;
            border-bottom: 1px solid #DCDCDC;
        }
        
        .zebra .highlight,
        .zebra tr:hover td {
            background: #A9A9A999;
        }
        
        .zebra .alternate,
        .zebra tbody tr:nth-child(even) {
            background: #DCDCDCAA;
        }
        
        .zebra tbody tr:nth-child(odd) {
            background: #F5F5F5DD;
        }
        
        .zebra th {
            text-align: left;
            background-color: #F1F1F1;
        }
        
        .zebra th:first-child {
            -moz-border-radius: 0 0 0 0;
            -webkit-border-radius: 0 0 0 0;
            border-radius: 0 0 0 0;
        }
        
        .zebra th:last-child {
            -moz-border-radius: 0 0 0 0;
            -webkit-border-radius: 0 0 0 0;
            border-radius: 0 0 0 0;
        }
        
        .container {
            width: 800px;
            font-size: 2em;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 6px 6px 24px rgba(0, 0, 0, 0.1);
            cursor: pointer;
            margin: 30px auto;
        }
        
        .container .box {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            height: 80px;
            padding: 0px 20px;
            transition: all 0.3s;
            color: white;
        }
        
        .attribute {
            justify-content: space-between;
            display: flex;
            align-items: center;
            font-size: 1.2em;
            width: 250px;
        }
        
        .deleteBtn {
            text-decoration: none;
            font-size: 0.8em
        }
        
        .container .box.box5 {
            background-color: rgb(105, 155, 47);
        }
        
        .container .box.box6 {
            background-color: rgb(80, 230, 205);
        }
        
        .container .box.box1 {
            background-color: #7986CB;
        }
        
        .container .box.box2 {
            background-color: #FF8A65;
        }
        
        .container .box.box3 {
            background-color: #F06292;
        }
        
        .container .box.box4 {
            background-color: #4DB6AC;
        }
        
        .container .box .name {
            width: 300px;
        }
        
        .container .box .name h4,
        .container .box .name h5 {
            font-weight: 300;
        }
        
        .container .box .name h5 {
            font-size: 0em;
            line-height: 1.5;
        }
        
        .container .box p {
            font-size: 0.8em;
            font-weight: 300;
        }
        
        .container .box:before {
            content: "";
            height: 0px;
            width: 0px;
            border: 2px solid white;
            border-radius: 50%;
            margin-left: -20%;
            background-color: white;
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
        }
        
        .container .box.box1:before,
        .container .box.box3:before,
        .container .box.box5:before {
            background-image: url("img/011-girl.png");
        }
        
        .container .box.box2:before,
        .container .box.box4:before,
        .container .box.box6:before {
            background-image: url("http://img.tukexw.com/img/d15e5645d5c69270.jpg");
        }
        
        .container .box:hover:before {
            content: "";
            height: 50px;
            width: 50px;
            border-radius: 50%;
            margin-left: 0%;
            transition: all 0.4s;
        }
        
        .container .box:hover {
            height: 120px;
            transition: all 0.3s;
        }
        
        .container .box:hover .name h5 {
            font-size: 1.2em;
            transition: all 0.6s;
        }
        
        * {
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }
    </style>

</head>

<body>

    <div class="rootDiv">
        <div class="windmill__sun"></div>
        <div class="container">
            <div class="box box5" href="http://172.16.71.247:28801/wkuploadfile.html">
                <div class="name">
                    <h4>根目录</h4>
                    <h5>版本10.1</h5>
                </div>
                <div class="attribute">
                </div>
            </div>
            <div class="box box4" href="http://172.16.71.247:28801/wkuploadfile.html">
                <div class="name">
                    <h4>上传文件</h4>
                    <h5></h5>
                </div>
                <div class="attribute">
                </div>
            </div>
            <div class="box box1" href="http://172.16.71.247:28801/wkuploadfile.html">
                <div class="name">
                    <h4>王家荣111111111111122.txt</h4>
                    <h5>1000MB</h5>

                </div>
                <div class="attribute">
                    <p>2018-12-26 16:10:13</p>
                    <a onclick="javascript:deleteFile('upload/1.png')" class="deleteBtn">删除</a>
                </div>
            </div>
            <div class="box box2">
                <div class="name">
                    <h4>Tap here</h4>
                    <h5>Hi</h5>
                </div>
                <div class="attribute">
                    <p>2018-12-26 16:10:13</p>
                    <a onclick="javascript:deleteFile('upload/1.png')" class="deleteBtn">删除</a>
                </div>
            </div>
            <div class="box box3">
                <div class="name">
                    <h4>Tap here</h4>
                    <h5>Bye</h5>
                </div>
                <div class="attribute">
                    <p>2018-12-21 16:10:13</p>
                    <a onclick="javascript:deleteFile('upload/1.png')" class="deleteBtn">删除</a>
                </div>
            </div>
            <div class="box box4">
                <div class="name">
                    <h4>Tap here</h4>
                    <h5>Bye!</h5>
                </div>
                <div class="attribute">
                    <p>2018-12-24 16:10:13</p>
                    <a onclick="javascript:deleteFile('upload/1.png')" class="deleteBtn">删除</a>
                </div>
            </div>

        </div>


        <table class="zebra">
            <thead>
                <tr>
                    <th>#</th>
                    <th>文件名</th>
                    <th>时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td style="width:30px">1</td>
                    <td><a href="wkdownload?path=upload">upload</a><br/>
                    </td>
                    <td style="width:180px">2018-12-29 14:59:27</td>
                    <td style="width:100px"><a href="wkdelete?path=upload">删除</a><br/>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>



    <div class="windmill__snowflake"></div>
    <div class="windmill__snowflake"></div>
    <div class="windmill__snowflake"></div>
    <div class="windmill__snowflake"></div>
    <div class="windmill__snowflake"></div>
    <div class="windmill__snowflake"></div>
    <div class="windmill__snowflake"></div>
    <div class="windmill__snowflake"></div>
    <div class="windmill__snowflake"></div>
    <div class="windmill__snowflake"></div>


</body>

</html>

 

小米渣的逆袭
关注
专栏目录
python雪花代码讲解_雪花算法的python实现与代码解读
weixin_42295859的博客
01-30 1438
雪花算法介绍雪花算法-Snowflake是Twitter提出来的一个算法，其目的是生成一个64bit的整数 1bit:一般是符号位，不做处理41bit:用来记录时间戳，这里可以记录69年，如果设置好起始时间比如今年是2018年，那么可以用到2089年，到时候怎么办？要是这个系统能用69年，我相信这个系统早都重构了好多次了。10bit:10bit用来记录机器ID，总共可以记录1024台机器，一般用前...
python雪花代码讲解-python基础教程：基于python实现雪花算法过程详解.pdf
06-13
python雪花代码讲解_python基础教程：基于python实现雪花 算法过程详解 这篇⽂章主要介绍了基于python实现雪花算法过程详解,⽂中通过⽰例代码介绍的⾮常详细，对⼤家的学习或者⼯作具有⼀定的参考学习价 值,需要的朋友可以参考下 Snowflake是Twitter提出来的⼀个算法，其⽬的是⽣成⼀个64bit的整数: 1bit:⼀般是符号位，不做处理 41bit:⽤来记录时间戳，这⾥可以记录69年，如果设置好起始时间⽐如今年是2018年，那么可以⽤到2089年，到时候怎么办？要是这个 系统能⽤69年，我相信这个系统早都重构了好多次了。 10bit:10bit⽤来记录机器ID，总共可以记录1024台机器，⼀般⽤前5位代表数据中⼼，后⾯5位是某个数据中⼼的机器ID 12bit:循环位，⽤来对同⼀个毫秒之内产⽣不同的ID，12位可以最多记录4095个，也就是在同⼀个机器同⼀毫秒最多记录4095个，多余 的需要进⾏等待下毫秒。 上⾯只是⼀个将64bit划分的标准，当然也不⼀定这么做，可以根据不同业务的具体场景来划分，⽐如下⾯给出⼀个业务场景： 服务⽬前QPS10万，预计⼏年之内会发
VB雪花代码VB雪花代码VB雪花代码
07-10
VB雪花代码 VB雪花代码 VB雪花代码 VB雪花代码VB雪花代码 VB雪花代码 VB雪花代码 VB雪花代码
java雪花代码_雪花算法-JAVA实现代码
weixin_39917090的博客
02-16 484
package demo;/*** 雪花算法demo* * Snowflake生成的是Long类型的ID，一个Long类型占8个字节，每个字节占8比特，也就是说一个Long类型占64个比特。* * Snowflake ID组成结构：正数位(占1比特)+ 时间戳(占41比特)+ 机器ID(占5比特)+* 数据中心(占5比特)+ 自增值(占12比特)，总共64...
干货| Python雪花代码
tingting11232的博客
10-27 1436
干货| Python雪花代码
分享两款雪花特效代码
laohuaichi5316的博客
01-11 3339
冬天到了，或者圣诞节到了，很多网站会用到雪花特效， 今天我就分享两款觉得比较好的雪花js特效代码给大家， 当然不是小弟原创的，得感谢原创作者的无私奉献 一、下雪特效代码① 该特效的雪花是有雪花的八角形状的 &nbsp; &lt;script type="text/javascript"&gt;(function($){ $.fn.snow = function...
京东两侧雪花片飘落代码（京东雪花代码）
12-08
京东两侧雪花片飘落代码（京东雪花代码)在京东后台建一个100%通栏自定义，复制进去就好。
flash雪花代码
05-19
flash雪花代码 flash雪花代码 flash雪花代码 flash雪花代码
Python漂浮雪花代码
02-17
Python漂浮雪花代码 雪花类  class Snow(): #雪花类  def __init__(self):  self.r = 6 #雪花的半径  self.x = ra.randint(-1000,1000) #雪花的横坐标  self.y = ra.randint(-500,500) #雪花的纵坐标  self.f ...
python雪花代码直接用
10-11
标题中的“python雪花代码直接用”意味着我们要讨论的是一个与Python编程语言相关的代码示例，这个示例可能是一个实现特定功能的小程序，就像冬日里的雪花一样独特且美丽。描述中的“python冬日恋歌，雪花代码直接用...
雪花绘制的源代码
06-10
对于雪花的绘制，主要就是计算那几个三等分点的坐标； 这里是用递归完成的。
js原生态雪花全屏飘落特效雪花飘落特效代码
03-20
js原生态雪花全屏飘落特效代码雪花飘落代码
js雪花特效
06-21
用js写的，雪花特效效果，课设，学习中均可使用，方便使用
VB桌面下雪小程序【源码】随风飘动的雪花
03-05
随风飘动的雪花 桌面下雪 精简源码
雪花程序
09-26
该程序可以实现雪花在桌面飘。
c语言雪花程序输出,急用C语言的雪花代码 请高手指教谢谢了~~！
weixin_42353805的博客
05-18 1368
#include #include #include#includeconst int ScrnWidth=1024;const int ScrnHight=768;const long SnowCol =0xFEFFFE;const long SnowColDown =0xFFFFFF;const long SnowColDuck =0xFFDDDD;const int SnowNum = 50...
Python雪花代码
墨柒子
03-17 846
以下是一个简单的Python代码示例，可以生成一个雪花形状。
雪花❄代码，纯HTML，复制粘贴即可使用。
weixin_64559564的博客
01-23 586
纯手工HTML原创代码，复制粘贴即可使用
MATLAB雪花代码
最新发布
09-25
MATLAB雪花代码通常是指利用MATLAB语言创造出的一种美观且有趣的图形效果，模仿雪景中的雪花形状。这种代码通过控制点的位置、大小、旋转等参数，生成动态的、随机分布的“雪花”图案。常见的雪花代码会使用循环结构...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值