搜索
编程论坛 → WEB开发 → 『 JavaScript论坛 』 → 分享JavaScript精彩网页特效实例，素材，有需要代码的可以拿来参考一下
标题：分享JavaScript精彩网页特效实例，素材，有需要代码的可以拿来参考一下
取消只看楼主
love云彩
Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19
来　自：青藏高原
等　级：贵宾
威　望：53
帖　子：3663
专家分：11416
注　册：2012-11-17
第 41 楼
 得分:0 
42、多层树型菜单效果。
程序代码：
<STYLE type=text/css>
TD {
    FONT-SIZE: 12px; FONT-FAMILY: "宋体"
}
</STYLE>

<script language="javascript">
<!--
function treebr0(i){
obj=eval('d'+i)
objimage=eval('image'+i)
if (obj.style.display == "none"){ 

    obj.style.display='block';
    objimage.src="jian.gif";
}
else{
    obj.style.display='none'; 

    objimage.src="jia.gif";
}
}
//-->
</script>
<table cellSpacing=0 cellPadding=0 width=200 border=0 STYLE='cursor:hand' onclick="javascript:treebr0(1);">
    <tr>
        <td><img src="jia.gif" id=image1>我的办公室</td>
    </tr>
</table>
<table cellSpacing=0 cellPadding=0 width=200 border=0 id=d1 style="display='none'">
    <tr>
        <td STYLE='cursor:hand' onclick="javascript:treebr0(11);">&nbsp;&nbsp;<img src="jia.gif" id=image11>公共信息</td>
    </tr>
    <tr>
        <td>
            <table cellSpacing=0 cellPadding=0 border=0 id=d11 style="display='none'">
            <tr>
                <td>&nbsp;&nbsp;&nbsp;&nbsp;<img src="shi.gif">信息发布</td>
            </tr>
            <tr>
                <td>&nbsp;&nbsp;&nbsp;&nbsp;<img src="shi.gif">信息修改</td>
            </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>&nbsp;&nbsp;<img src="shi.gif">公文包</td>
    </tr>
    <tr>
        <td STYLE='cursor:hand' onclick="javascript:treebr0(12);">&nbsp;&nbsp;<img src="jia.gif" id=image12>电子邮件</td>
    </tr>
    <tr>
        <td>
            <table cellSpacing=0 cellPadding=0 border=0 id=d12 style="display='none'">
            <tr>
                <td>&nbsp;&nbsp;&nbsp;&nbsp;<img src="shi.gif">写邮件</td>
            </tr>
            <tr>
                <td>&nbsp;&nbsp;&nbsp;&nbsp;<img src="shi.gif">收件夹</td>
            </tr>
            <tr>
                <td>&nbsp;&nbsp;&nbsp;&nbsp;<img src="shi.gif">寄件夹</td>
            </tr>
            </table>
        </td>
    </tr>
</table>
<br>
<table cellSpacing=0 cellPadding=0 width=200 border=0 STYLE='cursor:hand' onclick="javascript:treebr0(2);">
    <tr>
        <td><img src="jia.gif" id=image2>办公助理</td>
    </tr>
</table>
<table cellSpacing=0 cellPadding=0 width=200 border=0 id=d2 style="display='none'">
    <tr>
        <td STYLE='cursor:hand' onclick="javascript:treebr0(22);">&nbsp;&nbsp;<img src="jia.gif" id=image22>列车时刻</td>
    </tr>
    <tr>
        <td>
            <table cellSpacing=0 cellPadding=0 border=0 id=d22 style="display='none'">
            <tr>
                <td>&nbsp;&nbsp;&nbsp;&nbsp;<img src="shi.gif">添加</td>
            </tr>
            <tr>
                <td>&nbsp;&nbsp;&nbsp;&nbsp;<img src="shi.gif">删除</td>
            </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>&nbsp;&nbsp;<img src="shi.gif">航班时刻</td>
    </tr>
</table>


思考赐予新生，时间在于定义
2013-08-18 01:47
love云彩
Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19
来　自：青藏高原
等　级：贵宾
威　望：53
帖　子：3663
专家分：11416
注　册：2012-11-17
第 42 楼
 得分:0 
43、内容相互替换菜单。
程序代码：
<SCRIPT LANGUAGE="JavaScript">
<!--
sitems = 1;               


