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 ...

随机推荐

git使用图解
使用前安装git 配置name 和 email git config --global user.name "Your Name" git config --global use ...
swfobject.js 2.2简单使用方法
swfobject.js 2.2简单使用方法官方网址介绍http://code.google.com/p/swfobject/wiki/documentation 用法:html部分<div ...
EF 事务处理 (InnoDB Engine的MySQL表也可以)
备忘 1. 亲测(可以嵌套使用) using (TransactionScope scope = new TransactionScope()) { //操作1 XXEntities.Current. ...
跨服务器的sql使用
由于想从别的服务器上的数据库导入一些数据过来经网上查阅,得到 select * from openrowset( 'SQLOLEDB', '服务器名字'; '用户名'; '密码',数据库名字.dbo ...
session的存储方式和配置
Session又称为会话状态,是Web系统中最常用的状态,用于维护和当前浏览器实例相关的一些信息.我们控制用户去权限中经常用到Session来存储用户状态,这篇文章会讲下Session的存储方式.在w ...
php基础之 ->， =>，@，&,::，%符号
=> 是数组成员访问符号 -> 是对象成员访问符号比如: $array = array("site map"=>"map.php"); // ...
VS 2013驱动开发 + Windbg + VM双机调试（亲测+详解）
------------VS 2013驱动开发 + Windbg + VM双机调试(亲测+详解)------------- WIN10已上线,随之而来的是VS2015:微软在 "WDK760 ...
tomcat组成及原理[转]
Tomcat安装好后打开目录;可以看到如下结构: bin :存放服务器脚本; conf :存放配置文件; lib :存放需要的JAR文件; wabapps :存放需要发布的Web应用程序及其部署文件; ...
在Windows XP下手动安装Apache+MySQL+PHP环境要点
在整个wamp环境搭建中,本质的工作如下: 1,配置系统对php中dll文件能默认处于调用状态.在windos下,对dll文件系统默认处于调用状态的,有两种采用的方式.第一种是:把需要调用dll文件复 ...
SQL Server数据库空间管理 (1)
数据库经常遇到的问题: 1).数据库文件空间用尽 2).日志文件不停增长 3).数据库文件无法收缩 4).自动增长和自动收缩本系列就以上面的4个问题入手分析并总结数据库空间的管理方法. 1. ...

HTML——window.document对象练习题

HTML——window.document对象练习题的更多相关文章

随机推荐

热门专题