项目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() {
console.log("testOne");
}
var arr = ["1","2","3"];
var arr2 = new Array();
var json = {"username":"花花","age":23,"sex":"男"}
var obj = {username:"李四",age:22,sex:"男"};
console.log(obj.username);
console.log(json.username);
1.4注释语句
或者
1.5数据类型的转化
var x = "15" + 5 ;
console.log(x);
var y = "15" -5 ;
console.log(y);
var z = eval("15") +5 ;
var z1 = parseInt("15") + 5 ;
console.log(z1);
console.log(z);
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");
ph.setAttribute("src","imgs/open.jpg");
}
function closeLogo() {
var ph = document.getElementById("ph");
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实现效果