function move(fbox,tbox) {
for(var i=0; i<fbox.options.length; i++) {
if(fbox.options[i].selected && fbox.options[i].value != "") {
var no = new Option();
no.value = fbox.options[i].value;        

no.text = fbox.options[i].text;          

tbox.options[tbox.options.length] = no;  

fbox.options[i].value = "";              

fbox.options[i].text = "";               

   }
}
BumpUp(fbox);                            

if (sitems) SortD(tbox);                 

}

function BumpUp(box)  {
for(var i=0; i<box.options.length; i++) {

if(box.options[i].value == "")  {        

for(var j=i; j<box.options.length-1; j++)  {

box.options[j].value = box.options[j+1].value;

box.options[j].text = box.options[j+1].text;  

}
var ln = i;break;                             

   }
}
if(ln < box.options.length)  {                

box.options.length -= 1;
BumpUp(box);
   }
}

function SortD(box)  {
var temp_opts = new Array();
var temp = new Object();
for(var i=0; i<box.options.length; i++)  {  

temp_opts[i] = box.options[i];              

}
for(var x=0; x<temp_opts.length-1; x++)  {
for(var y=(x+1); y<temp_opts.length; y++)  {
if(temp_opts[x].text > temp_opts[y].text)  {
temp = temp_opts[x].text;                   

temp_opts[x].text = temp_opts[y].text;      

temp_opts[y].text = temp;                   

temp = temp_opts[x].value;                  

temp_opts[x].value = temp_opts[y].value;    

temp_opts[y].value = temp;
      }
   }
}
for(var i=0; i<box.options.length; i++)  {
box.options[i].value = temp_opts[i].value;
box.options[i].text = temp_opts[i].text;
   }
}
//-->
</script>

<form ACTION="" METHOD="POST">
<table border="0">
<tr>
<td><select multiple size="8" name="list1">
<option value="l1">数学系</option>
<option value="l2">英语系</option>
<option value="l3">物理系</option>
<option value="l4">日语系</option>
</select></td>
<td>
<input type="button" value="添加" onclick="move(this.form.list1,this.form.list2)" name="B1"><br>
<input type="button" value="删除" onclick="move(this.form.list2,this.form.list1)" name="B2">
</td>
<td><select multiple size="8" name="list2">
<option value="r1">自动化系</option>
<option value="r2">电子工程系</option>
<option value="r3">信息管理系</option>
<option value="r4">计算机系</option>
</select></td>
</tr>
</table>
</form>


思考赐予新生，时间在于定义
2013-08-18 01:49
love云彩
Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19
来　自：青藏高原
等　级：贵宾
威　望：53
帖　子：3663
专家分：11416
注　册：2012-11-17
第 43 楼
 得分:0 
44、改变背景颜色菜单。
程序代码：
<STYLE>
td {
    font-size:9pt; COLOR: #ffffff;
}
</STYLE>

<table border=0 cellpadding=0 cellspacing=1>
    <tr align=center>
        <td width=80 height=22 bgcolor="#336699" onMouseOver="javascript:this.style.backgroundColor='#336633'" onMouseOut="javascript:this.style.backgroundColor=''" STYLE='cursor:hand'>黑龙江大学</td>
        <td width=120 bgcolor="#336699" onMouseOver="javascript:this.style.backgroundColor='#336633'" onMouseOut="javascript:this.style.backgroundColor=''" STYLE='cursor:hand'>哈尔滨工业大学</td>
        <td width=120 bgcolor="#336699" onMouseOver="javascript:this.style.backgroundColor='#336633'" onMouseOut="javascript:this.style.backgroundColor=''" STYLE='cursor:hand'>哈尔滨工程大学</td>
        <td width=100 bgcolor="#336699" onMouseOver="javascript:this.style.backgroundColor='#336633'" onMouseOut="javascript:this.style.backgroundColor=''" STYLE='cursor:hand'>东北农业大学</td>
        <td width=100 bgcolor="#336699" onMouseOver="javascript:this.style.backgroundColor='#336633'" onMouseOut="javascript:this.style.backgroundColor=''" STYLE='cursor:hand'>东北林业大学</td>
    </tr>
</table>


思考赐予新生，时间在于定义
2013-08-18 01:51
love云彩
Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19
来　自：青藏高原
等　级：贵宾
威　望：53
帖　子：3663
专家分：11416
注　册：2012-11-17
第 44 楼
 得分:0 
45、大小写字母同步转换效果。
程序代码：
<SCRIPT language="JavaScript">
<!--
function test(obj)

{

obj.value = obj.value.toUpperCase();
}

//-->
</script>

请输入一段小写字母：<input type=text name="test" onkeypress="test(this)" onChange="test(this)">&nbsp;<input type=button value="确定">


