| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 4733 人关注过本帖, 2 人收藏
标题:分享JavaScript精彩网页特效实例,素材,有需要代码的可以拿来参考一下
只看楼主 加入收藏
love云彩
Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19
来 自:青藏高原
等 级:贵宾
威 望:53
帖 子:3663
专家分:11416
注 册:2012-11-17
收藏
得分:0 
12、网页时钟效果。
程序代码:
<table bgcolor="#000000" align=center>
    <tr>
        <td><div id="lclock"></div></td>
    </tr>
</table>
<SCRIPT language="JavaScript">
<!--
function webclock()
{
var dataobj=new Date()
var hours=dataobj.getHours()
var minutes=dataobj.getMinutes()
var seconds=dataobj.getSeconds()

if(minutes<=9)
minutes="0"+minutes
if(seconds<=9)
seconds="0"+seconds
myclock="<font size='7' color='#ffffff' face='Arial black'>"+hours+":"+minutes+":"+seconds+"</font>"
lclock.innerHTML=myclock;
setTimeout("webclock()",1000)
}
webclock();
//-->
</SCRIPT>


思考赐予新生,时间在于定义
2013-08-17 00:28
love云彩
Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19
来 自:青藏高原
等 级:贵宾
威 望:53
帖 子:3663
专家分:11416
注 册:2012-11-17
收藏
得分:0 
13、带开关的时钟效果。
程序代码:
<table align=center>
    <tr>
        <td><div id="clock"></div></td>
    </tr>
</table>

<SCRIPT language="JavaScript">
<!--
var enabled=1;
function onclock()
{
var dataobj=new Date()  

var hours=dataobj.getHours()

var minutes=dataobj.getMinutes()
var seconds=dataobj.getSeconds()
var years=dataobj.getYear()    

var Months=dataobj.getMonth()  

var dates=dataobj.getDate()    

if(minutes<=9)
minutes="0"+minutes 

if(seconds<=9)
seconds="0"+seconds                 

myclock="<font size='5' face='Arial black'>" + years  + "年" + (Months + 1 ) + "月" + dates + "日" +hours+":"+minutes+":"+seconds+"</font>"
clock.innerHTML=myclock;

if(enabled==1)
setTimeout("onclock()",1000)
}
onclock();                                    

//-->
</SCRIPT>
<p align=center>时钟开关:<input type="radio" name="rad" value="off" onclick="enabled =0;onclock();">关<input type="radio" name="rad" value="on" checked  onclick="enabled =1;onclock();">开</p>



[ 本帖最后由 love云彩 于 2013-8-17 00:31 编辑 ]

思考赐予新生,时间在于定义
2013-08-17 00:30
love云彩
Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19
来 自:青藏高原
等 级:贵宾
威 望:53
帖 子:3663
专家分:11416
注 册:2012-11-17
收藏
得分:0 
14、简单的日历实现效果
程序代码:
<STYLE TYPE="text/css">

td{font-size: 10pt;}

</STYLE>

<script language="JavaScript">
<!--
monthnames = new Array("1月","2月","3月","4月","5月","6月","7月","8月","10月","11月","12月");

monthdays = new Array(12);        

monthdays[0]=31;
monthdays[1]=28;
monthdays[2]=31;
monthdays[3]=30;
monthdays[4]=31;
monthdays[5]=30;
monthdays[6]=31;
monthdays[7]=31;
monthdays[8]=30;
monthdays[9]=31;
monthdays[10]=30;
monthdays[11]=31;
todayDate=new Date();        

thisday=todayDate.getDay();    

thismonth=todayDate.getMonth();    

thisdate=todayDate.getDate();    

thisyear=todayDate.getYear();    

thisyear = thisyear % 100;
thisyear = ((thisyear < 50) ? (2000 + thisyear) : (1900 + thisyear));  

if (((thisyear % 4 == 0) && !(thisyear % 100 == 0)) ||(thisyear % 400 == 0)) monthdays[1]++;
startspaces=thisdate;
while (startspaces > 7) startspaces-=7;                 

startspaces = thisday - startspaces + 1;
if (startspaces < 0) startspaces+=7; 

document.write("<table border=1 style='border-collapse: collapse' bordercolor='#000000' width=160>");
document.write("<tr><td colspan=7 bgcolor=#0A246A align=center><font color=#ffffff>" + thisyear +"年"+monthnames[thismonth]+"</font></td></tr>");   

