JS练习题

时间：2023-03-09 14:45:07
JS练习题

1.带参数的函数不能重复调用

2.顺序语句；

3.在重复调用中打断 调用用 return   例如： Interval 时间间隔   先清一下  再接着 return；其他的调用也可以加return打断

4.未添加的属性   ：m.getAttribute("ss")==null    用于循环中得判断

5. 字符串用双引号    m.style.left=qq+"px";   有时候必须写成这种方式   400+px；

6.有时候  用汉语输入法输入后    不报错    没语法错误时   可以重新打一遍

7.position   fixed    插入的<div> 默认不占位置；添加<div>自动填充到它下面； relative  只是初始位置被占用；移动后不占位置； 添加<div>自动填充到它下面；

8.margin   padding 的使用；

9. 优先级  ：  外部<内嵌<内联      标签元素  如果 使用 内联样式   则不能使用内嵌样式表 改变属性  如<a  style="color:red" href="">sss</a>  在内嵌中鼠标悬浮不能改变 字体颜色；

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

1.滚动条  改变宽度   字符串截取   substr（a，b）

<!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">

*{ margin:0px auto; padding:0px}

#wai{ width:100%; height:500px;}

#left{height:500px; background-color:#63C; float:left}

#right{ height:500px; background-color:#FC3; float:left}

#anniu{ width:50px; height:50px; background-color:#F30; position:absolute; top:225px; z-index:10; }

#anniu:hover{ cursor:pointer}

</style>

</head>

<body>

<div id="wai">

    <div id="left" style="width:200px"></div>

    <div id="right" style="width:800px"></div>

</div>

<div id="anniu" style="left:175px" onclick="hua()"></div>

<script type="text/javascript">

var id;

function hua()

{

    id = window.setInterval("dong()",10);

}

//滑动的方法，调一次滑动3px

function dong()

{

    //改蓝色的宽度 200px

    var zuo = document.getElementById("left");

    kd = zuo.style.width;

    if(parseInt(kd.substr(0,kd.length-2))>=800)

    {

        window.clearInterval(id);

        return;

    }

    kd = parseInt(kd.substr(0,kd.length-2))+3;

    zuo.style.width = kd+"px";

    //改黄色的宽度

    var you = document.getElementById("right");

    ykd = you.style.width;

    ykd = parseInt(ykd.substr(0,ykd.length-2))-3;

    you.style.width = ykd+"px";

    //改红色的left

    var hong = document.getElementById("anniu");

    hleft = hong.style.left;

    hleft = parseInt(hleft.substr(0,hleft.length-2))+3;

    hong.style.left = hleft+"px";

}

</script>

</body>

</html>

滚动条

2.select 多选按钮  添加内容

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

<select id="nian" onclick="biantian()"></select>年

<select id="yue" onclick="biantian()"></select>月

<select id="tian"></select>日

<script type="text/javascript">

FillNian();

FillYue();

FillTian();

function FillNian()

{

    var b = new Date(); //获取当前时间

    var nian = parseInt(b.getFullYear());

    var str = "";

    for(var i=nian-5;i<nian+6;i++)

    {

        str = str+"<option value='"+i+"'>"+i+"</option>";

    }

    document.getElementById("nian").innerHTML = str;

}

function FillYue()

{

    var str = "";

    for(var i=1;i<13;i++)

    {

        str = str+"<option value='"+i+"'>"+i+"</option>";

    }

    document.getElementById("yue").innerHTML = str;

}

function FillTian()

{

    var yue = document.getElementById("yue").value;

    var nian = document.getElementById("nian").value;

    var ts = 31;

    if(yue==4 || yue==6 || yue==9 || yue==11)

    {

        ts=30;

    }

    if(yue==2)

    {

        if((nian%4==0 && nian%100 != 0) || nian%400==0)

        {

            ts = 29;

        }

        else

        {

            ts = 28;

        }

    }

    var str = "";

    for(var i=1;i<ts+1;i++)

    {

        str = str+"<option value='"+i+"'>"+i+"</option>";

    }

    document.getElementById("tian").innerHTML = str;

}

