分享JavaScript精彩网页特效实例，素材，有需要代码的可以拿来参考一下 - JavaScript论坛

| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛 |

编程论坛 → WEB开发 → 『 JavaScript论坛』 → 分享JavaScript精彩网页特效实例，素材，有需要代码的可以拿来参考一下

我的收件箱(0)

欢迎加入我们，一同切磋技术

共有 4736 人关注过本帖， 2 人收藏

标题：分享JavaScript精彩网页特效实例，素材，有需要代码的可以拿来参考一下

取消只看楼主加入收藏

love云彩

来　自：青藏高原
等　级：贵宾
威　望：53
帖　子：3663
专家分：11416
注　册：2012-11-17

第 21 楼

得分:0

23、认证等待效果。

程序代码：

<script language="JavaScript">
<!--

function doclick(){
window.nr.style.display = "block";
}


//-->
</script>

<form method="POST" action="">

        <table cellSpacing=0 cellPadding=0 width=300 align=center border=0>
            <tr>
                <td height=25>&nbsp;&nbsp;&nbsp;&nbsp;用户标识：<input type="text" name="name" size="22"></td>
            </tr>
            <tr>
                <td height=25>&nbsp;&nbsp;&nbsp;&nbsp;用户口令：<input type="password" name="pwd" size="22"></td>
            </tr>
            <tr>
                <td height=25 align=center><input type="button" value=" 确定 " onclick="javascript:doclick();" name="B1">&nbsp;&nbsp;&nbsp;<input type="reset" value=" 重新填写 " onclick="javascript:doclick();" name="B1"></td>
            </tr>
            <tr>
                <td height=35>
                                      <table id=nr style="DISPLAY:none" align=center width=180 border=0 cellSpacing=0 cellPadding=0>
                                <tr>
                                    <td width=5 height=12><img src="lp.gif" border=0></td>
                                    <td align=center background="mp.gif"><font style="font-size: 9pt;" color="#ffffff"><marquee direction="right" scrollamount=7 width=180><img src="bar.gif" border=0></marquee></font></td>
                                    <td width=4><img src="rp.gif" border=0></td>
                                </tr>
                            </table>                  

                </td>
            </tr>       

        </table>
    </form>

思考赐予新生，时间在于定义

2013-08-17 00:46

love云彩

来　自：青藏高原
等　级：贵宾
威　望：53
帖　子：3663
专家分：11416
注　册：2012-11-17

第 22 楼

得分:0

24、文本加密解密效果。

程序代码：

<SCRIPT language=JavaScript>
<!--
var Words;
function SetWords(word)
{
Words = word.value;                 

}

function SetNewWords(form)       

{
var NewWords;
NewWords = unescape(Words);         

form.NewWords.value = NewWords;      

}
function SetNewWords1(form)     

{
var NewWords;
NewWords = escape(Words);           

form.NewWords.value = NewWords;

}
// -->
</SCRIPT>
<body>
<table align=center>
<TR>
<form method=post>
<TD align=center>

<P><textarea cols=65 name=Word onchange=SetWords(this) rows=5></textarea></P>

<P><input name=uncode onclick=SetNewWords(this.form) type=button value="解密">
<input name=encode onclick=SetNewWords1(this.form) type=button value="加密">
</P>
<P><textarea cols=65 name=NewWords rows=5></textarea></P>
</form>
</td>
</tr>
</table>
</body>

思考赐予新生，时间在于定义

2013-08-17 00:46

love云彩

来　自：青藏高原
等　级：贵宾
威　望：53
帖　子：3663
专家分：11416
注　册：2012-11-17

第 23 楼

得分:0

25、密码保护效果。

程序代码：

<script language="JavaScript">
<!--
function checkpass(){
if((document.form1.username.value == "zt")&&((document.form1.pwd.value>>2) == "27777"))
{
    alert("验证成功！")
    return true
}
else{
    alert("您输入的用户名或密码错误，请重新输入！")
    return false
}
}
//-->
</script>
</head>
<body>
<form name="form1" method="post">
姓名：<input name="username" type="text"><br>
密码：<input name="pwd" type="password"><br>
<input type="button" name="submit" value="确定" onclick="checkpass()"><br><br>注意：密码设定需要是0-9的数字
</form>
</body>

思考赐予新生，时间在于定义

2013-08-17 00:47

love云彩

来　自：青藏高原
等　级：贵宾
威　望：53
帖　子：3663
专家分：11416
注　册：2012-11-17

