js一堆
一、刷新页面，参考以下2个方法：
1，页面中加入：
<meta http-equiv=Refresh content=秒数;URL=文件名>
3，借助JS来实现：
<script language="JavaScript">
function MyFunc()
{
window.location=window.location;
}
setInterval('MyFunc',10000);
</script>
上面的10000是10000毫秒，也就是10秒。
二、显示隐藏层
Code<!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-Type" content="text/html; charset=gb2312" />
<title>Ajax的Hello页面</title>
<link href="css/hello.css" rel="stylesheet" type="text/css" />
<script language="javascript">
function ShowHide(button)
{
if(button.value=="隐藏")
{
button.value="显示";
document.getElementById('good').style.display = "none"; //隐藏
}
else
{
button.value="隐藏";
document.getElementById('good').style.display = "block"; //显示
}
}
</script>
</head>
<body>
<div id="good">我要显示的文字</div>
<form action="" method="post">
<input type="button" value="隐藏" name="myButton" onclick="javascript:ShowHide(this)"/>
</form>
</body>
</html>
图片放大镜：
Code<!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-Type" content="text/html; charset=gb2312" />
<title>图片放大镜的js实现</title>
<script language="JavaScript" type="text/javascript">
<!--
var srcX; //原图大小
var srcY;
var bigX; //预览窗大小,可以任意设置
var bigY;
var smallX; //缩略图宽度
var smallY;
var viewX; //预览范围
var viewY;
var bl;//缩小比例
var border; //边框
window.onload=function ()
{
var bigbox = document.getElementById("bigbox");
var view = document.getElementById("view");
var smallpic = document.getElementById("smallpic");
var bigpic = document.getElementById("bigpic");
//初始设置
srcX = smallpic.width; //原图大小
srcY = smallpic.height;
bigX = 360; //预览窗大小,可以任意设置
bigY = 360;
smallX = 400; //缩略图宽度
smallY = srcY * smallX / srcX;
viewX = bigX / srcX * smallX; //预览范围
viewY = bigY / srcY * smallY;
bl = srcX / smallX;//缩小比例
border = 2; //边框
bigbox.style.display='none';
view.style.display='none';
smallpic.width=smallX;
smallpic.height=smallY;
bigpic.width=srcX ;
bigpic.height=srcY ;
view.style.width=viewX + 'px';
view.style.height=viewY + 'px';
bigbox.style.borderWidth=border + 'px';
if (window.event) {
bigbox.style.width=bigX + border*2 - 20;
bigbox.style.height=bigY + border*2 - 20;
} else {
bigbox.style.width=bigX + 'px';
bigbox.style.height=bigY + 'px';
}
}
function move(e){
var e = window.event?window.event:e;
var iebug = 0;
var bigbox = document.getElementById("bigbox");
var bigpic = document.getElementById("bigpic");
var view = document.getElementById("view");
var smallpic = document.getElementById("smallpic");
bigbox.style.display="";
view.style.display="";
if (window.event) {
var vX = e.offsetX - viewX/2;
var vY = e.offsetY - viewY/2;
} else {
var vX = e.pageX - viewX/2 - smallpic.offsetLeft - border;
var vY = e.pageY - viewY/2 - smallpic.offsetTop - border;
iebug = 2;
}
if (vX < 0) vX = 0;
if (vY < 0) vY = 0;
if (vX > smallX - viewX - iebug) vX = smallX - viewX - iebug;
if (vY > smallY - viewY - iebug) vY = smallY - viewY - iebug;
bigpic.style.marginLeft = - vX * bl + 'px';
bigpic.style.marginTop = - vY * bl + 'px';
if (window.event) {
view.style.left = vX + e.clientX - e.offsetX - 2;
view.style.top = vY + e.clientY - e.offsetY - 2;
if(e.clientX - e.offsetX > smallpic.offsetWidth || e.clientY - e.offsetY > smallpic.offsetHeight)
smallpic.onmouseout();
} else {
view.style.left = (vX + smallpic.offsetLeft) + 'px';
view.style.top = (vY + smallpic.offsetTop) + 'px';
}
}
function out()
{
var bigbox = document.getElementById("bigbox");
var view = document.getElementById("view");
bigbox.style.display="none";
view.style.display="none";
}
//-->
</script>
<style type="text/css">
<!--
#smallpic{position:relative}
#bigbox{border:1px #c33 solid; overflow:hidden}
#view{border:1px #ddd solid;position:absolute}
//-->
</style>
</head>
<body bgcolor="#999999">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="500"><img id="smallpic" src="a.jpg" border="0" onmousemove="move(event)" onmouseout="out()"></td>
<td width="500">
<div id="bigbox"><img id="bigpic" src="a.jpg" border="0"></div>
<div id="view" onmousemove="move(event)" onmouseout="out()"></div></td>
</tr>
</table>
<br /><br /><br /><br />
</body>
</html>
随机抽奖：
Code<!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">
<title>幸运星 就是你</title>
<style>
td {
background-color: #FFFF00;
border: 1px solid #009933;
font-size: 50pt;
height: 70px;
width: 75px;
text-align: center;
}
.button {
background-color: transparent;
border: 1px solid #009933;
font-size: 20pt;
color: #009933;
height: 40px;
width: 100px;
}
.sp {
background-color: #FFFFFF;
}
.total {
border: 1px solid #009933;
border-bottom: 1px solid #009933;
border-top: 0px;
border-left: 0px;
border-right: 0px;
background-color: transparent; /* 背景色透明 */
text-align: center;
font-size: 14px;
color: green;
width: 50px;
}
.f {
font-size: 14px;
color: #009933;
}
</style>
<script type="text/javascript" language="javascript">
var tds = document.getElementsByTagName("td");//获得所有的td
var time;//每跳一格运行的时间 1-50ms之间
var count = 0;//每个td对应的下标
var totalTime;//每跳一格运行时间的总和
var maxTime;//maxTime是每次运行的最大时间 在10
var flag;//用来开始和停止的标识 1表示开始 0表示结束
//开始
function begin()
{
flag = 1;
maxTime = Math.floor(Math.random()*3000) + Math.floor(Math.random()*2000) + 1000;
totalTime = 0;//每次运行时 将前一次运行的总时间 清零
changeColor();
}
//结束
function end()
{
flag = 0;
}
function changeColor()
{
time = Math.floor(Math.random()*50) + 1;//本行放在这里 则每次每格运行的时间是不一样的
if(count < tds.length)
{
//下面这样写 主要是为了按1-16顺序选择 本人觉得不是很好 如果哪位大侠有更好的 欢迎指教
tds[count].style.color="#FF0DF0";
rollback(count);
if(count == 4)
{
count = 6;//输出6
}
else if(count == 7)
{
rollback(count);
count = 8;//输出7
}
else if(count == 9)
{
rollback(count);
count = 10;//输出8
}
else if(count == 11)
{
rollback(count);
count = 15;//输出9
}
else if(count == 16)
{
rollback(count);
count = 14;//输出10
}
else if(count == 15)
{
rollback(count);
count = 13;//输出11
}
else if(count == 14)
{
rollback(count);
count = 12;//输出12
}
else if(count == 13)
{
rollback(count);
count = 11;//输出13
}
else if(count == 12)
{
rollback(count);
count = 9;//输出14
}
else if(count == 10)
{
rollback(count);
count = 7;//输出15
}
else if(count == 8)
{
rollback(count);
count = 4;//输出16
}
else if(count == 5)//当显示的是16时 转头重新从1开始显示
{
count = -1;
}
}
count = count + 1;
totalTime = totalTime + time;//每次运行的时间累加
if(totalTime < maxTime)//如果累计运行的时间小于maxTime 则继续运行 否则停止
{
if (flag == 0)
{
return false;
}
setTimeout("changeColor()", time);
}
}
//rollback方法是为了将不是当前的数字的颜色恢复为以前的颜色 以示区别
function rollback(s)
{
for(var i = 0; i < tds.length; i++)
{
if(i != s)
{
tds[i].style.color="#000000";
}
}
}
//这是我的方法
var myTds=[];
function tdSort() {
for(i=0;i<tds.length;i++){
var ind=parseInt(tds[i].innerHTML);
if(ind){
myTds[ind-1]=tds[i];
}
}
}
function myBegin(){
flag = 1;
maxTime = Math.floor(Math.random()*3000) + Math.floor(Math.random()*2000) + 1000;
totalTime = 0;//每次运行时 将前一次运行的总时间 清零
myChangeColor();
}
function myChangeColor() {
time = Math.floor(Math.random()*50) + 1;
totalTime = totalTime + time;//每次运行的时间累加
tds[count].style.color="#FF0DF0";
rollback(count);
count = (count + 1)%16;
if(totalTime < maxTime){//如果累计运行的时间小于maxTime 则继续运行 否则停止
if (flag == 0) return false;
setTimeout("changeColor()", time);
}
}
</script>
</head>
<body>
<form name="luck">
<table id="luckboy" border="0" align="center" cellpadding="0"
cellspacing="1" style="position: relative; left: 0px; top: 30px">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>16</td>
<td colspan="3" rowspan="3" class="sp"><img
src="a.jpg" align="middle" /><!-- 你的图片 --></td>
<td>6</td>
</tr>
<tr>
<td>15</td>
<td>7</td>
</tr>
<tr>
<td>14</td>
<td>8</td>
</tr>
<tr>
<td>13</td>
<td>12</td>
<td>11</td>
<td>10</td>
<td>9</td>
</tr>
</table>
<br />
<br />
<br />
<div align="center">
<input type=button name="start" value="开 始" class="button" onclick="begin()">
<input type=button name="over" value="结 束" class="button" onclick="end()">
<input type=button name="over" value="我的开始" class="button" onclick="myBegin()">
</div>
</form>
</body>
</html>
鼠标移动到表格表格变色：
Code<TABLE cellSpacing=0 cellPadding=0 width=100 border=1>
<TBODY>
<TR>
<TD onmouseover="this.style.backgroundColor='#FF9966'"onmouseout="this.style.backgroundColor=''">
</TD>
</TR>
<TR>
<TD onmouseover="this.style.backgroundColor='#FF9966'"
onmouseout="this.style.backgroundColor=''"> </TD>
</TR>
</TBODY>
</TABLE>
据说可以
不显示js代码的错误？
Code<html>
<head>
<title>OnError Example</title>
<script type="text/javascript">
window.onerror = function (sMessage, sUrl, sLine)
{
alert("An error occurred:\n" + sMessage + "\nURL: " + sUrl + "\nLine Number: " + sLine);
return true; // 如果return false;则js异常一样会出现
}
</script>
</head>
<body onLoad="nonExistentFunction()">
</body>
</html>
