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>
选择

 

posted @ 2016-11-18 09:37  get("新技能")  阅读(222)  评论(1)  编辑  收藏  举报