第 24 楼

得分:0

26、评估密码强度效果。

程序代码：

<script language=javascript>
<!--
function Charstring(iN){             

if (iN>=48 && iN <=57)               

return 1;

if (iN>=65 && iN <=90)             

return 2;
if (iN>=97 && iN <=122)            

return 4;
else
return 8;        

}

function modetotal(num){     

modes=0;
for (i=0;i<4;i++){
if (num & 1)

    modes++;
    num>>>=1;
}
return modes;
}

function checkpwd(spwd){  

if (spwd.length<=4)
return 0;                        

Modes=0;
for (i=0;i<spwd.length;i++){        

    Modes|=Charstring(spwd.charCodeAt(i));
}
return modetotal(Modes);
}


function pwdstrong(pwd){      

O_color="#cccccc";             

L_color="#ffff00";              

M_color="#DC440F";               

H_color="#FF0000";                 

if (pwd==null||pwd==''){            

    Lcolor=Mcolor=Hcolor=O_color;  

}

else{
    S_level=checkpwd(pwd);       

    switch(S_level) {
    case 0:
        Lcolor=Mcolor=Hcolor=O_color; 

    case 1:
        Lcolor=L_color;
        Mcolor=Hcolor=O_color;          

        break;
    case 2:
        Lcolor=Mcolor=M_color;
        Hcolor=O_color;          

        break;
    default:
    Lcolor=Mcolor=Hcolor=H_color;
}
}

document.getElementById("pwd_L").style.background=Lcolor;   

document.getElementById("pwd_M").style.background=Mcolor;

document.getElementById("pwd_H").style.background=Hcolor;

return;
}
//-->
</script>

<form>
输入密码:<input type=password size=30 onKeyUp=pwdstrong(this.value) onBlur=pwdstrong(this.value)>
<br>密码强度:
<table border=1 cellspacing=0 cellpadding=1 bordercolor=#cccccc height=22 style='display:inline'>
    <tr align="center" bgcolor="#eeeeee">

        <td width=40 id="pwd_L">弱</td>
        <td width=40 id="pwd_M">中</td>
        <td width=40 id="pwd_H">强</td>
    </tr>
</table>
</form>

思考赐予新生，时间在于定义

2013-08-17 00:48

love云彩

来　自：青藏高原
等　级：贵宾
威　望：53
帖　子：3663
专家分：11416
注　册：2012-11-17

第 25 楼

得分:0

27、单选题测试效果。

程序代码：

<script language="JavaScript">
<!--
var Total_Question = 4   

var msg = ""
var Solution = new Array(Total_Question) 

function GetSelectedButton(ButtonGroup)     

{
  for (var x=0; x < ButtonGroup.length; x++)
    if (ButtonGroup[x].checked) return x
  return 0
}


function ReportScore(correct)
{

  var SecWin = window.open("","scorewin","scrollbars,width=300,height=220")
  var MustHave1 = "<HTML><HEAD><TITLE>测验成绩报告</TITLE></HEAD><BODY>"
  var Percent = "<H2>测验成绩 : "+Math.round(correct/Total_Question*100)+ "</H2><HR>"    

  lastscore=Math.round(correct/Total_Question*100)    

  if (lastscore == "100"){                    

      msg = MustHave1 +Percent + "<font color='red'>恭喜，全部答对了！</font><p>" + msg  + "<input type='button' value='close' onclick=javascript:window.close()></BODY></HTML>"}
  else {
      msg = MustHave1 +Percent + "<font color='red'>正确答案：</font><p>" + msg  + "<input type='button' value='close' onclick=javascript:window.close()></BODY></HTML>"
} 

  SecWin.document.write(msg)

  msg = ""                   

}

function Grade()
{
  var correct = 0          

  var wrong = 0
  for (number=0; number < Total_Question; number++)    

    {
      var form = document.forms[number]  

      var i = GetSelectedButton(form.q1) 

      if (form.q1[i].value == "1")
     { correct++ }

    else

     { wrong++
       msg += "Question "+(number+1)+"."
          +"错误"+"<BR>"
     }
    }
    ReportScore(correct)
}

//-->
</script>
         

</head>
<body>
<table width="75%" border="0" align="center">
  <tr>
    <td>
      <form>