function biantian()

{

    FillTian();

}

</script>

</body>

</html>

select 添加年月日

<!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">

*{ margin:0px auto; padding:0px}

#wai{ width:500px; height:500px}

#left{ width:200px; height:500px; float:left}

#zhong{ width:100px; height:500px; float:left}

#right{ width:200px; height:500px; float:left}

</style>

</head>

<body>

<br />

<div id="wai">

    <div id="left">

        <select style="width:200px; height:300px" id="selleft" multiple="multiple">

            <option value="山东">山东</option>

            <option value="淄博">淄博</option>

            <option value="张店">张店</option>

        </select>

    </div>

    <div id="zhong">

        <div style="margin-left:10px; margin-top:20px">

        <input style="width:60px; height:30px" type="button" value=">>" onclick="moveall()" />

        </div>

        <div style="margin-left:10px; margin-top:30px">

        <input style="width:60px; height:30px" type="button" value=">" onclick="moveone()" />

        </div>

    </div>

    <div id="right">

        <select id="selright" multiple="multiple" style="width:200px; height:300px"></select>

    </div>

</div>

<script type="text/javascript">

function moveone()

{

    var left = document.getElementById("selleft");

    var right = document.getElementById("selright");

    var xz = left.value;

    var str = "<option value='"+xz+"'>"+xz+"</option>";

    //判断

    //alert(right.childNodes.item(0));

    var bs = 0;

    for(var i=0;i<right.childNodes.length;i++)

    {

        if(right.childNodes.item(i).text==xz)

        {

            bs++;

        }

    }

    if(bs==0)

    {

        //追加

        right.innerHTML = right.innerHTML+str;

    }

}

function moveall()

{

    var left = document.getElementById("selleft");

    var right = document.getElementById("selright");

    right.innerHTML = left.innerHTML;

}

</script>

</body>

</html>

追加 ；两个select左右移动

3.div做的下拉选择框  （清空）

<!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">

*{ margin:0px auto; padding:0px}

#xiala{ width:200px; height:40px; border:1px solid #999;text-align:center; line-height:40px; vertical-align:middle;}

#xiala:hover{ cursor:pointer}