document.write("<tr>");
document.write("<td align=center>日</td>");
document.write("<td align=center>一</td>");
document.write("<td align=center>二</td>");
document.write("<td align=center>三</td>");
document.write("<td align=center>四</td>");
document.write("<td align=center>五</td>");
document.write("<td align=center>六</td>");

document.write("</tr>");
document.write("<tr>");
for (s=0;s<startspaces;s++) {
document.write("<td>&nbsp</td>");                     

}
count=1;
while (count <= monthdays[thismonth]) {

for (b = startspaces;b<7;b++) {

if (count==thisdate) {
document.write("<td bgcolor=#0A246A>");
document.write("<font color='fffffff'><b>"); }         

else
{document.write("<td>");
}
if (count <= monthdays[thismonth]) {
document.write(count);
}
else {
document.write("&nbsp");
}
if (count==thisdate) {
document.write("</b></font>");
}
document.write("</td>");
count++;
}
document.write("</tr>");
startspaces=0;
}
document.write("</table>");
//-->
</script>


思考赐予新生,时间在于定义
2013-08-17 00:32
love云彩
Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19
来 自:青藏高原
等 级:贵宾
威 望:53
帖 子:3663
专家分:11416
注 册:2012-11-17
收藏
得分:0 
15、关不掉的弹出框效果。
<p align="center">
<input type=button value=关不掉的弹出框 onClick="while(1==1){alert('这个窗口您已经关不掉了!')}">
</p>
16、弹出窗口按钮。
程序代码:
<script LANGUAGE="JavaScript">
<!--
  function openwin() {
  window.open ("http://www., "搜狐", "height=600, width=800, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no")
  }
//-->
</script>
<p align=center><input type="button" onclick="openwin()" value="弹出窗口按钮"></p>


思考赐予新生,时间在于定义
2013-08-17 00:36
love云彩
Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19
来 自:青藏高原
等 级:贵宾
威 望:53
帖 子:3663
专家分:11416
注 册:2012-11-17
收藏
得分:0 
17电子邮件地址校验效果。
程序代码:
<SCRIPT LANGUAGE="JavaScript">
<!--

function Juge(theForm)

{

if (theForm.email.value == "")

{
alert("请您输入\"email\"!");

theForm.email.focus();

return (false);

}

var checkOK = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_@.";

var checkStr = theForm.email.value;
var allValid = true;


for (i = 0; i < checkStr.length; i++)          

{

ch = checkStr.charAt(i);                       

for (j = 0; j < checkOK.length; j++)         

if (ch == checkOK.charAt(j))                 

    break;                               

    if (j == checkOK.length)
    {

        allValid = false;

        break;                   

    }

}


if (theForm.email.value.length < 6)
{

allValid = false;

}


if (!allValid)

{

alert("您输入的 \"电子邮件地址\" 无效!");

theForm.email.focus();

return (false);

}


address=theForm.email.value;

if(address.length>0)

{

i=address.indexOf("@");

if(i==-1)

{

window.alert("对不起!您输入的电子邮件地址是错误的!")
theForm.email.focus();
return false;

}

p=address.indexOf(".")

if(p==-1)

{

window.alert("对不起!您输入的电子邮件地址是错误的!")

theForm.email.focus();

return false;

}

}

}

//-->
</script>

<body>

<form method="post" onSubmit="return Juge(PostTopic)" name="PostTopic">

电子邮件:

<input type="text" name="email" maxlength="30" size="25" style="border:1px double rgb(88,88,88);font:9pt">

<input type="submit" name="Submit" value="提交">

</form>

</body>



思考赐予新生,时间在于定义
2013-08-17 00:39
love云彩
Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19
来 自:青藏高原
等 级:贵宾
威 望:53
帖 子:3663
专家分:11416
注 册:2012-11-17
收藏
得分:0 
18、ip地址校验。
程序代码:
<script language="javascript">

<!--
function checkIP()

{

obj=document.check.ip.value     

var exp=/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
var reg = obj.match(exp);

if(reg==null)

{

alert("IP地址不合法!");

}

else

{

alert("IP地址合法!");

}

}

//-->
</script>

<form name=check>
<input type=text id="ip">

<input type=button onclick="checkIP()" value="检测IP">

</form>


思考赐予新生,时间在于定义
2013-08-17 00:40
love云彩
Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19
来 自:青藏高原
等 级:贵宾
威 望:53
帖 子:3663
专家分:11416
注 册:2012-11-17
收藏
得分:0 
19、随机产生密码。
程序代码:
<script language="JavaScript">
<!--
function apwd()
{
var a;
var quote='';
quotes = new Array
quotes[0] = '0'
quotes[1] = '1'
quotes[2] = '2'
quotes[3] = '3'
quotes[4] = '4'
quotes[5] = '5'
quotes[6] = '6'
quotes[7] = '7'
quotes[8] = '8'
quotes[9] = '9'
quotes[10] = 'a'
quotes[11] = 'b'
quotes[12] = 'c'
quotes[13] = 'd'
quotes[14] = 'e'
quotes[15] = 'f'
quotes[16] = 'g'
quotes[17] = 'h'
quotes[18] = 'i'
quotes[19] = 'j'
quotes[20] = 'k'
quotes[21] = 'l'
quotes[22] = 'm'
quotes[23] = 'n'
quotes[24] = 'o'
quotes[25] = 'p'
quotes[26] = 'q'
quotes[27] = 'r'
quotes[28] = 's'
quotes[29] = 't'
quotes[30] = 'u'
quotes[31] = 'v'
quotes[32] = 'w'
quotes[33] = 'x'
quotes[34] = 'y'
quotes[35] = 'z'
quotes[36] = '!'
quotes[37] = '@'
quotes[38] = '#'
quotes[39] = '$'
quotes[40] = '%'
for (i=0;i<8;i++)
{
a = Math.round(Math.random() * 40)
quote = quote + quotes[a]
}
document.rand.demo.value=quote
}
// -->
</script>

<body>
<form name=rand>
<input type=text name=demo size=20><input type=button onclick="apwd();" value=随机生成密码>
</form>
</body>


思考赐予新生,时间在于定义
2013-08-17 00:41
love云彩
Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19
来 自:青藏高原
等 级:贵宾
威 望:53
帖 子:3663
专家分:11416
注 册:2012-11-17
收藏
得分:0 
常用输入信息校验。
程序代码:
<html>

<head>

<title>常用输入信息校验</title>

<script language="JavaScript">

<!--

function Juge(theForm)

{

if (theForm.title.value == "")     

{

alert("请输入标题!");
theForm.title.focus();
return (false);

}

if (theForm.detail.value == "")

{

alert("请输入内容!");

theForm.detail.focus();

return (false);

}

if (theForm.name.value == "")

{

alert("请输入作者!");

theForm.name.focus();

return (false);

}

}
-->

</script>

</head>

<body>

<center>常用输入信息校验</center>

<form name="form1" method="post" onsubmit="javascript:return Juge(this);">

<table width="90%" border="0" cellspacing="1" cellpadding="1" align="center">

<tr>

<td>

您的姓名:<input type=text name=name size=30>

</td>

</tr>

<tr>

<td>

文章标题:<input type="text" name=title size="50">

</td>

</tr>

<tr>

<td>

文章内容:<br><textarea name=detail  cols=50 rows=10></textarea>

</td>

</tr>

<tr>

<td><input type="submit" name="pub" value="检验信息"></td>

</tr>

</table>

</form>

</body>

</html>


思考赐予新生,时间在于定义
2013-08-17 00:42
love云彩
Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19
来 自:青藏高原
等 级:贵宾
威 望:53
帖 子:3663
专家分:11416
注 册:2012-11-17
收藏
得分:0 
21、密码验证效果。
程序代码:
<script language="JavaScript">
<!--
function checkpass(){
if((document.form1.username.value == "zt")&&(document.form1.pwd.value == "1111"))
{
    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();">
</form>

</body>


思考赐予新生,时间在于定义
2013-08-17 00:43
love云彩
Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19
来 自:青藏高原
等 级:贵宾
威 望:53
帖 子:3663
专家分:11416
注 册:2012-11-17
收藏
得分:0 
22、限制输错密码次数效果。
程序代码:
<script LANGUAGE="JavaScript">
<!--
flag2=0
function checkpwd(){
if (flag2== 3){
    alert("您已经无权在此输入密码!")
    window.location.href = "http://www.}
else
{
    if((document.form1.username.value == "zt")&&(document.form1.pwd.value == "1111"))
    {
        alert("验证成功!")
        return true
    }
    else{
        flag2=flag2+1
        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="checkpwd();"><br>您输入密码3次错误将自动进入新浪网
</form>

</body>


思考赐予新生,时间在于定义
2013-08-17 00:44
快速回复:分享JavaScript精彩网页特效实例,素材,有需要代码的可以拿来参考一下 ...
数据加载中...
 
   



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

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