四个非常简单的问题：<p>
(1)Internet上使用的网络协议是：__________
<br>
<input type="radio" name="q1" value="0" checked>X.25
<input type="radio" name="q1" value="1">TCP/IP
<input type="radio" name="q1" value="0">NetBEUI
<br><br> </form>

<form>
(2)HUB是指：__________
<br>
<input type="radio" name="q1" value="0" checked>网桥
<input type="radio" name="q1" value="1">集线器
<input type="radio" name="q1" value="0">网关
<input type="radio" name="q1" value="0">路由器
<br><Br> </form>

<form>
(3)JAVA是哪个公司的产品：__________
<br>
<input type="radio" name="q1" value="0" checked>Novell
<input type="radio" name="q1" value="0">Microsoft
<input type="radio" name="q1" value="1">SUN
<br><Br> </form>

<form>
(4)IIS(Internet Information Server)是哪个公司的产品：__________
<br>
<input type="radio" name="q1" value="0" checked>Novell
<input type="radio" name="q1" value="1">Microsoft
<input type="radio" name="q1" value="0">Netscape
<br><Br> </form>

<form>
<p align="center">
   <input type="button" name="Submit" value="查看成绩" onClick="Grade()">
</p>
</form>
    </td>
  </tr>
</table>
</body>
</html>

思考赐予新生，时间在于定义

2013-08-17 00:49

love云彩

来　自：青藏高原
等　级：贵宾
威　望：53
帖　子：3663
专家分：11416
注　册：2012-11-17

第 26 楼

得分:0

28、多选题测试效果。

程序代码：

<script language="javascript">
<!--
function getresultcheck(form,score_per_problem,show)
{var mykeys=new Array();      

mykeys[0]="ABD";
mykeys[1]="ABCD";
mykeys[2]="ABC";
var score=new Array();
var totalscore=0;
var flag=1;
var answer=new Array();
for(var i=0;i<mykeys.length;i++) answer[i]="";

var every=form.elements;
var lastname="";
for(var i=0;i<every.length;i++)      

{
    if(every[i].checked)        

    {   

        var item=parseInt(every[i].name.substr(1,1));
        answer[item-1]+=every[i].value;  

    }
}
for(var i=0;i<answer.length;i++)        

{
    if(answer[i]=="") answer[i]="未答";   

}
var message="<html><head><title>测试结果</title></head>";
message+="<body><div align=center class=p2><center><font color=red><h2>测试结果</h2></font><br>";
var returnvalue="<table width=360 border=1  class=e1 vspace=0 hspace=0 cellspacing=0><tr align=center valign=center><th>题号</th><th>正确答案</th><th>您的答案</th><th>得分</th></tr>";
for(var i=0;i<answer.length;i++)
{
       

    if(answer[i]==mykeys[i])           

    {
        score[i]=score_per_problem; 

        totalscore+=score[i];       

    }else
    {
        flag=0;    

        score[i]=0;  

    }
    var temp="<tr align=center valign=center><td>"+(i+1)+"</td><td>"+mykeys[i]+"</td><td>"+answer[i]+"</td><td><font color=red>"+score[i]+"</font></td></tr>";
    returnvalue+=temp
}
returnvalue+="<tr align=center valign=center><td colspan=2>您本题的得分</td><td colspan=2><font size=+1 color=red><b>";
returnvalue+=totalscore;
returnvalue+="</font></b></td></tr></table>";
message+=returnvalue;
if(flag==1) message+="<br><h2>恭喜您！您的答案完全正确！</h2>";
message+="<a href='javascript:close()'>关闭窗口</a></center></div></body></html>";
newwin=window.open("","","height=300,width=400,scrollbars=yes,top=0,left=0,x=0,y=0");  

newwin.document.write(message);      

}
function getanswers(){
window.alert("参考答案 1.ABD 2.ABCD 3.ABC ")

}
//-->
</script>

<BODY>
<form>
1.计算机病毒的主要传播途径有______<br>
<input type=checkbox name=c1 value=A>A.光盘和软盘  <br>
<input type=checkbox name=c1 value=B>B.OICQ和BBS    <br> 

<input type=checkbox name=c1 value=C>C.网络浏览            <br> 

<input type=checkbox name=c1 value=D>D.电子邮件和网络<p>

<p> 

2.被感染病毒后，计算机可能出现的异常现象或症状有______<br> 

<input type=checkbox name=c2 value=A>A.计算机系统出现异常死机或死机频繁<br> 

