HTML——window.document对象练习题
1、选项卡效果
第一种方法：
<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.se//设置标题的样式
{
width:150px;
height:30px;
line-height:30px;
text-align:center;
vertical-align:middle;
float:left;
}
#se1//设置选项卡se1的样式
{
background-color:yellow;
width:150px;
height:200px;
}
#se2//设置选项卡se2的样式
{
background-color:green;
width:150px;
height:200px;
}
#se3//设置选项卡se3的样式
{
background-color:red;
width:150px;
height:200px;
} </style>
</head>
<body>
<div class="se" biaoshi="yellow" style="background-color:yellow" onclick="color('yellow')">黄色</div>//建立标题，设置标识并添加事件
<div class="se" biaoshi="green" style="background-color:green" onclick="color('yellow')">绿色</div>
<div class="se" biaoshi="red" style="background-color:red" onclick="color('yellow')">红色</div> <div style="clear:both"></div>//截流 <div id="se1" style="display:block"></div>//建立选项卡
<div id="se1" style="display:none"></div>
<div id="se1" style="display:none"></div> </body>
<script type="application/javascript"> var se1=document.getElementById("se1");//找到对象选项卡
var se2=document.getElementById("se2");
var se3=document.getElementById("se3"); function color(a)//定义函数事件名称
{
if(a=="yellow")
{
se1.style.display="block";
se2.style.display="none";
se3.style.display="none";
}
else if(a=="green")
{
se1.style.display="none";
se2.style.display="block";
se3.style.display="none";
}
else if(a=="red")
{
se1.style.display="none";
se2.style.display="none";
se3.style.display="block";
}
} </script>
</html>
第二种方法：
<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.yan
{
width:50px;
height:30px;
line-height:30px;
text-align:center;
vertical-align:middle;
float:left;
}
#yan1
{
width:150px;
height:200px;
background-color:yellow;
}
#yan2
{
width:150px;
height:200px;
background-color:green;
}
#yan3
{
width:150px;
height:200px;
background-color:red;
} </style> </head>
<body> <div class="yan" style="background-color:yellow" onclick="changecolor('yan1')">黄色</div>
<div class="yan" style="background-color:green" onclick="changecolor('yan2')">绿色</div>
<div class="yan" style="background-color:red" onclick="changecolor('yan3')">红色</div> <div id="yan1" style="display:block"></div>--初始状态显示黄色
<div id="yan2" style="display:none"></div>--初始状态不显示颜色
<div id="yan3" style="display:none"></div>--初始状态不显示颜色 </body>
<script type="text/javascript"> function yincang()
{
document.getElementById("yan1").style.display="none";
document.getElementById("yan2").style.display="none";
document.getElementById("yan3").style.display="none";
}
function changecolor(a)--a是指三个id里的任何一个
{
yincang();--调用yincang函数
document.getElementById(a).style.display="block";根据id来找元素，找到后显示相对应的颜色
}
</script>
</html>
2、按钮前面打上勾之后按钮可用，否则不可用
<body> <input id="wb" type="checkbox" onclick="dianji()"/>--设置一个单选按钮，添加一个单击鼠标执行的事件，名为dianji
<input id="bu" type="button" value="下一步" disabled="disabled"/>--设置一个按钮，并且设置为不可使用 </body>
<script type="text/javascript"> function dianji()
{
var wb=document.getElementById("wb");
var bu=document.getElementById("bu");
if(wb.checked==true)//选中按钮
{
bu.removeAttribute("disabled"); //删除不可使用这个属性，使得在选中按钮后下一步按钮可执行
}
else //没选中按钮
{
bu.setAttribute("disabled","disabled");//下一步这个按钮不可使用
}
}
</script> </html>
3、做下拉菜单效果
<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#cd
{
width:50px;
height:30px;
line-height:30px;
background-color:#C9F;
text-align:center;
vertical-align:middle;
}
#cd:hover
{
cursor:pointer;
background-color:#C3C;
}
#xl
{
width:50px;
height:120px;
line-height:30px;
text-align:center;
vertical-align:middle;
background-color:#CC9;
} </style>
</head> <body>
<div id="cd" onmouseover="xianshi()" onmouseout="yincang()">菜单</div>--鼠标放上去执行xianshi事件，鼠标移开显示yincang事件 <div id="xl" style="display='none'">--下拉菜单初始状态为隐藏上去
<div class="c" >苹果</div>
<div class="c">梨子</div>
<div class="c">香蕉</div>
<div class="c">山竹</div>
</div>
</body>
<script type="text/javascript">
function xianshi()
{
document.getElementById("xl").style.display="block";--鼠标放上去显示
}
function yincang()
{
document.getElementById("xl").style.display="none"; --鼠标移开不显示
}
</script>
</html>
4、倒计时按钮，倒计时10秒之后可用。
<!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=utf-8" />
<title>无标题文档</title>
</head> <body>
<input id="s" type="button" value="同意（9）" disabled="disabled"/>
</body>
<script type="text/javascript"> var n=;
function s()
{
n--;
var a=document.getElementById("s");
if(n==)
{
a.value="同意";
a.removeAttribute("disabled");
}
else
{
a.value="同意("+n+")";
window.setTimeout("s()",);--延迟1秒变一次
}
}
window.setTimeout("s()",);
</script>
</html>
5、做一个问题，输入答案之后，点击按钮查看答案是否正确。
<!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=utf-8" />
<title>无标题文档</title>
</head> <body>
<span>车轮是圆的还是方的？</span>
<textarea id="hd" daan="圆的"></textarea>
<input type="button" value="检查" onclick="show()"/>
</body>
<script type="text/javascript">
function show()
{
var a=document.getElementById("hd");
var b=a.getAttribute("daan");
var c=a.value;
if(b==c)
{
alert("恭喜答对了");
}
else
{
alert("答错了");
}
}
</script>
</html>
HTML——window.document对象练习题的更多相关文章
- Window.document对象
1.Window.document对象 一.找到元素: docunment.getElementById("id"):根据id找,最多找一个: var a =docunme ...
- JavaScript的DOM操作。Window.document对象
间隔执行一段代码:window.setlnteval("需要执行的代码",间隔毫秒数) 例 : window.setlnteval("alert("你 ...
- Window.document对象 轮播练习
Window.document对象 一.找到元素: docunment.getElementById("id"):根据id找,最多找一个: var a =docun ...
- HTML Window.document对象
1.Window.document对象 一.找到元素: docunment.getElementById("id"):根据id找,最多找一个: var a =docunmen ...
- Window.document对象（1）
1.Window.document对象 一.找到元素: docunment.getElementById("id"):根据id找,最多找一个: var a =docunme ...
- JS中window.document对象
小知识点注:外面双引号,里面的双引号改为单引号: 在div里面行高设置和整个外面高度一样,才能用竖直居中,居中是行居中 文本框取出来 ...
- 1、Window.document对象
1.Window.document对象 一.找到元素: docunment.getElementById("id"):根据id找,最多找一个: var a =docunmen ...
- 3.26课·········window.document对象
1.Window.document对象 一.找到元素: docunment.getElementById("id"):根据id找,最多找一个: var a =docun ...
- 2016/2/22 1、Window.document对象
1.Window.document对象 一.找到元素: docunment.getElementById("id"):根据id找,最多找一个: var a =docunme ...
随机推荐
- Android得知Scroller(两)——ViewGroup转让scrollTo()
MainActivity例如下列: package cc.ac; import android.os.Bundle; import android.view.View; import android. ...
- LR实战之Discuz开源论坛——安装及简介
想了很久,也许是因为这段时间特别闲,从毕业到现在,我的测试职业生涯也近两年了,发现自己越来越喜欢测试领域,也越来越偏向测试开发了,作为一名专业的测试人员,不得不要学习性能测试,而使用LoadRunne ...
- strcpy与memcpy的区别
strcpy和memcpy的区别 strcpy和memcpy都是标准C库函数,它们有下面的特点. strcpy提供了字符串的复制.即strcpy只用于字符串复制,并且它不仅复制字符串内容之外,还会复制 ...
- iOS/iPhone 程序文件目录结构以及启动流程
要想清晰的理解IOS应用程序的启动过程,毫无疑问需要深入了解一下ios应用程序的文件系统.一个ios应用程序都有一个属于自己沙盒(sandbox),应用沙盒就是文件系统目录,并且与文件系统的其他部分隔 ...
- TCP的拥塞控制（转载）
1.引言 计算机网络中的带宽.交换结点中的缓存和处理机等,都是网络的资源.在某段时间,若对网络中某一资源的需求超过了该资源所能提供的可用部分,网络的性能就会变坏.这种情况就叫做拥塞. 拥塞控制就是防止 ...
- (Access denied for user 'root'@'localhost' (using password: NO))
先记一下遇到的问题: 项目使用mySql服务器,用户名密码正常,权限齐全,mySql服务已启动,但运行java web程序时显示: 目前正在解决 解决方案: 1.打开MySQL目录下的my.ini文件 ...
- FreeImage裁剪示例
//截图 int cropImage(const char* file, int left, int top, int right, int bottom, BYTE* &dstData, D ...
- Android性能优化建议
1.减少View树的高度(多层嵌套) 2.使用<include>重用layout 3.使用<ViewStub>实现View的延迟加载 作用范围:当这个布局在初始化加载时候,不需 ...
- 串口调试工具(Python2.7+pyserial+Tkinter)
需要与串口设备进行通讯,那么一个调试工具是必须的. 根据我自己的需要,写了个简易版本的串口调试工具: 预览图: ====================== 项目结构: COM --SerialHel ...
- 如何解决自定义ToolBar起始位置的空格（左对齐）问题
最近在做项目的时候,与到自定义toolbar的问题,自定义toolbar布局之类的并不是很难,但是自定义布局完成之后,控件总是无法左对齐,这极大的影响了App的美观. 结果谷歌后在Stack Over ...