zoukankan html css js c++ java

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//设置标题的样式
{
    150px;
    height:30px;
    line-height:30px;
    text-align:center;
    vertical-align:middle;
    float:left;
}
#se1//设置选项卡se1的样式
{
    background-color:yellow;
    150px;
    height:200px;
}
#se2//设置选项卡se2的样式
{
    background-color:green;
    150px;
    height:200px;
}
#se3//设置选项卡se3的样式
{
    background-color:red;
    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
{
    50px;
    height:30px;
    line-height:30px;
    text-align:center;
    vertical-align:middle;
    float:left;
}
#yan1
{
    150px;
    height:200px;
    background-color:yellow;
}
#yan2
{
    150px;
    height:200px;
    background-color:green;
}
#yan3
{
    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
{
    50px;
    height:30px;
    line-height:30px;
    background-color:#C9F;
    text-align:center;
    vertical-align:middle;
}
#cd:hover
{
    cursor:pointer;
    background-color:#C3C;
}
#xl
{
    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=9;    
function s()
{
    n--;
    var a=document.getElementById("s");
    if(n==0)
    {
        a.value="同意";
        a.removeAttribute("disabled");    
    }
    else
    {
        a.value="同意("+n+")";
        window.setTimeout("s()",1000);--延迟1秒变一次
    }
}
window.setTimeout("s()",1000);
</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>

查看全文

相关阅读:
Bootstrap留言板界面练习
 Bootstrap 学习
 web | [GXYCTF2019]禁止套娃
 re | [GKCTF2020]WannaReverse
PE文件结构 | 在PE文件的空白区添加代码
 PE文件结构 | RVA与FOA的转换
 re | [NPUCTF2020]BasicASM
win32 | WinSock2网络编程 | socket-tcp通信
 web | flask 修饰器实现原理
 运维 | 配置LNMP | 基于docker.ubuntu:16.04

原文地址：https://www.cnblogs.com/SJP666/p/4696196.html