前端下载文件

这篇博客介绍了一个前端实现的悬浮窗功能,通过JavaScript动态创建元素并设置样式。悬浮窗包含一个工作提示和两个按钮,一个是'重要通知'用于关闭悬浮窗,另一个是'前往查看',点击后可以下载名为'党风监督工作信息填报说明.doc'的文件。悬浮窗还具有动态移动效果,并在鼠标悬停和移开时控制定时器启动和停止。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

//悬浮窗gzgzgzggzgzgzgzggzgzgzgzgzgzgzg

    

             window.onload=function(){

                 //写

                 var oneInner = document.createElement_x("div");

                 oneInner.setAttribute("style", "background:#FDECEA;position:absolute;width:200px;height:100px;cursor:pointer;");

//加入字体

                 var node = document.createElement_x("p");

                 node.setAttribute("style", "margin-top:30px; font-size: 15px;");

              

     

                 var node1 = document.createTextNode("工作提示:党风监督工作信息填报说明");

                 

                 oneInner.appendChild(node);

                 node.appendChild(node1);

 

//下载按钮

/////////////////////////////////

                 var oneButton1 = document.createElement_x("input");

                 oneButton1.setAttribute("type", "button");

 

                 oneButton1.setAttribute("style", "position:absolute ; bottom:0;right:0;color:blue");

                 oneButton1.setAttribute("value", "前往查看");

                 node.appendChild(oneButton1);

//////////////////////////////////

 

 

                 var oneButton = document.createElement_x("input");

                 oneButton.setAttribute("type", "button");

 

                 oneButton.setAttribute("style", "position:absolute ;background:#CC0001 ; top:0;right:0;left:0;font-size: 21px;font-weight: bold;color:white");

                 oneButton.setAttribute("value"," 重要通知         关闭");

 

 

                 if (oneButton.style.cssFloat)

                 {

                     oneButton.style.cssFloat = "right"

                 }

                 else

                 { oneButton.style.styleFloat = "right" }

                 oneInner.appendChild(oneButton);

                 document.body.appendChild(oneInner);

 

                 //定时器

                 var a1a = setInterval(moves,150);

                 //函数

 

                 var x = 10;

                 var y = 10;

 

                 function moves(){

                     var tops = oneInner.offsetTop

                     var lefts = oneInner.offsetLeft

                     var rights = oneInner.offsetRight

 

 

                     if (lefts >= document.documentElement.clientWidth - oneInner.offsetWidth || lefts<0)

                     {

                         x=-x

                     }

 

                     if (tops >= document.documentElement.clientHeight - oneInner.offsetHeight || tops < 0)

                     {

                         y=-y

                     }

 

                     tops+=y;

                     lefts+=x;

 

                     oneInner.style.top=tops+"px"

                     oneInner.style.left=lefts+"px"

                 }

 

                 //悬停停止

                 oneInner.onmouseover=function(){

                     clearInterval(a1a);

                 }

                 //放手继续运动

                 oneInner.onmouseout=function(){

                     a1a =setInterval(moves,150);

                 }

                 //删除

                 oneButton.onclick=function(){

                     document.body.removeChild(oneInner);

                 }

            

        //跳转下载

             oneButton1.onclick=function(){

                 //文档路径

                 window.open("党风监督工作信息填报说明.doc");

             }

 

             }

 

       下载

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值