思考赐予新生，时间在于定义
2013-08-18 01:53
love云彩
Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19
来　自：青藏高原
等　级：贵宾
威　望：53
帖　子：3663
专家分：11416
注　册：2012-11-17
第 45 楼
 得分:0 
46、购物自动累加计算。
程序代码：
<SCRIPT LANGUAGE="JavaScript">
<!--

var form_total=0;
function CheckChoice(box)
{
if (box.checked == false)
    { form_total -= eval(box.value); }
else     { form_total += eval(box.value); }
    document.myform.total.value = eval(form_total)+'元';
}
-->
</script>

<form method="POST" name="myform">
<table align=center width=300>
    <tr>
        <td height=50 colspan=2>目前有以下商品:</td>
    </tr>
    <tr>
        <td >AD运动衣350元</td><td width=30>
        <input type="checkbox" name="b1" value=350 onclick="CheckChoice(this);"></td>
    </tr>
    <tr>
        <td>NIKE运动背包220元</td><td width=30>
        <input type="checkbox" name="b2" value=220 onclick="CheckChoice(this);"></td>
    </tr>
    <tr>
        <td>乔丹运动鞋480元</td><td width=30>
        <input type="checkbox" name="b3" value=480 onclick="CheckChoice(this);"></td>
    </tr>
    <tr>
        <td colspan=2 align=right>花费总计: <input type="text" name="total" size=8 readonly value='0元' onFocus="this.blur();"></td>
    </tr>
</table>
</form>


思考赐予新生，时间在于定义
2013-08-18 01:54
love云彩
Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19
来　自：青藏高原
等　级：贵宾
威　望：53
帖　子：3663
专家分：11416
注　册：2012-11-17
第 46 楼
 得分:0 
47、一元二次方程计算器。
程序代码：
<SCRIPT LANGUAGE="JavaScript">
<!--
var rparti;
var rpart;
var det;
var rparti1;
var rparti2;
var a;
var b;
var c;
var x1;
var x2;
var i = "i";
function checkQuad() {
var a = document.fquad.fa.value;
var b = document.fquad.fb.value;
var c = document.fquad.fc.value;
if ((a == 0 || a == "") && c != 0) { 

x1 = "error";
x2 = "error";
document.fquad.x1.value=x1;
document.fquad.x2.value=x2;
}
else {
quad();
}
}

function quad() {           

var a = document.fquad.fa.value;
var b = document.fquad.fb.value;
var c = document.fquad.fc.value;
det = Math.pow(b,2)-4*a*c;          

rpart = Math.sqrt(det)/(2*a);
rparti = (Math.sqrt(-det)/(2*a))+i;
if (parseFloat(rparti)<0) {
rparti1 = rparti;
rparti2 = (-1*parseFloat(rparti))+i;

}
else {
rparti1 = (-1*parseFloat(rparti))+i;
rparti2 = rparti;
}
if (rparti1 == "1i") {        

rparti1 = i;
rparti2 = "-i";
}
else if (rparti1 == "-1i") {   

rparti1 = "-i";
rparti2 = i;
}
if (det == 0) {                   

x1 = x2 = -b/(2*a);
}
else if (det > 0) {           

x1 = (-b+Math.sqrt(det))/(2*a);
x2 = (-b-Math.sqrt(det))/(2*a);
}
else if ((-b/(2*a))==0){
x1 = rparti1;
x2 = rparti2;
}
else {                          

x1 = (-b/(2*a)+"+"+rparti1);
x2 = (-b/(2*a)+"+"+rparti2);
}
document.fquad.x1.value=x1;      

document.fquad.x2.value=x2;
}
//-->
</script>

<form name=fquad>
<table align="center">
<tr>
<td>
<input name=fa size=4>
          <font color="black">x<SUP>2</SUP>+</font>

          <input name=fb size=4>
          <font color="black"> x +</font>

          <input name=fc size=4>
          <font color="black">= 0</font>

          <input type=button value="求值" onClick="checkQuad()">
          

          <input type=reset value="重填">
</td>
</tr>
<tr>
<td>
        <h2> <font color="black">x<sub>1</sub>=</font>
<input name=x1 size=35>
<br>
          <font color="black">x<sub>2</sub>=</font>
<input name=x2 size=35>
</h2>
</td>
</tr>
</table>
</form>


思考赐予新生，时间在于定义
2013-08-18 01:56
love云彩
Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19
来　自：青藏高原
等　级：贵宾
威　望：53
帖　子：3663
专家分：11416
注　册：2012-11-17
第 47 楼
 得分:0 
