项目4-web实战上机-11月5号


项目4-web实战上机-11月5号

1.js的数据类型

1.1基本数据类型

var num=1;
var str = "heoll";
var flag = true; //逻辑类型 布尔

1.2特殊类型

var emp =null; //空
var ind = undefined;  //没定义

1.3复杂类型

function testOne() {
  // alert("hhhhh");
   console.log("testOne");
  }
var arr = ["1","2","3"];
var arr2 = new Array(); //数组类型
//数据库的类型是Json
var json = {"username":"花花","age":23,"sex":"男"}  //json
var obj = {username:"李四",age:22,sex:"男"};  //对象
console.log(obj.username);
console.log(json.username);

1.4注释语句

//html: <!-- -->
//css: /*  */
//js: /*   */  或者  //

1.5数据类型的转化

//自动转换,语句中存在加号'+',运算符,会把对应的num类型转换成字符串
var x = "15" + 5 ;
console.log(x);  // 输出155 ,自动拼接
var y = "15" -5 ;   // (* / +)除+号以外
console.log(y);  //10
//强制转换
var z = eval("15") +5 ;  //15强制转换成number类型
var z1 = parseInt("15") + 5 ;  //parseInt parseFloat  eval
console.log(z1);
console.log(z);  //20

2.小案例-利用浏览器处理web界面

2.1代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <img src="imgs/open.jpg" id="ph">
    <button onclick="openLogo()">开机</button>
    <button onclick="closeLogo()">关机</button>
<script>
    function openLogo() {
        var ph = window.document.getElementById("ph"); //默认省略windoes对象
        // var btn = document.getElementsByTagName("button");
        // btn[0];
        ph.setAttribute("src","imgs/open.jpg");

    }
    function closeLogo() {
        var ph = document.getElementById("ph");
        // var btn = document.getElementsByTagName("button");
        // btn[0];
        ph.setAttribute("src","imgs/close.jpg");
    }
</script>
</body>
</html>

2.2效果演示

开机关机

3.给导航菜单添加下拉菜单

3.1html核心代码

             <div class="col-md-4 col-md-offset-3" id="siteNav"><ul class="nav nav-pills                                 navbar-right">
                <li role="presentation"  class="navTitle" id="menu" onmouseover="fun1()"                                     onmouseout="fun2()"><a>我的MobileShop<i class="downUp"></i></a>
                    <ul class="siteNavPanel" id="menuContent">
                        <li><a href="#">待付款订单</a></li>
                        <li><a href="#">待发货</a></li>
                        <li><a href="#">已发货</a></li>
                    </ul>
                </li>
                <li role="presentation"><a>购物车</a></li>
                <li role="presentation"><a>收藏夹</a></li>
                <li role="presentation"><a>商品分类</a></li>
            </ul>
            </div>

3.2css核心代码

var menu = document.getElementById("menu");
var menuContent = document.getElementById("menuContent");
function fun1() {
    //鼠标移入的时候显示二级菜单
    menuContent.style.display = "block";
    menu.setAttribute("class","navTitle current");
}
function fun2() {
    //鼠标移出去隐藏下拉菜单
    menuContent.style.display = "none";
    menu.setAttribute("class","navTitle");
}

3.3js核心代码

var menu = document.getElementById("menu");
var menuContent = document.getElementById("menuContent");
function fun1() {
    //鼠标移入的时候显示二级菜单
    menuContent.style.display = "block";
    menu.setAttribute("class","navTitle current");
}
function fun2() {
    //鼠标移出去隐藏下拉菜单
    menuContent.style.display = "none";
    menu.setAttribute("class","navTitle");
}

3.4实现效果

悬停效果

鼠标离开效果


文章作者: 孙昀
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 孙昀 !
评论
  目录