文章目录
javaScript项目案例
储备知识,感觉玩dom主要是玩document这个类
1.Dom操作
在js中所有标签都属于节点。dom是一个倒着的树,树根为html标签
创建节点
createElement()
:传入标签类型,创建一个结点
示例:var oP = document.createElement('p');
获取节点
这些都是位于document的方法
函数 | 功能 |
---|---|
getElementById() | 通过标签id获得节点 |
getElementByClassName() | 通过标签class名获得节点(注意:获得的class数组) |
getElementByTagName() | 通过标签类型获得节点(注意:获得的是标签数组) |
常用的节点方法
这个都是节点的方法
函数 | 功能 | 示例 |
---|---|---|
appendChild() | 将传入节点加入到标签中 | oDiv.appendChild('oP'); |
getAttribute() | 获取标签属性 | oA.getAttribute('href'); |
setAttribute() | 设置标签属性 | oA.setAttribute('href','https://www.baidu.com'); |
removeAttribute() | 删除标签属性 | oA.removeAttribute('href'); |
removeChild() | 删除节点下的标签 | oDiv.removeChild(oP); |
设置节点内容
innerHTML
:将内容解析HTML脚本写入标签内
示例:oP.innerHTML = i <strong>love</strong> you
innerText
:将内容以文本的形式写入标签内
示例:oP.innerHTML = i love you
注意:innerHTML
可以解析标签,innerText
将内容原封不动的填入标签内
设置元素id:oP.id='op1';
设置类名class:oP.className='para1';
设置style属性
示例:oP.style.backgroundColor = 'blue';
注意:style属性内的用-表示的,在js中全部变为驼峰式写法,而且设置属性要用引号引起来
例如设置字体大小
在css中:font-size = 16px;
在js中:oP.style.fontSize = '16px';
2.项目案例
2.1用js在网页上写一个hello world
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>写一个hello world</title>
</head>
<body>
</body>
<script type="text/javascript">
var oP = document.createElement('p');
var body = document.getElementsByTagName('body');
oP.innerHTML = 'hello world';
body[0].appendChild(oP);
</script>
</html>
2.2模态框案例
其实,就是运用btn.onclick
将单击事件的函数改为新的匿名函数。单击一次,就调用一次对象下面的onclick
方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模态框案例</title>
<style type="text/css">
*{
padding: 0;
margin:0;
}
html,body{
height: 100%;
}
#wrapper{
width:100%;
height: 100%;
background-color: rgba(0,0,0,.3);
}
#p1{
position: relative;
top:150px;
width:400px;
height: 200px;
text-align: center;
line-height: 200px;
margin:auto;
background-color: white;
}
#span1{
position: absolute;
right: 0;
top:0;
width: 30px;
height: 30px;
font-size: 20px;
line-height: 30px;
text-align: center;
color: #ffffff;
background-color: red;
}
</style>
</head>
<body>
<button id="btn">点我一下</button>
</body>
<script type="text/javascript">
/*思路:
* 1.创建一个div盒子,设置好属性
* 2.添加p标签和span标签,分别设置好位置,分别插入到div标签里
* 3.定义button单击事件
* */
var oDiv = document.createElement('div'); //创建一个盒子
var oP = document.createElement('p');
var oSpan = document.createElement('span');
var btn = document.getElementById('btn');
var body = document.getElementsByTagName('body');
btn.onclick = function () {
oP.innerText = 'This is True music';
oSpan.innerText = 'X';
oDiv.appendChild(oP);
oP.appendChild(oSpan);
oDiv.id = 'wrapper';
oP.id = 'p1';
oSpan.id = 'span1';
body[0].insertBefore(oDiv,btn);
}
oSpan.onclick = function(){
body[0].removeChild(oDiv);
}
</script>
</html>
2.3点击有惊喜
这个例子,主要就是用计数器记录点击次数,每点击一次标签,就会调用一次该函数,计数器加1,从而控制标签颜色和文字。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点击有惊喜呦</title>
<style type="text/css">
*{
padding:0;
margin: 0;
}
#surprised{
width:400px;
height: 200px;
font-size: 30px;
text-align: center;
line-height: 200px;
margin: 20px auto;
color: white;
background-color: blue;
}
</style>
</head>
<body>
<div id="surprised">
点击有惊喜呦!!!
</div>
</body>
<script type="text/javascript">
var oDiv = document.getElementById('surprised');
var clickTimer = 0;
oDiv.onclick = function () {
switch(clickTimer % 4){
case 1:
this.style.backgroundColor = 'green'; //this在这里就是指当点击事件的对象oDiv
this.innerText = '再次点击试试';
break;
case 2:
this.style.backgroundColor = 'orange';
this.innerText = '哈哈,骗你的';
break;
case 3:
this.style.backgroundColor = 'red';
this.innerText = '真的没了!!!';
break;
default:
this.style.backgroundColor = 'blue';
this.innerText = '点击有惊喜呦!!!';
}
clickTimer++;
}
</script>
</html>
2.4制作一个简易留言板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>留言板</title>
<style type="text/css">
</style>
</head>
<body>
<h1>简易留言板</h1>
<div class="wrapper">
<ul id="words"></ul>
</div>
<textarea id="msg"></textarea>
<button id="btn1">留言</button>
<button id="btn2" onclick="sum()">统计</button>
</body>
<script type="text/javascript">
//ul 是用来存储留言记录
var ul = document.getElementById('words');
var msg = document.getElementById('msg');
var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
var liCount = 0; //用来记录留言数目的
btn1.onclick = function () {
if(!msg.value){
alert('留言板里没有内容')
}else{
/*将留言插入顶部的具体方法
*1.判断ul中有无元素,没有则使用append,有则使用insertbefore
* 2.插入信息同时插入一个span标签,用来设置关闭按钮
* */
var li = document.createElement('li');
li.innerHTML = msg.value + ' <span>X</span>';
if(liCount == 0)
{
ul.appendChild(li);
liCount++;
}else{
ul.insertBefore(li,ul.childNodes[0]);
liCount++;
}
msg.value = '';
}
oSpans = document.getElementsByTagName('span');
for(var i = 0;i < oSpans.length;i++){
oSpans[i].onclick = function(){
ul.removeChild(this.parentNode);
liCount--;
}
}
};
function sum() {
alert('一共有'+liCount+'条信息');
}
</script>
</html>
通过这个简易留言板例子,
第一,不要取消margin,padding,否则h1标题没有内边距,很难看;
第二,设置span标签点击事件必须在btn1按钮内,因为js里面代码是从上向下执行的,btn.onclick就是添加调用方法;如果直接把span这段代码放在下面,因为刚开始没有spans标签,也就没有执行这段代码。要是放在btn的onclick里面,每次调用时,就会自动给每个span添加一个调用方法
2.5制作选项卡
这个例子主要是用了,将三个p标签隐藏起来,只显示含active类的标签,通过js点击事件,切换p标签之间的显隐达到目的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
body{
height: 100%;
}
.wrapper{
width: 600px;
border: 1px solid red;
margin: 30px auto;
}
ul{
list-style: none;
overflow: hidden; /*注意要清除浮动*/
}
ul a{
display: block;
text-decoration: none;
width:200px;
height: 50px;
text-align: center;
line-height: 50px;
color: black;
}
ul li{
float: left;
background-color: rgba(0,0,0,.3);
}
p{
width: 600px;
height: 150px;
line-height: 150px;
text-align: center;
display: none;
}
ul li.active{
background-color: #ffffff;
}
p.active{
display: block;
}
</style>
</head>
<body>
<div class="wrapper">
<ul>
<li class="active"><a href="#" >首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">热卖</a></li>
</ul>
<p id="home" class="active">首页内容</p>
<p id="news">新闻内容</p>
<p id="hotPurchase">热卖内容</p>
</div>
</body>
<script type="text/javascript">
var lis = document.getElementsByTagName('li');
var ps = document.getElementsByTagName('p');
for(var i = 0;i < lis.length;i++){
lis[i].index = i; //这个用来记录每个标签的遍历位置,不用this,这里this指代的应该是window
lis[i].onclick = function () {
/*思路
* 1.清除所有标签上的active
* 2.将单击的li和p标签都添加active属性
* */
//清空class
for(var j = 0;j < lis.length;j++){
lis[j].className = '';
ps[j].className = '';
}
//注意:这有个坑,不能跳!!!不能用遍历的i,要用this下的属性index
this.className = 'active';
ps[this.index].className = 'active';
}
}
</script>
</html>
这里要注意,在378行不能用i来代表标签的索引,(因为i的值在不断变化,遍历结束时,这里i最终值为4,即当触发单击事件时,获取的i的值为4,而不是当初遍历中i的值)。他们得到i都是引用哦,不是一个纯数字。
2.6淘宝搜索框制作
这个例子主要用到了input
和label
两个标签,以及js的oninput
来实现的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>淘宝搜索框</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.wrapper{
width: 800px;
margin: 30px auto;
}
ul{
list-style: none;
overflow: hidden;
}
ul li{
float: left;
width: 150px;
height: 50px;
line-height: 50px;
text-align: center;
background-color: #fff;
}
li a{
text-decoration: none;
color: red;
}
li.active{
background-color: red;
}
li.active a{
color: #ffffff;
}
.search{
margin: 20px 0;
position: relative;
}
#txt{
display: block;
outline: none;
width: 800px;
height: 50px;
position: absolute;
border:3px solid orange;
border-radius: 10px;
}
#lab{
display: block;
position: absolute;
top:15px;
left:30px;
font-size: 20px;
color: rgba(0,0,0,.5);
}
</style>
</head>
<body>
<div class="wrapper">
<ul>
<li class="active"><a href="#">宝贝</a></li>
<li><a href="#">天猫</a></li>
<li><a href="#">店铺</a></li>
</ul>
<div class="search">
<input type="text" id="txt">
<label for="txt" id="lab">请输入要购买的商品</label>
</div>
</div>
</body>
<script type="text/javascript">
var lis = document.getElementsByTagName('li');
for(var i = 0;i < lis.length;i++){
lis[i].onclick = function () {
for(var j = 0;j < lis.length;j++){
lis[j].className = '';
}
this.className = 'active';
}
}
var txt = document.getElementById('txt');
var lab = document.getElementById('lab');
//oninput函数功能是,当点击输入框时触发的事件
txt.oninput = function () {
if(this.value == ''){ //这里this指代的是txt
lab.style.display = 'block';
}
else
{
lab.style.display = 'none';
}
}
</script>
</html>
刚开始,测试时候,发现输入框无法输入;后来仔细检查了一遍,发现his.value == ''写成了his.value = ‘’,导致每次输入时,都会给输入框自动赋值空字符
2.7动态时间制作
这里主要用了setInterval
定时器函数,每隔一秒执行一次函数,这个函数作用是获得最新时间,写入p
标签中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态时间制作</title>
</head>
<body>
</body>
<script type="text/javascript">
var oP = document.createElement('p');
var body = document.getElementsByTagName('body');
body[0].appendChild(oP);
//创建一个时间对象,得到年月日,时分秒
setInterval(function(){
var myDate = new Date();
var weekday = '天一二三四五六';
var y = myDate.getFullYear();
var m = myDate.getMonth() + 1;
var d = myDate.getDate(); // 获取当前是每个月的第几天
var wday = myDate.getDay(); // 周天为0,周一为1,周二为2.以此类推;
var h = myDate.getHours();
var minu =myDate.getMinutes();
var s = myDate.getSeconds();
oP.innerHTML = '今天是 '+ y +' 年 '+m+' 月 '+d+' 日 星期'+ weekday[wday] +' 现在时间:' + h +':'+twoNum(minu)+':'+twoNum(s);
},1000);
function twoNum(n){
return n > 9 ? n:'0'+n;
}
</script>
</html>
注意:获得时间的操作必须写在函数内,否则该变量的值不会更新,只会一直重复写入相同的值
三元表达式
return n > 9 ? n:'0'+n;
等同于
if(n < 9)
{
return '0'+ n;
}
else {
return n;
}
2.8匀速运动
通过定时器函数setInterval
函数和清除定时器函数clearInterval
。两个函数实现的,主要思想时,每执行一次定时器,改变一次left
数字达到看上去小方块在移动的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>匀速运动案例</title>
<style type="text/css">
#diamond{
width:100px;
height: 100px;
background-color: red;
position: absolute;
left: 0px;
top:50px;
}
</style>
</head>
<body>
<button id="btn">运动吧!小方块</button>
<div id="diamond"></div>
</body>
<script type="text/javascript">
var btn = document.getElementById('btn');
var dia = document.getElementById('diamond');
var count = 0;
btn.onclick = function () {
time = setInterval(function(){
//注意这里要带单位px
count += 10;
if(count % 800 == 0){
count = 0;
clearInterval(time); //运动到800px关闭定时器
}
dia.style.left = count + 'px';
},10)
};
</script>
</html>
注意:clearInterval
清除定时器函数必须要接受一个值,这个值正是定时器返回的值,count += 10
这行代码可以通过改变右值改变小方块运动速度。
2.9设置五秒关闭广告
这个例子主要用了定时器,和固定定位相关的知识,5s秒后自动关闭广告。window.onload
这个函数的功能是,加载页面时自动运行相应的函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>设置5s关闭广告</title>
<style type="text/css">
img{
width: 200px;
height: 800px;
position: fixed;
top: 0;
}
#pict1{
right: 0;
}
#pict2{
left: 0;
}
p{
font-size: 30px;
}
</style>
</head>
<body>
<div class="wrapper">
<img src="ad-one.jpg" alt="" id="pict1">
<img src="ad-two.jpg" alt="" id="pict2">
</div>
<p>性感美女,在线发牌</p>
<p>性感美女,在线发牌</p>
<p>性感美女,在线发牌</p>
<p>性感美女,在线发牌</p>
<p>性感美女,在线发牌</p>
<p>性感美女,在线发牌</p>
<p>性感美女,在线发牌</p>
<p>性感美女,在线发牌</p>
<p>性感美女,在线发牌</p>
<p>性感美女,在线发牌</p>
</body>
<script type="text/javascript">
window.onload = function(){
var imgs = document.getElementsByTagName('img');
setTimeout(function () {
imgs[0].style.display = 'none';
imgs[1].style.display = 'none';
},5000)
};
</script>
</html>
难度不大,之后写了个升级版
2.10设置五秒关闭广告(升级版)
设置一个定时器,在网页上显示倒计时后,再显示关闭x,设定单击事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>设置5s关闭广告</title>
<style type="text/css">
img{
width: 200px;
height: 800px;
position: fixed;
top: 0;
}
/*.pict{*/
/*position: relative;*/
/*}*/
.pict1{
top: 0;
left: 0;
}
.pict2{
top: 0;
right: 0;
}
p{
text-align: center;
font-size: 30px;
}
span{
position: fixed;
display: block;
width: 50px;
height: 50px;
text-align: center;
;line-height: 50px;
background-color:rgba(0,0,0,.5);
z-index: 10;
color: #ffffff;
}
.span2{
top:750px;
right: 150px;
}
.span1{
top:750px;
left: 150px;
}
</style>
</head>
<body>
<div class="pict">
<span class="span1"></span>
<img class="pict1" src="ad-one.jpg" alt="">
</div>
<div class="pict">
<span class="span2"></span>
<img class="pict2" src="ad-two.jpg" alt="">
</div>
<p>性感美女,在线发牌</p>
<p>性感美女,在线发牌</p>
<p>性感美女,在线发牌</p>
<p>性感美女,在线发牌</p>
<p>性感美女,在线发牌</p>
<p>性感美女,在线发牌</p>
<p>性感美女,在线发牌</p>
<p>性感美女,在线发牌</p>
<p>性感美女,在线发牌</p>
<p>性感美女,在线发牌</p>
<p>性感美女,在线发牌</p>
<p>性感美女,在线发牌</p>
<p>性感美女,在线发牌</p>
</body>
<script type="text/javascript">
window.onload = function(){
var picts = document.getElementsByClassName('pict');
var spans = document.getElementsByTagName('span');
var count = 5;
time = setInterval(function(){
if(count == 0){
for(var i = 0;i < spans.length;i++)
{
spans[i].index = i;
spans[i].innerText = 'X';
spans[i].onclick = function(){
picts[this.index].style.display = 'none';
};
}
clearInterval(time);
}
else{
spans[0].innerText = count;
spans[1].innerText = count;
count -= 1;
}
},1000);
};
</script>
</html>
这里主要注意的地方是,在for
循环中如果要设置单击事件,不要用i
做索引,所有单击事件中的i
是for
循环后的值,而不是每次循环的值。
2.11小米滚动
这里主要用overflow
用来隐藏图片超过盒子部分。然后通过定位,控制top
坐标数值,使其在盒子里垂直移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小米滚动</title>
<style type="text/css">
#box{
position: relative;
margin: 50px auto;
width: 890px;
height: 400px;
overflow: hidden;
}
img{
position: absolute;
}
span{
position: absolute;
display: block;
width: 890px;
height: 200px;
background-color: transparent;
}
#upSpan{
top:0;
}
#downSpan{
bottom:0;
}
</style>
</head>
<body>
<div id="box">
<img src="ad-one.jpg" alt="" id="img1">
<span id="upSpan"></span>
<span id="downSpan"></span>
</div>
</body>
<script type="text/javascript">
var downSpan = document.getElementById('downSpan');
var upSpan = document.getElementById('upSpan');
var img = document.getElementById('img1');
var count = 0;
var time = null; //注意time要声明变量
//这个upSpan标签在图片上,让图片向上滚动,top越来越小
upSpan.onmouseover = function(){
clearInterval(time);
time = setInterval(
function(){
count -= 3;// 1334-400 top比最低端的-934px大,就可以继续减小,直到底部
count >= -934 ? img.style.top = count + 'px':clearInterval(time);
}
,30)
};
//这个downSpan标签在图片下面,让图片向下滚动,top越来越大
downSpan.onmouseover = function(){
clearInterval(time); //注意,这里必须要清空定时器,否则两个定时器一起运行会引起冲突
time = setInterval(
function(){
count += 3;
//向下滚,top数值越来越大,直到最顶端0
count < 0 ? img.style.top = count + 'px':clearInterval(time);
}
,30)
};
</script>
</html>
这里注意的地方是,每次调用onmouseover
时,要清除之前的定时器,防止干扰下次操作。而且图片移动到顶端和低端,要注意好终止坐标的位置。
2.12无缝轮播图
这个案例主要运用盒子和ul
之间定位,通过定时器,让标签left
坐标不断减小,达到ul
向左移动的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无缝轮播图</title>
<style type="text/css">
*{
padding:0;
margin: 0;
}
.wrapper{
position: relative;
width: 800px;
height: 300px;
margin:40px auto;
background-color: red;
overflow: hidden;
}
ul{
width: 200%;
position: absolute;
top:0;
left: 0;
list-style: none;
}
ul li{
float: left;
}
img{
height: 300px;
width: 400px;
}
</style>
</head>
<body>
<div class="wrapper">
<ul id="picts">
<li><img src="ad-one.jpg" alt=""></li>
<li><img src="ad-two.jpg" alt=""></li>
<li><img src="ad-three.jpg" alt=""></li>
<li><img src="ad-four.jpg" alt=""></li>
</ul>
</div>
</body>
<script type="text/javascript">
var ul = document.getElementById('picts');
var count = 0;
var time = null;
function pictureMove(){
count -= 1;
if(count <= -800){
count = 0;
}
ul.style.left = count + 'px';
}
time = setInterval(pictureMove,10);
ul.onmousemove = function(){
clearInterval(time);
};
ul.onmouseout = function () {
time = setInterval(pictureMove,10);
}
</script>
</html>
这里有几个注意点是,ul
标签宽度肯定要比盒子宽,这样可以使里面所有li
标签浮动时,不会有li
标签被挤到下一层去。onmousemove
效果是鼠标移动到标签上执行的函数,onmouseout
效果是鼠标移除标签时执行的函数。这里还要注意一点是,标签移到最右端要有个判断,让其坐标归0,从头开始再次移动