javascript-第八节-DOM对象实例集合
2016-06-14 08:52
579 查看
作业一、
在HTML中添加3个对象
1.按钮 显示
2.按钮 隐藏
3.DIV
当点击显示时候
div显示
当点击隐藏
div隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div显示隐藏</title>
<style>
#con{
background-color:deeppink;
width:300px;
height:200px;
}
</style>
</head>
<body>
<input type="button" value="显示" id="show">
<input type="button" value="隐藏" id="noshow"><br/>
<div id="con"></div>
<script>
var show=document.getElementById("con");
document.getElementById("show").onclick=function(){
show.style.display="block";
}
document.getElementById("noshow").onclick=function(){
show.style.display="none";
}
</script>
</body>
</html>
作业二：
实现一个Tab选项卡的效果
点击不同的，内容进行切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.nav ul li {
float: left;
width: 100px;
height: 50px;
border: 1px solid #8a6263;
line-height: 50px;
background: #78c3b5;
text-align: center;
cursor: pointer;
color: #fff;
}
.nav ul li a {
text-decoration: none;
}
.nav ul li.navNow{
color: #333;
background:#e1c987;
}
.navshow div {
clear: both;
width: 508px;
height: 200px;
border: 1px solid #7b5255;
display: none;
}
</style>
</head>
<body>
<div class="nav" id="nav">
<ul>
<li onclick="fun('0')" class="navNow">首页</li>
<li onclick="fun('1')">关于我们</li>
<li onclick="fun('2')">新闻中心</li>
<li onclick="fun('3')">通知公告</li>
<li onclick="fun('4')">联系我们</li>
</ul>
</div>
<div class="navshow" id="navshow">
<div style="display: block">首页：内容</div>
<div>关于我们：内容</div>
<div>新闻中心：内容</div>
<div>通知公告：内容</div>
<div>联系我们：内容</div>
</div>
<script>
//获取整个li，getElementsByTagName为数组
var nav = document.getElementById("nav").getElementsByTagName("li");
var navshow=document.getElementById("navshow").getElementsByTagName("div");
function fun(num) {
for (var n = 0; n < nav.length; n++) {
nav[n].style.color="white";
nav[n].style.background="#78c3b5";
}
nav[num].style.color="#333";
nav[num].style.background="#e1c987";
//查询所有的div
for(var n=0;n<navshow.length;n++){
navshow[n].style.display="none";
}
navshow[num].style.display="block";
}
</script>
</body>
</html>
作业三：
——列表的不断扩展
在一个页面中显示一个列表
显示20个列表条目
在列表条目下面增加
列表条目 加载更多
点击加载更多以后
列表再增加20个条目
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>加载更多</title>
<style type="text/css">
h1{
color: #333;
width: 100%;
text-align: center;
}
ul{
margin: 0;
padding:0;
width:100%;
text-align: center;
}
ul li{
width: 100%;
height: 50px;
border: 1px solid #7b5255;
background: #78c3b5;
line-height: 50px;
list-style: none;
}
</style>
</head>
<body>
<h1>手机站加载更多</h1>
<div class="nav" >
<ul id="nav">
<!--<li>菜单1</li>-->
<!--<li>菜单2</li>-->
<!--<li>菜单3</li>-->
<!--<li>菜单4</li>-->
</ul>
</div>
<script>
var nav = document.getElementById("nav");
for (var n = 0; n < 10; n++) {
var li=document.createElement("li");
li.innerHTML="菜单"+n;
nav.appendChild(li);
}
//添加“加载更多”li
var more=document.createElement("li");
more.innerHTML="加载更多";
nav.appendChild(more);
//更多添加点击方法
more.onclick=function(){
//从ul中移除
nav.removeChild(more);
//继续从n开始,所以重新定义
for (var m = 0; m < 10; m++) {
var li=document.createElement("li");
li.innerHTML="菜单"+n;
nav.appendChild(li);
n++;
}
//重新在最底部添加上li的“加载更多”
nav.appendChild(more);
}
</script>
</body>
</html>
作业四：
将菜品列表和tab选项卡合并
实现一个手机微信的效果，将加载更多放到列表的上方
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡+加载更多</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.nav ul li {
float: left;
width: 100px;
height: 50px;
border: 1px solid #8a6263;
line-height: 50px;
background: #78c3b5;
text-align: center;
cursor: pointer;
color: #fff;
}
.nav ul li a {
text-decoration: none;
}
.nav ul li.navNow{
color: #333;
background:#e1c987;
}
.navshow div {
clear: both;
width: 508px;
border: 1px solid #7b5255;
display: none;
}
h1{
color: #333;
width: 100%;
text-align: center;
}
.ullist ul{
margin: 0;
padding:0;
width:100%;
text-align: center;
}
.ullist ul li{
width: 100%;
height: 50px;
border: 1px solid #7b5255;
background: #78c3b5;
line-height: 50px;
list-style: none;
}
</style>
</head>
<body>
<div class="nav" id="nav">
<ul>
<li onclick="fun('0')" class="navNow">首页</li>
<li onclick="fun('1')">关于我们</li>
<li onclick="fun('2')">新闻中心</li>
<li onclick="fun('3')">通知公告</li>
<li onclick="fun('4')">联系我们</li>
</ul>
</div>
<div class="navshow" id="navshow">
<div style="display: block">首页：内容</div>
<div>关于我们：内容</div>
<div>新闻中心：内容</div>
<div>通知公告：内容</div>
<div class="ullist">
<h1>手机站加载更多</h1>
<ul id="ul">
</ul>
</div>
</div>
<script>
//获取整个li，getElementsByTagName为数组
var nav = document.getElementById("nav").getElementsByTagName("li");
var navshow=document.getElementById("navshow").getElementsByTagName("div");
function fun(num) {
for (var n = 0; n < nav.length; n++) {
nav[n].style.color="white";
nav[n].style.background="#78c3b5";
}
nav[num].style.color="#333";
nav[num].style.background="#e1c987";
//查询所有的div
for(var n=0;n<navshow.length;n++){
navshow[n].style.display="none";
}
navshow[num].style.display="block";
}
var ul = document.getElementById("ul");
for (var n = 0; n < 10; n++) {
var li=document.createElement("li");
li.innerHTML="菜单"+n;
ul.appendChild(li);
}
//添加“加载更多”li
var more=document.createElement("li");
more.innerHTML="加载更多";
ul.appendChild(more);
//更多添加点击方法
more.onclick=function(){
//从ul中移除
ul.removeChild(more);
//继续从n开始,所以重新定义
for (var m = 0; m < 10; m++) {
var li=document.createElement("li");
li.innerHTML="菜单"+n;
ul.appendChild(li);
n++;
}
//重新在最底部添加上li的“加载更多”
ul.appendChild(more);
}
</script>
</body>
</html>
作业五：
淘宝搜索选项卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>淘宝搜索框</title>
<style>
ul{
margin: 0;
padding: 0;
float: left;
width: 150px;
list-style: none;
}
ul li{
float: left;
width: 50px;
height: 25px;
text-align: center;
line-height: 25px;
cursor: pointer;
font-size: 13px;
color: #FF5400;
}
.navNow{
color:#fff;
background: #FF5400;
}
.navshow div{
clear: both;
display: none;
}
input{
height: 34px;
width: 347px;
border: 2px solid #FF5400;
}
</style>
</head>
<body>
<div class="nav">
<ul id="nav">
<li onclick="fun('0')" class="navNow">宝贝</li>
<li onclick="fun('1')">天猫</li>
<li onclick="fun('2')">店铺</li>
</ul>
</div>
<div class="navshow" id="navshow">
<div style="display: block;"><input type="text" value=" 宝贝"></div>
<div><input type="text" value=" 天猫" ></div>
<div><input type="text" value=" 店铺"></div>
</div>
<script>
//
var nav=document.getElementById("nav").getElementsByTagName("li");
var navshow=document.getElementById("navshow").getElementsByTagName("div");
function fun(num) {
for (var n=0;n<nav.length;n++) {
nav[n].style.color="#FF5400";
nav[n].style.background="#fff";
}
nav[num].style.color = "#fff";
nav[num].style.background = "#FF5400";
for(var n=0;n<navshow.length;n++){
navshow[n].style.display="none";
}
navshow[num].style.display="block";
}
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- javascript-第七节-JS面向对象、其他定义类和对
- Minimum Depth of Binary Tree - Javascript
- JS设计模式之迭代器模式
- Path Sum
- JS入门系列(1)-原型-函数原型
- Palindrome Number
- Pascal's Triangle II
- Binary Tree Level Order Tranversal
- Remove Duplicates from Sorted Array
- Pascal's Triangle
- Power of Four
- Plus One
- [Javascript] Decorators in JavaScript
- seaJS 简要介绍和完整例子
- 排序__js
- 第二章 JavaScript语法·
- 第一章 JavaScript简史
- Javascript基础知识
- JavaScript 实现简单的神经网络算法
- js数组