.list{ width:200px; height:40px; text-align:center; line-height:40px; vertical-align:middle; border:1px solid #999; border-top-width:0px; display:none}

.list:hover{ cursor:pointer; background-color:#63C; color:white;}

</style>

</head>

<body>

<br />

<div style="width:500px; height:500px;">

    <div id="xiala" onclick="showa()"></div>

    <div class="list" onclick="xuan(this)">山东</div>

    <div class="list" onclick="xuan(this)">北京</div>

    <div class="list" onclick="xuan(this)">上海</div>

    <div class="list" onclick="xuan(this)">深圳</div>

    <div class="list" onclick="xuan(this)">广州</div>

</div>

<script type="text/javascript">

function showa()

{

    var list = document.getElementsByClassName("list");

    for(var i=0; i<list.length;i++)

    {

        list[i].style.display = "block";

    }

}

function xuan(a)

{

    var nr = a.innerHTML;

    document.getElementById("xiala").innerHTML=nr;

    var list = document.getElementsByClassName("list");

    for(var i=0; i<list.length;i++)

    {

        list[i].style.display = "none";

    }

}

</script>

</body>

</html>

注意清空与赋值

4.轮播  归零的位置

<!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">

*{ margin:0px auto; padding:0px}

#tp{ width:100%; height:350px}

.img{ display:none}

#dian{ width:200px; height:15px; position:relative; top:-25px}

.yuan{ width:13px; height:13px; float:left; margin-left:20px; border:2px solid #F00;border-radius:100px; background-color:#FFF}

.yuan:hover{ cursor:pointer}

</style>

</head>

<body>

<div id="tp">

    <img style="display:block" class="img"  src="../../../页面布局作业/PP官网作业/10-.jpg"  width="100%" height="350" />

    <img class="img" src="../../../页面布局作业/PP官网作业/12346.jpg" height="350" />

    <img class="img" src="../../../页面布局作业/PP官网作业/123.png" width="100%" height="350" />

    <img class="img" src="../../../页面布局作业/PP官网作业/bg_03.jpg" width="100%" height="350" />

    <img class="img" src="../../../页面布局作业/PP官网作业/F@{0OYD}]96}UBHJ1W2()0R.png" width="100%" height="350" />

</div>

<div id="dian">

    <div bs="0" class="yuan" onclick="xianshi(0)"></div>

    <div bs="1" class="yuan" onclick="xianshi(1)"></div>

    <div bs="2" class="yuan" onclick="xianshi(2)"></div>

    <div bs="3" class="yuan" onclick="xianshi(3)"></div>

    <div bs="4" class="yuan" onclick="xianshi(4)"></div>

</div>

<input type="bottom" value="denglu" style="width:50px; height:100px" />

<script type="text/javascript">

//图片索引

var sy = 0;

//间隔调用

window.setInterval("Huan()",3000);

//调一下换一个

function Huan()

{

    var img = document.getElementsByClassName("img");

    sy++; //索引加1

    //判断是否到了最后一张

    if(sy>=img.length)

    {

        sy=0;

    }

    //让所有隐藏

    for(var i=0;i<img.length;i++)

    {

        img[i].style.display="none";

    }

    //让下一张显示

    img[sy].style.display="block";

    //换圆点的样式

    var yuan = document.getElementsByClassName("yuan");

    for(var j=0;j<yuan.length;j++)

    {

        if(yuan[j].getAttribute("bs")==sy)

        {

            yuan[j].style.borderColor = "green";

        }

        else

        {

            yuan[j].style.borderColor = "red";

        }

    }

}

function xianshi(s)

{

    var img = document.getElementsByClassName("img");

    //让所有隐藏

    for(var i=0;i<img.length;i++)

    {

        img[i].style.display="none";

    }

    //让下一张显示

    img[s].style.display="block";

    //改自身样式

    var yuan = document.getElementsByClassName("yuan");

    for(var j=0;j<yuan.length;j++)

    {

        yuan[j].style.borderColor="red";

    }

    yuan[s].style.borderColor="green";

}

</script>

</body>

</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">

*{ margin:0px auto; padding:0px}

#tp{ width:100%; height:350px}

.img{ display:none}

#dian{ width:200px; height:15px; position:relative; top:-25px}

.yuan{ width:13px; height:13px; float:left; margin-left:20px; border:2px solid #F00;border-radius:100px; background-color:#FFF}

.yuan:hover{ cursor:pointer}

</style>

</head>

<body>

<div id="tp">

    <img style="display:block" class="img"  src="../../../页面布局作业/PP官网作业/10-.jpg"  width="100%" height="350" />

    <img class="img" src="../../../页面布局作业/PP官网作业/12346.jpg" height="350" />

    <img class="img" src="../../../页面布局作业/PP官网作业/123.png" width="100%" height="350" />

    <img class="img" src="../../../页面布局作业/PP官网作业/bg_03.jpg" width="100%" height="350" />

    <img class="img" src="../../../页面布局作业/PP官网作业/F@{0OYD}]96}UBHJ1W2()0R.png" width="100%" height="350" />

</div>

<div id="dian">

    <div bs="0" class="yuan" onclick="xianshi(0)"></div>

    <div bs="1" class="yuan" onclick="xianshi(1)"></div>

    <div bs="2" class="yuan" onclick="xianshi(2)"></div>

    <div bs="3" class="yuan" onclick="xianshi(3)"></div>

    <div bs="4" class="yuan" onclick="xianshi(4)"></div>

</div>

<input type="bottom" value="denglu" style="width:50px; height:100px" />

<script type="text/javascript">

//图片索引

var sy = 0;

//间隔调用

window.setInterval("Huan()",3000);

//调一下换一个

function Huan()

{

    var img = document.getElementsByClassName("img");

    sy++; //索引加1

    //判断是否到了最后一张

    if(sy>=img.length)

    {

        sy=0;

    }

    //让所有隐藏

    for(var i=0;i<img.length;i++)

    {

        img[i].style.display="none";

    }

    //让下一张显示

    img[sy].style.display="block";

    //换圆点的样式

    var yuan = document.getElementsByClassName("yuan");

    for(var j=0;j<yuan.length;j++)

    {

        if(yuan[j].getAttribute("bs")==sy)

        {

            yuan[j].style.borderColor = "green";

        }

        else

        {

            yuan[j].style.borderColor = "red";

        }

    }

}

function xianshi(s)

{

    var img = document.getElementsByClassName("img");

    //让所有隐藏

    for(var i=0;i<img.length;i++)

    {

        img[i].style.display="none";

    }

    //让下一张显示

    img[s].style.display="block";

    //改自身样式

    var yuan = document.getElementsByClassName("yuan");

    for(var j=0;j<yuan.length;j++)

    {

        yuan[j].style.borderColor="red";

    }

    yuan[s].style.borderColor="green";

}

</script>

</body>

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

<style type="text/css">

#q{width:100px; height:1000px; background-color:#CCC; position:absolute ;overflow:hidden}

#w{background-color:red; position:absolute;}

</style>

</head>

<body>

        <div id="q" onclick="hh()">123

                <div id="w"; style="width:100px; height:600px; left:-100px"></div>

        </div>

</body>

<script>

 function hh()

 {

  var m=document.getElementById('w');

     if(m.getAttribute("ss")==1)

    {

       var str=m.style.left;

         var tt=str.substr(0,str.length-2);

         var dd=parseInt(tt);

         if(dd>-100)

         {

             var qq=dd-10;

         m.style.left=qq+"px";

         window.setTimeout("hh()",100)

         }

             else

            { m.removeAttribute("ss")

            return;

            }

    }

 if(m.getAttribute("ss")==null)

     {

           var str=m.style.left;

            var tt=str.substr(0,str.length-2);

             var dd=parseInt(tt);

             if(dd<0)

             {

                 var qq=dd+10;

             m.style.left=qq+"px";

             window.setTimeout("hh()",100)

             }

             else

             {

             m.setAttribute("ss",1)

             }

     }

    }

</script>

</html>

点击 实践（return打断顺序语句）m.getAttribute("ss")==null

6.点击触发信息

<!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">

*{ margin:0px auto; padding:0px}

#fenlei{ width:500px; height:35px;}

.xiang{ float:left; width:100px; height:35px; text-align:center; line-height:35px; vertical-align:middle;}

.xiang:hover{ cursor:pointer}

.xuanxiang{ width:500px; height:300px; display:none}

#guonei{ background-color:#63C; display:block}

#guoji{ background-color:#3C9}

#tiyu{ background-color:#C36}

#yule{ background-color:#FF6}

</style>

</head>

<body>

<br />

<div id="fenlei">

    <div class="xiang" style="background-color:#63C" onclick="showa('guonei')">国内新闻</div>

    <div class="xiang" style="background-color:#3C9" onclick="showa('guoji')">国际新闻</div>

    <div class="xiang" style="background-color:#C36" onclick="showa('tiyu')">体育新闻</div>

    <div class="xiang" style="background-color:#FF6" onclick="showa('yule')">娱乐新闻</div>

</div>

<div id="guonei" class="xuanxiang">

</div>

<div id="guoji" class="xuanxiang">

</div>

<div id="tiyu" class="xuanxiang">

</div>

<div id="yule" class="xuanxiang">

</div>

<script type="text/javascript">

function showa(d)

{

    var div = document.getElementById(d);

    var suoyou = document.getElementsByClassName("xuanxiang");

    for(var i=0;i<suoyou.length;i++)

    {

        suoyou[i].style.display = "none";

    }

    div.style.display = "block";

}

</script>

</body>

</html>

点击触发信息（display=none）（display=block） 遍历清空

7.飞入飞出   position

<!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">

*{ margin:0px auto; padding:0px}

#tp{ width:900px; height:400px; overflow:hidden}

#img{ position:relative; }

</style>

</head>

<body>

<input type="button" value="飞入" onclick="feiru()" />

<input type="button" value="飞出" onclick="feichu()" />

<div id="tp">

    <img id="img" style="top:-400px; left:-900px" src="../../../晚上作业/ert.jpg" width="900" height="400px" />

</div>

<script type="text/javascript">

function feiru()

{

    fei();

}

function fei()

{

    var img = document.getElementById("img");

    var topstr = img.style.top;

    alert(topstr);

    var top = parseInt(topstr.substr(0,topstr.length-2))+4;

    img.style.top=top+"px";

    var leftstr = img.style.left;

    var left = parseInt(leftstr.substr(0,leftstr.length-2))+9;

    img.style.left = left+"px";

    if(top<-100)

    {

        window.setTimeout("fei()",10);

    }

    else if(top>=-100 && top<0)

    {

        window.setTimeout("fei()",30);

    }

}

</script>

</body>

</html>

截取字符串 转化为整型

8.滚动到指定位置

<!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">

*{ margin:0px auto; padding:0px}

</style>

</head>

<body>

<div style="width:100%; height:100px; background-color:#63F"></div>

<div id="menu" style="width:100%; height:50px; background-color:#F36;"></div>

<input type="button" value="滚动" onclick="gun()" />

<div style="width:100%; height:1000px; background-color:#FF6"></div>

</body>

<script type="text/javascript">

window.onscroll = function(){

        var d = document.getElementById("menu");

        if(window.scrollY >= 100)

        {

            d.style.position = "fixed";

            d.style.top = "0px";

        }

        else

        {

            d.style.position = "relative";

        }

    }

    function gun()

    {

        window.scrollTo(0,100);

    }

</script>

</html>

滚动下拉效果

9.选择框

<!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">

*{ margin:0px auto; padding:0px}

#wai{ width:150px; height:300px;}

.list{ width:150px; height:40px; background-color:#66F; text-align:center; line-height:40px; vertical-align:middle; color:white; border:1px solid white;}

.list:hover{ cursor:pointer; background-color:#F33}

</style>

</head>

<body>

<br />

<div id="wai">

    <div class="list" onclick="xuan(this)" onmouseover="bian(this)" onmouseout="huifu()">张三</div>

    <div class="list" onclick="xuan(this)" onmouseover="bian(this)" onmouseout="huifu()">李四</div>

    <div class="list" onclick="xuan(this)" onmouseover="bian(this)" onmouseout="huifu()">王五</div>

</div>

</body>

<script type="text/javascript">

function xuan(d)

{

    //清

    var list = document.getElementsByClassName("list");

    for(var i=0;i<list.length;i++)

    {

        list[i].removeAttribute("bs");

        list[i].style.backgroundColor = "#66F";

    }

    //选

    d.setAttribute("bs",1);

    d.style.backgroundColor = "#F33";

}

function bian(d)

{

    //清

    var list = document.getElementsByClassName("list");

    for(var i=0;i<list.length;i++)

    {

        if(list[i].getAttribute("bs")!="1")

        {

            list[i].style.backgroundColor = "#66F";

        }

    }

    //选

    d.style.backgroundColor = "#F33";

}

function huifu()

{

    var list = document.getElementsByClassName("list");

    for(var i=0;i<list.length;i++)

    {

        if(list[i].getAttribute("bs")!="1")

        {

            list[i].style.backgroundColor = "#66F";

        }

    }

}

</script>

</html>

选择

相关文章