<input type=checkbox name=c2 value=B>B.系统被非法远程控制 <br> 

<input type=checkbox name=c2 value=C>C.文件的内容和文件属性无故改变<br> 

<input type=checkbox name=c2 value=D>D.自动发送邮件<p> 

3.下列病毒发作时，能够破坏硬盘数据的有______<br> 

<input type=checkbox name=c3 value=A>A.求职信 <br> 

<input type=checkbox name=c3 value=B>B.SirCam <br> 

<input type=checkbox name=c3 value=C>C.CIH  <br> 

<input type=checkbox name=c3 value=D>D.Sulfnbk<p>
<hr width="60%">
<center>
<input type=button value=提交 onclick="getresultcheck(this.form,6,1)">&nbsp;&nbsp;&nbsp; 

<input type=reset value=重做>&nbsp;&nbsp;&nbsp; 

<input type=button value=答案 onclick="getanswers()"> 

</center> 

</form> 

</BODY>

思考赐予新生，时间在于定义

2013-08-17 00:50

love云彩

来　自：青藏高原
等　级：贵宾
威　望：53
帖　子：3663
专家分：11416
注　册：2012-11-17

第 27 楼

得分:0

29、打字速度测试效果。

程序代码：

<SCRIPT LANGUAGE="JavaScript">

<!--
msg = new Array("Practicing with your typing can greatly help your overall computer skills.",

"A new computer is sold in the US every hour!",

"When do birds migrate from North to South?",

"Perplexing phrases, like this one, are tougher to type.")        


word = 10


function s() {                                                 

msg = new Array("Computers are the medium of the future.",

"Can you type this phrase rather quickly?",

"Who is the President of the US?",

"I believe that you can type well!")

word = 7

}


function m() {                                                  

msg = new Array("Practicing with your typing can greatly help your overall computer skills.",

"A new computer is sold in the US every hour!",

"When do birds migrate from North to South?",

"Perplexing phrases, like this one, are tough to type.")

word = 10

}

function e() {                                               

msg = new Array("If you can correctly, and quickly, type this perplexing sentence, you are one superb typist!",

"You are one superb typist if you can correctly, and quickly, type this long phrase.",

"I believe you're a good typist, so I believe you will correctly copy this statement!",

"Because this is not a fairly simple phrase, could you swiftly, and precisely, copy it?")

word = 15

}



function beginnow() {

randNum = Math.floor((Math.random() * 10)) % 4     

msgType = msg[randNum]                              

day = new Date();

startType = day.getTime();                         

document.theForm.given.value = msgType                 

document.theForm.typed.focus();                   

}


function cheat() {                        

alert("对不起，这里的内容你不能改变！！");

document.theForm.typed.focus();

}


function stopnow() {

dayTwo = new Date();

endType = dayTwo.getTime();                            

totalTime = ((endType - startType) / 1000)         

spd = Math.round((word/totalTime) * 60)             

if (document.theForm.typed.value == document.theForm.given.value) {

    alert("n你输入了 " + word + " 个字符，在 " + totalTime + " 秒内, 速度为每秒钟 " + spd + " 个字符!")

}

else {

    alert("你输入有错，但是你每分钟输入 " + spd + " 个字符.")

  }

}

// -->

</SCRIPT>


<body>
<FORM name="theForm">

<TABLE BORDER=3>

<TR>

<TD>你是个...</TD>

<TD align=center><input type=radio name="sme" value="Beginner" onClick="s()" checked>初级

<input type=radio name="sme" value="Novice" onClick="m()">中级

<input type=radio name="sme" value="Expert" onClick="e()">高级</TD>

</TR>

<TR><TD colspan=2><BR>

<center><input type=button value="开始测试" name="start" onClick="beginnow()"></center><BR> 

<textarea name="given" cols=53 rows=3 wrap=on onFocus="cheat()"></textarea></TD>

</TR>

<TR><TD colspan=2><input type=text name="typed" size=49><input type=button value="结束" name="stop" onClick="stopnow()"></TD>

</TR>

</TABLE>
</FORM>

</body>

思考赐予新生，时间在于定义

2013-08-17 00:52

love云彩

来　自：青藏高原
等　级：贵宾
威　望：53
帖　子：3663
专家分：11416
注　册：2012-11-17

第 28 楼

得分:0

30、游戏射击。

程序代码：

<SCRIPT LANGUAGE="JavaScript">
<!--

