`
870058848
  • 浏览: 23765 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

JavaScript特效一:每隔一段时间提示信息

阅读更多
<html>
<head>
<title>This is a test</title>


<script>       
  var oPopup;      
  var popTop=50;      
  var mytime;      
  function closemsg(){      
   try{      
    clearTimeout(mytime);      
   }catch(e){}      
   oPopup.hide();      
  }      
        
  function popshow(){      
   //window.status=popTop;      
   if(popTop>1160){      
    closemsg();      
    return;      
   }      
   if(popTop>1040&&popTop<1160){      
    oPopup.show(screen.width-195,screen.height,250,1160-popTop);      
   }      
   if(popTop>1000&&popTop<1040){      
    oPopup.show(screen.width-195,screen.height+(popTop-1160),250,116);      
   }      
   if(popTop<120){      
    oPopup.show(screen.width-195,screen.height,250,popTop);      
   }      
   if(popTop<160){      
    oPopup.show(screen.width-195,screen.height-popTop,250,116);      
   }      
   popTop+=10;      
   mytime=setTimeout("popshow();",100);      
  }      
        
  function popmsg(msgnum,msgstr){      
   oPopup = window.createPopup();      
   var winstr='<table style="border-top: #FFFFFF 1px solid; border-left: #FFFFFF 1px solid" cellSpacing=0 cellPadding=0 width="100%" bgcolor=#cfdef4 border=0>';      
   winstr   +='  <tr>';      
   winstr   +='   <td style="font-size: 12px; background-image: url(msgTopBg.gif); color: #0f2c8c" width=30 height=24></td>';      
   winstr   +='   <td style="font-weight: normal; font-size: 12px; background-image: url(msgTopBg.gif); color: #1f336b; padding-top: 4px;padding-left: 4px" valign=center width="100%"> 管理平台消息提示:</td>';      
   winstr   +='   <td style="background-image: url(msgTopBg.gif); padding-top: 2px;padding-right:2px" valign=center align=right width=19><span title=关闭 style="cursor: hand;color:red;font-size:12px;font-weight:bold;margin-right:4px;" onclick="window.parent.closemsg();">×</span></td>';      
   winstr   +='  </tr>';      
   winstr   +='  <tr>';      
   winstr   +='   <td style="padding-right: 1px; background-image: url(1msgBottomBg.jpg); padding-bottom: 1px" colSpan=3 height=90>';      
   winstr   +='    <div style="border-right: #b9c9ef 1px solid; padding-right: 13px; border-top: #728eb8 1px solid; padding-left: 13px; font-size: 12px; padding-bottom: 13px; border-left: #728eb8 1px solid; width: 100%; color: #1f336b; padding-top: 6px; border-bottom: #b9c9ef 1px solid; height: 100%">'      
   winstr   +='                    您有<font color=#FF0000>'+msgnum+'</font>条新短消息<br><br>';      
   winstr   +='           <div align=center style="word-break:break-all">';      
   winstr   +=msgstr;      
   winstr   +='     </div>';      
   winstr   +='    </div>';      
   winstr   +='   </td>';      
   winstr   +='  </tr>';      
   winstr   +='</table>';      
          
   oPopup.document.body.innerHTML = winstr;      
   popshow();      
  }      
  <!--上面是定议,下面是调用-->     
  popmsg(1,'msg');      
</script>    
</head>
<body></body>
</html>
分享到:
评论

相关推荐

    javascript经典特效---变换的信息提示条.rar

    例如,我们想每隔一段时间自动更换提示条的内容,可以这样做: ```javascript function changeInfo() { var messages = ['消息1', '消息2', '消息3']; var index = 0; setInterval(function() { infoBar....

    JavaScript经典效果集锦

    - **状态栏消息显示**:使用`window.setTimeout`和`self.status`来每隔一段时间更新状态栏的消息。 - **关闭窗口**:通过`&lt;a href=javascript:close()&gt;[关闭]&lt;/a&gt;`链接来关闭当前窗口。 - **按键监听**:监听F12键的...

    javascript语句特效

    例如,用它们来创建计时器,每隔一段时间自动更新页面的一部分。 4. **函数**:`function` 用于封装可重用的代码块。通过定义函数,你可以将复杂的特效分解为可管理的部分,提高代码的可读性和维护性。 5. **事件...

    各种JS特效汇总

    可以设置一个定时器,每隔一段时间自动更换图片,或者根据用户行为(如滚动、点击等)触发图片切换。 4. **页面loading效果**: 页面加载时的加载动画能够提升用户体验,让用户知道页面正在加载。这通常通过...

    jquery时间倒计时特效.rar

    利用JavaScript的`setInterval`函数,我们可以每隔一定时间(例如1秒)执行一段代码。在这段代码中,我们将重新计算当前时间与目标时间的差值,并更新显示的倒计时。记得在倒计时结束时清除定时器,防止不必要的...

    常用的js特效

    例如,可以使用`setInterval`函数创建一个定时器,每隔一段时间就改变图片的显示,同时添加过渡效果以提升视觉体验。 2. 文字滚动:文字滚动特效多用于展示新闻更新、公告或者长文本,使得有限的页面空间能展示更多...

    JS实现下载次数倒数特效实例源码

    - JavaScript定时器:主要利用`setInterval()`函数,它可以按照指定的时间间隔重复执行一段代码。在这个实例中,定时器会被用来每隔一定时间减少下载次数。 - DOM操作:JavaScript通过DOM(Document Object Model...

    100、js多排图片自动滚动特效

    JavaScript的`setInterval`或`setTimeout`函数常用于创建定时任务,比如设定每隔一段时间自动切换图片。而通过修改元素的CSS属性,例如改变其left或top值,可以实现平滑的滚动动画效果。 **响应式设计** 为了适应...

    html5特效精华

    - 使用`setInterval`函数每隔一段时间重新绘制整个场景,确保动画的流畅性。 - `draw()`函数中,首先清除整个画布,然后重新绘制风车的每一部分,包括柄和四个叶片。 - 利用三角函数计算每个叶片的位置,通过调整...

    JS鼠标特效 非同凡响

    用户在访问页面时会看到一个提示信息,告知其将在几秒后自动跳转到指定的URL地址。这种功能常见于网站的跳转页面或者活动页面中,用于提高用户体验或增加页面趣味性。 #### 2. JavaScript代码详解 - **变量声明**:...

    网页特效源代码会让你的网页绚丽

    1. **定时更新状态栏文本**:利用`window.setTimeout()`函数每隔一段时间更新一次状态栏中的文本,通常使用JavaScript获取当前时间,并将其设置为状态栏文本。 ### 知识点五:关闭窗口 #### 实现方法: 1. **提供...

    一个“网页加载中”的特效代码 - 4ngel's blog - Powered by Sablog-X

    这里的`20`表示每隔20毫秒执行一次`animate`函数。`animate`函数负责更新进度条的样式: ```javascript function animate() { var elem = document.getElementById('progress'); if (elem != null) { if (pos ==...

    韩国购物网商品展示效果.rar

    - **自动播放**:设置定时器让图片每隔一段时间自动切换,增加动态感。 - **过渡效果**:添加平滑的动画效果,如淡入淡出、滑动等,提高视觉吸引力。 - **导航指示**:显示当前展示图片的索引,让用户了解轮播...

    JavaScript+html5 canvas实现图片破碎重组动画特效

    主要JavaScript函数`init()`用于初始化视频和canvas对象,设置定时器每隔一定时间(例如每33毫秒)就调用`processFrame()`函数来处理动画帧。`createTiles()`函数用于初始化图片或视频的瓦片化处理,创建小块(瓦片...

    短信提示使用 特效

    这段代码是用于实现一个网页上的短信提示特效。它利用JavaScript语言来动态地调整一个ID为"eMeng"的元素(可能是div或者其他HTML元素)的位置和可见性,以模拟一个从底部滑入屏幕的短信通知效果。这个效果通常用于...

    js结合css3倒计时三秒动画特效

    JavaScript可以获取当前时间,通过与目标时间比较计算出剩余时间,并每隔一定间隔(如100毫秒)更新界面。以下是一个简单的示例: ```javascript function startCountdown(endTime) { var countdownElement = ...

    仿QQ消息弹出广告效果.rar

    例如,我们可以设定广告每隔一段时间自动弹出,用户点击关闭后则停止显示。同时,为了增加用户体验,可以添加过渡效果,如淡入淡出,这可以通过CSS3的`transition`属性实现。 此外,为了防止广告过于频繁或打扰用户...

    js+css3顶部横幅提示特效

    例如,横幅可能会从顶部滑入,然后在一段时间后滑出。 7. **响应式设计**:考虑到现代网页需要适应不同设备的屏幕尺寸,横幅提示特效也需要考虑响应式设计。通过CSS3的媒体查询(`media queries`),我们可以确保...

    JavaScript与jQuery实现的闪烁输入效果

    3. 使用`setInterval`函数设置一个定时器,定时器每隔一段时间执行一次。 4. 在定时器的回调函数中,逐个字符地向目标元素的`innerHTML`添加内容。 5. 对于特殊字符`,需要正确处理其后的`&gt;`字符,以保证HTML的正确...

    CSS3电影播放倒计时读秒特效

    1. `setInterval`:定时器函数,每隔一定时间执行指定的函数,适用于倒计时更新。 2. `Date对象`:JavaScript内置的日期对象,用于获取当前时间并进行时间差计算。 3. `innerHTML`:用于设置或获取HTML元素内部的...

Global site tag (gtag.js) - Google Analytics