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对象练习题的更多相关文章

  1. Window.document对象

    1.Window.document对象 一.找到元素: docunment.getElementById("id"):根据id找,最多找一个:     var a =docunme ...

  2. JavaScript的DOM操作。Window.document对象

    间隔执行一段代码:window.setlnteval("需要执行的代码",间隔毫秒数) 例 :      window.setlnteval("alert("你 ...

  3. Window.document对象 轮播练习

    Window.document对象 一.找到元素:     docunment.getElementById("id"):根据id找,最多找一个:     var a =docun ...

  4. HTML Window.document对象

    1.Window.document对象 一.找到元素: docunment.getElementById("id"):根据id找,最多找一个:    var a =docunmen ...

  5. Window.document对象(1)

    1.Window.document对象 一.找到元素: docunment.getElementById("id"):根据id找,最多找一个:     var a =docunme ...

  6. JS中window.document对象

    小知识点注:外面双引号,里面的双引号改为单引号:                  在div里面行高设置和整个外面高度一样,才能用竖直居中,居中是行居中                  文本框取出来 ...

  7. 1、Window.document对象

    1.Window.document对象 一.找到元素: docunment.getElementById("id"):根据id找,最多找一个:    var a =docunmen ...

  8. 3.26课·········window.document对象

    1.Window.document对象 一.找到元素:    docunment.getElementById("id"):根据id找,最多找一个:    var a =docun ...

  9. 2016/2/22 1、Window.document对象

    1.Window.document对象 一.找到元素: docunment.getElementById("id"):根据id找,最多找一个:     var a =docunme ...

随机推荐

  1. 关于 jsp:include 传参的用法

    引用模版页面的代码,如下: <jsp:include page="/WEB-INF/template/nav_template.jsp">     <jsp:pa ...

  2. python 笔记4-- 函数式编程

    高阶函数 把函数作为参数传入,这样的函数称为高阶函数,函数式编程就是指这种高度抽象的编程范式. 在python中 函数也是一种变量 def add(x, y, f): return f(x) + f( ...

  3. NET基础课--配置文件2

     1. 使用<appSettings>        简单的配置信息,可以直接放入<appSettings>标记中.如: <?xml version="1.0& ...

  4. 查询ID为5的数据的前后各一行数据,ID不连续

    首先假如有一张表 test 那么我们要查的就是 3 和 7 这里我的思路是 用SQL Server 自带的Row_Number 函数把 ID=5 的 RowNo 查出来,因为RowNo是连续的,所以它 ...

  5. HTML 5 全局属性和事件属性

    1.HTML 5 全局属性 HTML 属性能够赋予元素含义和语境. 下面的全局属性可用于任何 HTML5 元素. NEW:HTML 5 中新的全局属性. 属性 描述 accesskey 规定访问元素的 ...

  6. C#钩子应用实例

    C#钩子应用实例一.写在最前 本文的内容只想以最通俗的语言说明钩子的使用方法,具体到钩子的详细介绍可以参照下面的网址: http://www.microsoft.com/china/community ...

  7. gridview获取当前行索引的方法

    在用GridView控件时,我们经常会碰到获取当前行的索引,通过索引进行许多操作.例如,可以获得当前行某一个控件元素:设置某一元素的值等等. 下面结合实例介绍几种获得GridView当前行索引值的方法 ...

  8. java面对对象 关键字this super

    this:this是指向对象本身的一个指针,成员函数内部指向当前类的对象 其实this主要要三种用法: 1.表示对当前对象的引用! 2.表示用类的成员变量,而非函数参数,注意在函数参数和成员变量同名是 ...

  9. (转)发现两个有用的C函数_alloca()、_msize()

    转自: http://blog.csdn.net/pony12/article/details/8678071 (1)_alloca()alloca也是用来分配存储空间的,它和malloc的区别是它是 ...

  10. WebView高危接口安全检测

    高危]WebView高危接口安全检测共2处详细内容:在Android系统4.3.1~3.0版本,系统webview默认添加了searchBoxJavaBridge_接口,如果未移除该接口可能导致低版本 ...