1.JS处理表单
2.JS处理图片
3.JS操作CSS
一.JS处理form表单.
this关键字处理表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script>
function onSubmit(form1)
{
if(form1.yourName.value=="")
{alert("不能为空!");
return false;
}
else
return true;
}
</script>
<form method="post" action="glaring1shadow@sina.com" onSubmit="return onSubmit(this)">
<input type="text"name="yourName" value=""/>
<input type="submit" value="提交"/>
</form>
</body>
</html>使用button代替submit（不需要将数据提交到服务器上时）
<input type="button" value="submit" onClick=”函数“/>
用submit（）方法提交表单
<a href="#" onClick="JavaScript:表单名.submit()；">提交</a>
<a href="JavaScript:函数名">提交</a>
<input type="button" value="提交" onClick=表单名.submit();/ >
显示表单（提交前确认）
<!DOCTYPE html
>
<
html
>
<
head
>
<
meta
charset=
"utf-8"
>
</
head
>
<
body
>
<
script
>
function onSubmit(form1)
{
var str1=form1.yourName.value;
var str2=form1.yourAge.value;
var str3=
"确认信息："+
"\n"+
"姓名"+str1+
"\n"+
"年龄："+str2;
if(confirm(str3)==
true)
return ture;
else
return
false;
}
<
/
script
>
<
form
method=
"post"
action=
"glaring1shadow@sina.com"
onSubmit=
"return onSubmit(this)"
>
姓名：
<
input
type=
"text"
name=
"yourName"
/><
br
>
年龄：
<
input
type=
"text"
name=
"yourAge"
>
<
input
type=
"submit"
value=
"提交"
/>
</
form
>
</
body
>
</
html
>
访问表单的语法格式：
document.表单名.控件name.属性 ????
五.JS处理图片
image对象作为document对象的一个属性，image对象对应<img>标签，HTML中的每一副图片都按照显示顺序储存在images[ ]数组里，调用方法：images[0] or images[“name“] name 指<img>标签中的name
link links links[ ] 超链接对象 同上
使用src属性动态替换图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<script>
var ImageArray=new Array("1.jpg","2.jpg","3.jpg");
var index=0;
function nextImage()
{
index++;
if(index<ImageArray.length)
document.images["image1"].src=ImageArray[index];
else{
index=0;
document.images["image1"].src=ImageArray[index];
}
}
function lastImage()
{
index--;
if(index<0)
index=0;
if(index<ImageArray.length)
document.images["image1"].src=ImageArray[index];
else
{
index=0;
document.images["image1"].src=ImageArray[index];
}
}
</script>
<body>
<img src="1.jpg" name="image1" id="image1"width=500 height=500>
<a href="JavaScript:nextImage()">下一张</a>
<a href="JavaScript:lastImage()">上一张</a>
</body>
</html>预加载图片和Image（）构造函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<script>
function prefunction(){
imageArray=new Array(); //全局变量
imageArray[0]=new Image(); //构造函数
imageArray[0].src="1.jpg";
imageArray[1]=new Image();
imageArray[1].src="2.jpg";
}
</script>
<body onLoad="prefunction();">
<a href="#" onMouseOver="document.image1.src=imageArray[0].src;" onMouseOut="document.image1.src=imageArray[1].src;">
<img src="3.jpg" name="image1" id="image1" width=300 height=400>
</a>
</body>
</html>带有按钮的简单幻灯展示
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<script>
function preLoadImage()
{
image=new Array();
image[0]=new Image();
image[0]="1.jpg";
image[1]=new Image();
image[1]="2.jpg";
image[2]=new Image();
image[2]="3.jpg";
}
var i=0;
function startShow()
{
if(i<image.length)
{
document.images["image1"].src=image[i];
i++;
}
else
{
i=0;
document.images["image1"].src=image[i];
}
timeOut=setTimeout('startShow()',1500);
}
function stopShow()
{
clearTimeout(timeOut);
}
</script>
<body onLoad="preLoadImage()">
<img src="1.jpg" height="500" width="500"name="image1">
<input type="button" value="StartShow" onClick="startShow();"/>
<input type="button" value="StopShow" onClick="stopShow();"/>
</body>
</html>添加链接的幻灯展示
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<script>
function preLoadImage()
{
image=new Array();
image[0]=new Image();
image[0]="1.jpg";
image[1]=new Image();
image[1]="2.jpg";
image[2]=new Image();
image[2]="3.jpg";
image[3]=new Image();
image[3]="4.jpg";
image[4]=new Image();
image[4]="5.jpg";
}
var i=0;
function startShow()
{
if(i<image.length)
{ whichImage=i; //隐式变量
document.images["image1"].src=image[i];
i++;
}
else
{
i=0;
whichImage=i; //隐式变量
document.images["image1"].src=image[i];
}
timeout=setTimeout('startShow()',150); //隐式变量，全局变量
}
function setURL()
{
switch(whichImage){
case 0:
window.location="https://image.baidu.com/";break;
case 1:
window.location="https://www.baidu.com/";break;
case 2:
window.location="https://tieba.baidu.com/index.html";break;
case 3:
window.location="http://music.taihe.com/?fr=tieba";break;
case 4:
window.location="http://pic.sogou.com/";break;
}
}
function stopShow()
{
clearTimeout(timeout);
}
</script>
<body onLoad="preLoadImage()">
<a href="JavaScript:setURL()"><img src="1.jpg" height="500" width="500"name="image1"></a>
<input type="button" value="StartShow" onClick="startShow();"/>
<input type="button" value="StopShow" onClick="stopShow();"/>
</body>
</html>三.JS操作CSS
style对象包含了CSS的所有属性：
引用形式：background-image 变为backgroundImage；
text-align 变为textAlign
className属性：所有HTML元素共有，可以动态改变HTML样式
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
.one{
color:aqua;
}
.two{color:blue;}
.three{color:brown;}
</style>
<script>
function change()
{
var one = document.getElementById("one");
one.className="one";
var two = document.getElementById("two");
two.className="two";
var three = document.getElementById("three");
three.className="three";
}
</script>
<body>
<h1 id="one">12345678</h1>
<h2 id="two">12345678</h2>
<h3 id="three">12345678</h3>
<input type="button" value="change" onClick="change();">
</body>
</html>下拉菜单
visibility：hidden | visible；
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
#menu1
{
visibility:hidden;
}
#menu2
{
visibility: hidden;
}
</style>
<script>
function showAnimal()
{
var obj1=document.getElementById("menu1");
obj1.style.visibility="visible";
}
function noshowAnimal()
{
var obj1=document.getElementById("menu1");
obj1.style.visibility="hidden";
}
function showList()
{
var obj2=document.getElementById("menu2");
obj2.style.visibility="visible";
}
function noshowList()
{
var obj1=document.getElementById("menu2");
obj1.style.visibility="hidden";
}
</script>
<body>
<a href="#" onMouseOver="showAnimal();" onMouseOut="noshowAnimal();">Animal</a>
<div id="menu1">
<a href="#" class="menu">Dog</a><br>
<a href="#" class="menu">Tiger</a><br>
<a href="#" class="menu">Mouse</a><br>
</div>
<a href="#" onMouseOver="showList();" onMouseOut="noshowList();">列表</a>
<div id="menu2">
<a href="#" class="menu">list1</a><br>
<a href="#" class="menu">list2</a><br>
<a href="#" class="menu">list3</a><br>
</div>
</div>
</html>
5677
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