function MakeArray(n){
     this.length = n;                    

     for (var i = 1; i <= n; i++) {      

         this[i] = 0

     }
     return this
}

var d0 = new Date();
var rand_0 = d0.getSeconds();                  

function p_rand(){                              

     d1 = new Date();                              

     rand_0 = (rand_0 * rand_0 + rand_0 + d1.getSeconds()) % 3721 ;
     return rand_0 % width_n;
}


var height_n = 7;          

var width_n =4;             


var enemy = new MakeArray(width_n); 

var wtime;                   

var score;
var gameover;
document.write( "<FORM NAME='fm1'>");
document.write( "<INPUT TYPE='text' NAME='message' SIZE=20>");

document.write( "</FORM>");
document.write( "<FORM NAME='fm2'><TABLE>");
for( var i=0; i<height_n; i++){            

     document.write( "<TR>");
     for( var j=0;j<width_n; j++){
         document.write( "<TD><CENTER><INPUT TYPE='radio'></CENTER></TD>");
     }
     document.write( "</TR>");
}
document.write( "<TR>");
for( var j=0;j<width_n; j++){                 

     document.write( "<TD><INPUT TYPE='button' VALUE='||' onClick='fire(" + j + ")'></TD>");
}
document.write( "</TR>");
document.write( "</TABLE>");
document.write( "<INPUT TYPE='button' VALUE='开始' onClick='game_start()'>");    

document.write( "</FORM>");


function ncome(){
     var n = p_rand();
     document.fm2.elements[width_n * enemy[n+1] + n].checked = true;
     enemy[n+1]++;
     if(enemy[n+1] < height_n){        

         setTimeout("ncome()", wtime);
     }else{
       gameover = true;                                    

       document.fm1.message.value =  "游戏结束:" + score ; 

     }
}

function fire(n){
     if(gameover) return;                

     for(var i=0; i<enemy[n+1]; i++){
         document.fm2.elements[ width_n * i + n].checked = false;
     }
     score+= enemy[n+1];
     document.fm1.message.value = "分数:" + score;    

     enemy[ n+1] = 0;
     if( wtime > 50){ wtime -= 10};
}

function game_start(){
    for( var n=0; n<width_n; n++){                          

         for( var i=0; i<enemy[n+1]; i++){
             document.fm2.elements[ width_n * i + n].checked = false;
         }
         enemy[n+1] = 0;
     }
     wtime = 150;                                    

     score = 0;                                           

     gameover = false;
     document.fm1.message.value = "分数:" + score;
     setTimeout("ncome()", wtime);
}

//-->
</SCRIPT>

思考赐予新生，时间在于定义

2013-08-17 00:53

love云彩

来　自：青藏高原
等　级：贵宾
威　望：53
帖　子：3663
专家分：11416
注　册：2012-11-17

第 29 楼

得分:0

以下是引用有容就大在2013-8-17 20:28:24的发言：

来鼓鼓掌云版辛苦了

等凌晨来了，我就可以用闲时流量在电脑上网，到时候再继续贴素材上来

思考赐予新生，时间在于定义

2013-08-17 20:32

love云彩

来　自：青藏高原
等　级：贵宾
威　望：53
帖　子：3663
专家分：11416
注　册：2012-11-17

第 30 楼

得分:0

31、页面停留时间。

程序代码：

<script language="JAVASCRIPT">
<!--
var time_start = new Date();         

var clock_start = time_start.getTime();

function get_time_spent ()
{

var time_now = new Date();             

return((time_now.getTime() - clock_start)/1000);

}

function show_secs ()
{

var total_secs = Math.round(get_time_spent());   

var secs_spent = total_secs % 60;
var mins_spent = Math.round((total_secs-30)/60);

var secs_spent = "" + ((secs_spent>9) ? secs_spent : "0" + secs_spent);  

var mins_spent = "" + ((mins_spent>9) ? mins_spent : "0" + mins_spent);  

document.form0.time_spent.value = mins_spent + ":" + secs_spent;         

setTimeout('show_secs()',1000);

}
setTimeout('show_secs()',1);
// -->
</script>

<FORM name="form0" onSubmit="0">你在本页面的停留时间:
<INPUT type="text" name="time_spent" size=7 onFocus="this.blur()"></FORM>

思考赐予新生，时间在于定义

2013-08-18 01:30

快速回复：分享JavaScript精彩网页特效实例，素材，有需要代码的可以拿来参考一下 ...