48、简易计算器。
程序代码：
<SCRIPT LANGUAGE="JavaScript">
<!--
var Number1 = "";
var Number2 = "";
var NewNumber = "blank";
var opvalue = "";

function Display(displaynumber) {
document.calculator.answer.value = displaynumber;
}

function ClearCalc() {              // 清空
Number1 = "";
Number2 = "";
NewNumber = "blank";
Display("");
}


function CheckNumber(answer) {         // 显示数字
if(answer == ".") {
Number = document.calculator.answer.value;
if(Number.indexOf(".") != -1) {
answer = "";
   }
}
if(NewNumber == "yes") {
Number2 += answer;
Display(Number2);
}
else {
if(NewNumber == "blank") {
Number1 = answer;
Number2 = "";
NewNumber = "no";
}
else {
Number1 += answer;
}
Display(Number1);
   }
}

function AddButton(x) {                // 加法函数
if(x == 1) EqualButton();
if(Number2 != "") {
Number1 = parseFloat(Number1) + parseFloat(Number2);
}
NewNumber = "yes";
opvalue = '+';
Display(Number1);
}

function SubButton(x) {                // 减法函数
if(x == 1) EqualButton();
if(Number2 != "") {
Number1 = parseFloat(Number1) - parseFloat(Number2);
}
NewNumber = "yes";
opvalue = '-';
Display(Number1);
}

function MultButton(x) {               // 乘法
if(x == 1) EqualButton();
if(Number2 != "") {
Number1 = parseFloat(Number1) * parseFloat(Number2);
}
NewNumber = "yes";
opvalue = '*';
Display(Number1);
}
function DivButton(x) {                // 除法
if(x == 1) EqualButton();
if(Number2 != "") {
Number1 = parseFloat(Number1) / parseFloat(Number2);
}
NewNumber = "yes";
opvalue = '/';
Display(Number1);
}

function SqrtButton() {                // 平方按钮
Number1 = Math.sqrt(Number1);
NewNumber = "blank";
Display(Number1);
}

function RecipButton() {                // 分数
Number1 = 1/Number1;
NewNumber = "blank";
Display(Number1);
}
function NegateButton() {                // 正负值
Number1 = parseFloat(-Number1);
NewNumber = "no";
Display(Number1);
}
function EqualButton() {
if(opvalue == '+') AddButton(0);          // 加法
if(opvalue == '-') SubButton(0);          // 减法
if(opvalue == '*') MultButton(0);         // 乘法
if(opvalue == '/') DivButton(0);          // 除法
Number2 = "";
opvalue = "";
}
// -->
</script>
<form name="calculator">
<table bgcolor="#777777" width=220>
<tr><td>
<table bgcolor="#aaaaaa" border=1>
<tr><td>
<table border=0 cellpadding=0>
<tr>
                    <td bgcolor="#000000" align=center><font color="#ffffff"><b>计&nbsp;算&nbsp;器</b></font></div>
                    </td>
                  </tr>
<tr><td>
<table width="100%" border=0>
<tr><td colspan=6><input type="text" name="answer" size=37 maxlength=37 onChange="CheckNumber(this.value)"></td></tr>
<tr>
<td><input type="button" name="calc7" value="  7  " onClick="CheckNumber('7'); return false;"></td>
<td><input type="button" name="calc8" value="  8  " onClick="CheckNumber('8'); return false;"></td>
<td><input type="button" name="calc9" value="  9  " onClick="CheckNumber('9'); return false;"></td>
<td><input type="button" name="divide"  value="  /  " onClick="DivButton(1); return false;"></td>
<td><input type="reset" name="C" value="  C  " onClick="ClearCalc(); return false;"></td></tr>
<tr>
<td><input type="button" name="calc4" value="  4  " onClick="CheckNumber('4'); return false;"></td>
<td><input type="button" name="calc5" value="  5  " onClick="CheckNumber('5'); return false;"></td>
<td><input type="button" name="calc6" value="  6  " onClick="CheckNumber('6'); return false;"></td>
<td><input type="button" name="multiply"  value="  *  " onClick="MultButton(1); return false;"></td>
<td><input type="button" name="sqrt" value=" sqrt" onClick="SqrtButton(); return false;"></td></tr>
<tr>
<td><input type="button" name="calc1" value="  1  " onClick="CheckNumber('1'); return false;"></td>
<td><input type="button" name="calc2" value="  2  " onClick="CheckNumber('2'); return false;"></td>
<td><input type="button" name="calc3" value="  3  " onClick="CheckNumber('3'); return false;"></td>
<td><input type="button" name="minus"  value="  -  " onClick="SubButton(1); return false;"></td>
<td><input type="button" name="recip" value=" 1/x " onClick="RecipButton(); return false;"></td></tr>
<tr>
<td><input type="button" name="calc0" value="  0  " onClick="CheckNumber('0'); return false;"></td>
<td><input type="button" name="negate" value=" +/- " onClick="NegateButton(); return false;"></td>
<td><input type="button" name="dot" value="  .  " onClick="CheckNumber('.'); return false;"></td>
<td><input type="button" name="plus"  value="  +  " onClick="AddButton(1); return false;"></td>
<td><input type="button" name="equal"  value="  =  " onClick="EqualButton(); return false;"></td>
</tr>
</table>
</td></tr>
</table>
</td></tr>
</table>
</td></tr>
</table>
</form>


