慕课网

精品课程 JavaScript进阶篇

JavaScript进阶篇

最热最新

宝慕林6291606

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>实践题 - 选项卡</title>
    <style type="text/css">
     /* CSS样式制作 */  
    div{
        width:300px;
        margin:-1px;
        border:1px solid;
        display:none;
        padding:0px;
    }
    span{
        display:inline-block;
        border:1px solid;
        text-align:center;
        width:50px;
        height:25px;
        cursor:pointer;
        z-index:1;
    }   
       
    </style>
    <script type="text/javascript">
         
    // JS实现选项卡切换
    //event.stopPropagation();
    function displayCont(obj){
        var d=document.getElementById("divo");
        var d1=document.getElementById("div1");
        var d2=document.getElementById("div2");
        var d3=document.getElementById("div3");
        
        switch(obj.id){
            case "fangchan":
                d.innerHTML=d1.innerHTML;
                break;
            case "jiaju":
                d.innerHTML=d2.innerHTML;
                break;
            case "ershoufang":
                d.innerHTML=d3.innerHTML;
                break;
        }
        var a=document.getElementsByTagName("span");
        for(i=0;i<a.length;i++){
            a[i].style.borderTopColor="black"; 
            a[i].style.borderBottom="2px solid";
        }
        d.style.display="block";
        d.style.borderTopColor="red";
        obj.style.borderTopColor="red";
        obj.style.borderBottomColor="#fff";
    }
        //alert(d1.display);
        //obj.removeAttribute("style");
    </script>
 
</head>
<body>
<!-- HTML页面布局 -->
      <span id="fangchan" onclick="displayCont(this)">房产 </span>
      <span id="jiaju" onclick="displayCont(this)">家居 </span>
      <span id="ershoufang" onclick="displayCont(this)">二手房</span>
      
      <div id="divo">
          </br>
          </br>
          </br>
          </br>
      </div>      
      <div id="div1">
            275万购昌平邻铁三居 总价20万买一居</br>
            200万内购五环三居 140万安家东三环</br>
            北京首现零首付楼盘 53万购东5环50平</br> 
            京楼盘直降5000 中信府 公园楼王现房</br>
      </div>
      <div id="div2">
            40平出租屋大改造 美少女的混搭小窝</br>
            经典清新简欧爱家 90平老房焕发新生</br>
            新中式的酷色温情 66平撞色活泼家居</br> 
            瓷砖就像选好老婆 卫生间烟道的设计</br>
      </div>
      <div id="div3">
            通州豪华3居260万 二环稀缺2居250w甩</br>
            西3环通透2居290万 130万2居限量抢购</br>
            黄城根小学学区仅260万 121平70万抛!</br> 
            独家别墅280万 苏州桥2居优惠价248万</br>
      </div>     
 
</body>
</html>

终于完成了，总结一下：

1、css布局不熟练，需要多练习

2、margin：0 两个框之间的线并不是重合的，会是下面紧挨着的，想要span框覆盖div框，设置div的margin:-1px。

3、这种写法只适用于内容很少的页面，如果很多，不建议。

查看全部

0 采集收起来源：编程挑战

2018-12-24

慕仰2221259

使用while语句,在continue的情况下：本次循环document.write();以及i++都将被跳过，那么在此题中i=4时将无限循环

查看全部

0 采集收起来源：继续循环continue
2018-12-23
慕仰2221259

for循环本身有个条件判断
比如for(int i=0;i<=5;i++){ 循环体 }
它的执行过程是：
第一步：i=0;
第二步：判断i是否<=5;条件为真，进入第三步。条件为假进入第五步
第三步：执行循环体。
第四步：循环体执行完后，再执行for语里的 i++；然后再回到第二步进行判断，以此类推
第五步：退出for循环
while语句用continue会卡死崩溃
当num=5时，用continue 跳出了本次循环时绕过了num++ ，执行下一次循环的时num依然还是5。于是又继续continue，所以才形成了死循环。

查看全部

0 采集收起来源：继续循环continue
2018-12-23
慕少0282025

使用location.assign()方法在括号内输入的url应该加上http://而不是直接输入网址。

查看全部

0 采集收起来源：编程练习
2018-12-23
慕少0282025
screen对象用于获取用户的屏幕信息。
语法：
```
window.screen.属性
```
对象属性:
查看全部

0 采集收起来源：screen对象
2018-12-23
慕运维7309995

<script type="text/javascript">
var lie=document.createElement("p")
lie.className="message"
var text=document.createTextNode("I love JavaScript!")
lie.appendChild(text)
document.body.appendChild(lie)
</script>

查看全部

0 采集收起来源：创建文本节点createTextNode
2018-12-23
慕运维7309995

<a href="javascript:replaceMessage()"> 将加粗改为斜体</a>

查看全部

0 采集收起来源：替换元素节点replaceChild()
2018-12-23

慕少0282025

对象属性:

查看浏览器的名称和版本，代码如下:

<script type="text/javascript">
   var browser=navigator.appName;
   var b_version=navigator.appVersion;
   document.write("Browser name"+browser);
   document.write("<br>");
   document.write("Browser version"+b_version);</script>

查看全部

0 采集收起来源：Navigator对象

2018-12-23

royal_98K

propertyName:属性名
methodName():方法名

查看全部

0 采集收起来源：什么是对象
2018-12-23
慕少0282025
语法:
```
location.[属性|方法]
```
location对象属性图示:
location 对象属性：
location 对象方法:
查看全部

0 采集收起来源：Location对象
2018-12-23
qq_修心_acEX06

var myarr=new Array(); //定义数组

查看全部

0 采集收起来源：一起组团（什么是数组）
2018-12-23

i子闲

switch(表达式){case值1:
  执行代码块 1  break;case值2:
  执行代码块 2  break;...case值n:
  执行代码块 n  break;default:
  与 case值1 、 case值2...case值n 不同时执行的代码
}

没有break停止语句，后面的语句将会得到执行.

查看全部

0 采集收起来源：多种选择（Switch语句)

2018-12-23

royal_98K

parseInt()是window对象的一个方法，主要是用来把各数据类型转化为十进制整数数字。语法:parseInt(数值,（进制）)，其中第一个参数为数值可以是任意类型值如果不能转化为十进制的就会返回NaN，进制是可选的，默认的为十进制

查看全部

0 采集收起来源：编程练习
2018-12-22
慕运维7309995

<script type="text/javascript">
function clearText() {
var conten=document.getElementById("content");
var zisun=conten.childNodes
var i=0
// 在此完成该函数
for(i=0;i<zisun.length;i++)
{
conten.removeChild(zisun[i])
}
}
</script>
这样不能一次性清除完，因为删除之后，序号会变化，改成i--会比较好

查看全部

0 采集收起来源：删除节点removeChild()
2018-12-22

慕桂英4076000

var num=0;  //初始化值while (num<=6)   //条件判断{
  document.write("取出第"+num+"个球<br />");
  num=num+1;  //条件值更新}

查看全部

0 采集收起来源：反反复复(while循环)

2018-12-22

首页上一页 498 499 500 501 502 503 504 下一页尾页

0/150

提交

取消

开始学习

课程须知: 你需要具备HTML、css基础知识，建议同学们也可以想学习下js入门篇，快速认识js，熟悉js基本语法，更加快速入手进阶篇！

老师告诉你能学到什么？: 通过JavaScript学习，掌握基本语法，制作简单交互式页面