HTML JS文字闪烁实现(项目top.htm分析)

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 2 <!-- saved from url=(0033)https://192.168.1.2/topframe6.htm -->
 3 <HTML><HEAD><TITLE>topframe</TITLE>
 4 <META http-equiv=Content-Type content="text/html; charset=utf-8">
 5 <link href="css/base.css" rel="stylesheet" type="text/css">
 6
 7 <SCRIPT language=JavaScript>
 8 var currentid = "c1";
 9 function openurl2(newid, url1, url2)
10 {
11     document.getElementById(currentid).className = "";
12     document.getElementById(newid).className = "current";
13     currentid = newid;
14
15     window.parent.document.getElementById("menu").src = url1;
16     window.parent.document.getElementById("content").src = url2;
17 }
18
19 function myrefresh()
20 {
21     window.parent.frames["topframe"].location.reload();
22 }
23 setTimeout(‘myrefresh()‘,600000);
24
25 function blink (err_id) {
26     var code = ‘‘;
27     var speed = 500;
28
29     code += ‘var el = document.getElementById("‘ + err_id + ‘");‘;
30     code += ‘el.style.visibility = ‘ + ‘el.style.visibility == "hidden" ? "visible" : "hidden"‘;
31
32     var interval=setInterval(code,speed);
33     var desc_id=document.getElementById("desc_err");
34     desc_id.onmouseover=function(){clearInterval(interval)}
35     desc_id.onmouseout=function(){interval=setInterval(code,speed)}
36 }
37 function stateOnload() {
38     blink(‘desc_err‘);
39 }
40 </SCRIPT>
41 </HEAD>
42
43 <BODY ONLOAD="stateOnload()" style="padding:0px">
44 <div id="top">
45 <div id="logo"></div>
46 <div>
47    <div id="list">
48      <UL>
49        <LI id=c1 class=current>
50       <A href="javascript:openurl2(‘c1‘, ‘/View/menu‘, ‘/undefined‘)">查看</A>
51        </LI>
52        <LI id=c2><A href="javascript:openurl2(‘c2‘, ‘/Manage/menu‘, ‘/undefined‘)">管理</A></LI>
53        <LI id=c3><A href="javascript:openurl2(‘c3‘, ‘/Maintain/menu‘, ‘/undefined‘)">维护</A></LI>
54      </UL>
55    </div>
56    {% module Workstate() %}    //<div id="desc_err"><A href="javascript:openurl2(\‘c1\‘, \‘/View/menu\‘, \‘/View/faultyinfo\‘)">工作故障</A></div>
57 </div>
58 </div>
59
60 </BODY>
61 </HTML>

上述代码说明:

1.function myrefresh():实现定时刷新top.htm页面

window.parent.frames["topframe"].location.reload();

2.function blink (err_id):实现字体闪烁

desc_id.onmouseover=function(){clearInterval(interval)}                --鼠标位于字体上时,停止闪烁,以便点击进行超链接

desc_id.onmouseout=function(){interval=setInterval(code,speed)}  --鼠标离开字体上时,继续闪烁

3.代码第56行{% module Workstate() %}

实际代码为:<div id="desc_err"><A href="javascript:openurl2(\‘c1\‘, \‘/View/menu\‘, \‘/View/faultyinfo\‘)">工作故障</A></div>

当点击字体之后连接到/View/faultyinfo,通过JS函数function openurl2(newid, url1, url2)将整个页面的几个框架(FRAME)分别进行链接

4.setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

提示:setTimeout() 只执行 code 一次。如果要多次调用,请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。

简单示例:

 1 <html>
 2 <head>
 3 <script type="text/javascript">
 4 var c=0
 5 var t
 6 function timedCount()
 7 {
 8 document.getElementById(‘txt‘).value=c
 9 c=c+1
10 t=setTimeout("timedCount()",1000)
11 }
12 </script>
13 </head>
14
15 <body>
16 <form>
17 <input type="button" value="开始计时!" onClick="timedCount()">
18 <input type="text" id="txt">
19 </form>
20 <p>请点击上面的按钮。输入框会从 0 开始一直进行计时。</p>
21 </body>
22
23 </html>

5.setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。

setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

简单示例:

 1 <html>
 2 <body>
 3
 4 <input type="text" id="clock" size="35" />
 5 <script language=javascript>
 6 var int=self.setInterval("clock()",50)
 7 function clock()
 8   {
 9   var t=new Date()
10   document.getElementById("clock").value=t
11   }
12 </script>
13 <button onclick="int=window.clearInterval(int)">Stop interval</button>
14
15 </body>
16 </html>

PS:

起初实现文字闪烁代码如下:

 1 function blink (elId) {
 2     var html = ‘‘;
 3     if (document.all)
 4         html += ‘var el = document.all.‘ + elId + ‘;‘;
 5     else if (document.getElementById)
 6         html += ‘var el = document.getElementById("‘ + elId + ‘");‘;
 7     html += ‘el.style.visibility = ‘ + ‘el.style.visibility == "hidden" ? "visible" : "hidden"‘;
 8     if (document.all || document.getElementById)
 9         setInterval(html, 500)
10 }

1.document.all是页面内所有元素的一个集合。例如:document.all(0)表示页面内第一个元素

2.document.all可以判断浏览器是否是IE  
  if(document.all){  
    alert("is   IE!");  
  }

3.可以通过给某个元素设置id属性(id=aaaa),然后用document.all.aaaa调用该元素

综上:

  当在IE浏览器执行时进入 :if (document.all)

  当在其他浏览器执行时进入:else if (document.getElementById)

这里舍弃document.all,直接使用document.getElementById

HTML JS文字闪烁实现(项目top.htm分析),布布扣,bubuko.com

时间: 2024-11-03 22:32:21

HTML JS文字闪烁实现(项目top.htm分析)的相关文章

js文字颜色闪烁

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

js中window.self,window.top,window.parent,window.opener

在js中window.self,window.top,window.parent,window.opener四个的作用区别还是很大的, window.self,window.top是打开模式, 而window.parent,window.opener是父窗口打开模式,下面我来介绍介绍. =============================================================== 在应用有frameset或者iframe的页面时, parent是父窗口, top是

文字闪烁代码

JavaScript文字闪烁代码,老生长谈的话题了,今天无意闲暇,亲自一试,喝不好,但凑合,有需要的可拿出自己修改完善.本例用CSS和JS配合完成. <title>文字闪烁</title> <style type="text/css"> .changecolor0{color:#f00;} .changecolor1{color:#0f0;} .changecolor2{color:#00f;} .changecolor3{color:#f0f;}

利用JS实现闪烁字体

以下为在JSP文件中,利用JS实现闪烁字体的代码: HTML代码: 1 <div id="blink">一段会闪烁的字</div> JavaScript代码: 1 <script type="text/javascript"> 2 function changeColor() { 3 var color="#f00|#0f0|#00f|#880|#808|#088|yellow|green|blue|gray"

.NET开源项目 TOP 25

.NET开源项目 TOP 25 如果知道.NET项目在开源中国的git上所占的比重只有5%的话,为什么这个<2014年国人开发的最热门的开源软件TOP 100>榜中.NET项目那么少就是情理之中了. 进入看了一下,发现还是有很多好的C#项目的. 1 奎宇工作室 / DotNetCodes C# 一些常用的功能性代码,可以减少许多开发时间,而且类与类之间没有什么依赖,每个类都可以单独拿出来使用 2 beyonehu / manual_dota C# <刀塔传奇>开源项目,服务器+客户

不一样的文字闪烁,轮番闪烁

这是一个文字闪烁效果,不同的是它是由两组文字组成 ,在闪烁的过程中可以重复切换,代码中的speed指定字体闪烁的频率,可以把引号内的内容换成你想要的文字,要记住一定要在body中加上onload语句,否则会无效哦. <title>石家庄水泵厂</title> <SCRIPT> var speed=300; function m() { whattext.innerText="我来自太阳系地球" setTimeout("e()",s

像歌词跟着声音走的JS文字效果

一个比较不错的文字显示特效,像MTV的歌词显示一样跟着演唱者慢慢逐个清淅显示,这段特效代码就实现了和这个功能差不多,而且JS代码非常少,兼容性好,点击运行看看效果吧! <html> <head> <title>石家庄花卉</title> </head> <body> <script language="JavaScript"> var message="像歌词显示一样JS文字效果!"

js:深入prototype(上:内存分析)

/** * 以下演示了通过原型的创建方式,使用基于原型的创建可以将属性和方法 * 设置为Person专有的,不能通过window来调用. * 原型是javascript中的一个特殊对象,当一个函数创建之后,会随之就产生一个原型对象 * 当通过这个这个函数的构造函数创建了一个具体的对象之后,在这个具体的对象中,就会有一个属性指向原型 */ //第一种状态 function Person(){                        } //第二种状态 Person.prototype.nam

对团队项目的意见和项目需求的分析

     一个软件团队是否能开发出好的软件项目,关键一点就是是否能把握好对项目需求的分析.软件团队如何才能准确而全面的找到这些需求呢?主要有以下几个步骤.     1.获取和引导需求:软件团队需要设身处地,替用户着想,引导出需求.有的需求在时间之前,并没有用户明确表达具体的需求,但是成功的团队可以从成功挖掘出用户的需求. 除此之外,软件团队可以分析技术的发展趋势以及产业的变化.社会发展的大趋势,推测用户会产生新的需求.并且,需求不仅来自于外界,还可以来自于软件企业本身,或者技术团队本身技术性的要