思考赐予新生，时间在于定义
2013-08-18 01:56
love云彩
Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19
来　自：青藏高原
等　级：贵宾
威　望：53
帖　子：3663
专家分：11416
注　册：2012-11-17
第 48 楼
 得分:0 
49、检查显示分辨率。
程序代码：
<script language="JavaScript">
<!--
var correctwidth=1024
var correctheight=768
if (screen.width!=correctwidth||screen.height!=correctheight)

document.write("本站最佳分辨率: "+correctwidth+"*"+correctheight+". 您当前的分辨率是:"+screen.width+"*"+screen.height+"。<br><br>设置合适的分辨率才能取得最佳的显示效果！")
else
document.write("您当前的分辨率是:"+screen.width+"*"+screen.height+"。<br><br>您的浏览器符合浏览本网站的要求！")
//-->
</script>


思考赐予新生，时间在于定义
2013-08-18 02:00
love云彩
Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19
来　自：青藏高原
等　级：贵宾
威　望：53
帖　子：3663
专家分：11416
注　册：2012-11-17
第 49 楼
 得分:0 
50、检测IE所安装的插件。
程序代码：
<script language="JavaScript">
<!--

 var pluginsnum = navigator.plugins.length; 

for (var i=0; i < pluginsnum; i++) {
   var number=i+1;
   document.write("<font color=red>Plug-in No." + number + "- </font>"+navigator.plugins[i].name+" <br>[Location: " + navigator.plugins[i].filename + "]<p>");
   }
if (number == undefined)                    

    alert ("\n多找一些外挂程序吧! 目前您还没有外挂程序!")
elseif (number>0)
        alert("\n你有 " + number + " 种外挂程序!")
       

//-->
</script>


思考赐予新生，时间在于定义
2013-08-18 02:01
love云彩
Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19
来　自：青藏高原
等　级：贵宾
威　望：53
帖　子：3663
专家分：11416
注　册：2012-11-17
第 50 楼
 得分:0 
51、检测点链接速度。
程序代码：
<script language="JavaScript">
<!--
tim=1
setInterval("tim++",100)
b=1

var geturl=new Array()       

geturl[1]="www.hlju.[2]="www.[3]="www.[4]="www.moe.[5]="www.("<form name=autof>")
for(var i=1;i<geturl.length;i++)
document.write("<input type=text name=txt"+i+" size=10 value=测试中……> =>> <input type=text name=url"+i+" size=40> =>> <input type=button value=点击进入网站 onclick=window.open(this.form.url"+i+".value)><br>")

function auto(url){
document.forms[0]["url"+b].value=url                

if(tim>200)
{document.forms[0]["txt"+b].value="链接超时"}         

else
{document.forms[0]["txt"+b].value="时间"+tim/10+"秒"}    

b++
}
for(var i=1;i<geturl.length;i++)            

document.write("<img src=http://"+geturl[i]+"/"+Math.random()+" width=1 height=1 onerror=auto('http://"+geturl[i]+"')>")
//-->
</script>
<br><br>
以上是检测黑龙江大学网站、网易163网站、新浪网站、教育部网站、中央电视台网站的链接速度。


思考赐予新生，时间在于定义
2013-08-18 02:03



参与讨论请移步原网站贴子：https://bbs.bccn.net/thread-419237-1-1.html




关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有，并保留所有权利。
Powered by Discuz, Processed in 1.858011 second(s), 8 queries.
Copyright©2004-2025, BCCN.NET, All Rights Reserved