javaScript项目案例
javaScript项目案例
储备知识，感觉玩dom主要是玩document这个类
1.Dom操作
在js中所有标签都属于节点。dom是一个倒着的树，树根为html标签
创建节点
createElement():传入标签类型,创建一个结点
示例：var oP = document.createElement(\'p\');
获取节点
这些都是位于document的方法
常用的节点方法
这个都是节点的方法
设置节点内容
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\';
-
用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>
-
模态框案例
其实，就是运用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>
-
点击有惊喜
这个例子，主要就是用计数器记录点击次数，每点击一次标签，就会调用一次该函数，计数器加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>
-
制作一个简易留言板
<!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添加一个调用方法
-
制作选项卡
这个例子主要是用了，将三个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都是引用哦，不是一个纯数字。
-
淘宝搜索框制作
这个例子主要用到了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 = ‘’，导致每次输入时，都会给输入框自动赋值空字符
-
动态时间制作
这里主要用了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 y = myDate.getFullYear();
var m = myDate.getMonth();
var d = myDate.getDay();
var h = myDate.getHours();
var minu =myDate.getMinutes();
var s = myDate.getSeconds();
oP.innerHTML = \'今天是 \'+ y +\'年 \'+m+\'月 \'+d+\'日 \'+h+\':\'+twoNum(minu)+\':\'+twoNum(s);
},1000);
function twoNum(n){
return n > 9 ? n:\'0\'+n;
}
</script>
</html>
-
匀速运动
通过定时器函数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这行代码可以通过改变右值改变小方块运动速度。
-
设置五秒关闭广告
这个例子主要用了定时器，和固定定位相关的知识，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>
-
设置五秒关闭广告(升级版)
设置一个定时器，在网页上显示倒计时后，再显示关闭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循环后的值，而不是每次循环的值。
-
小米滚动
这里主要用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时，要清除之前的定时器，防止干扰下次操作。而且图片移动到顶端和低端，要注意好终止坐标的位置。
-
无缝轮播图
这个案例主要运用盒子和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，从头开始再次移动
- 全选与非全选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<input type="checkbox" id="all"><label>全选</label><br>
<input type="checkbox"><label>1</label><br>
<input type="checkbox"><label>2</label><br>
<input type="checkbox"><label>3</label><br>
<input type="checkbox"><label>4</label><br>
<input type="checkbox"><label>5</label><br>
<input type="checkbox"><label>6</label><br>
<input type="checkbox"><label>7</label><br>
<input type="checkbox"><label>8</label><br>
</form>
<script>
var cks, all;
init();
function init() {
// 获取所有input标签存储到cks列表中
cks = document.getElementsByTagName("input");
// 将cks列表转换为数组覆盖cks变量
cks = Array.from(cks);
// 循环这个数组
for (var i = 0; i < cks.length; i++) {
// 每个多选框添加点击事件,当点击时执行clickHandler函数
cks[i].onclick = clickHandler;
}
// 删除数组的最头部的元素并且设置给all变量，最头部这个元素是全选那个多选框
all = cks.shift();
// 剩余cks数组中没有全选的那个多选框了
}
function clickHandler() {
// 如果点击的元素与all变量相同，all变量就是全选的那个多选框
// this在点击事件中指被点击的元素
// 当点击全选框，就会执行这个事件，all.checked会自动变化，
// 比如勾选中，all.checked就会自动变为true
if (this === all) {
// 除了全选多选框以外所有的其他多选框的选中状态必须和全选多选框的选中状态一直
// all.checked 这个就是全选多选框的选中状态 这个结果是true或者false
// true就是选中，false就是未选中，所有的多选框都具备这个属性，
// 这个属性即可获取又可以设置
// cks是除了全选框以外的其他所有多选框的数组
cks.forEach(function (item) {
// 这里的item就是除了全选框以外的其他的每个多选框
item.checked = all.checked;
})
} else {
// 如果点击是除了全选以外的其他多选框
// cks.every遍历cks数组的每个元素，每个多选框
// every方法，如果遇到有元素返回了false就直接返回false，如果没有遇到最后返回true
// 全选框的选中状态就变成查看其他元素中是否没有选中的元素，
// 如果每个元素都选中,那么全选框也被选中
all.checked = cks.every(function (item) {
// 返回每个多选框的checked状态，就是当前这个多选框是否被选中
// 如果被选中就会把true返回出去
// 如果没选中就会把false返回出去
return item.checked;
})
}
}
</script>
</body>
</html>
- 轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.crousel
{
width:1500px;
height: 500px;
margin: auto;
position: relative;
overflow: hidden;
}
.imgCon{
width:7500px;
height: 500px;
position: absolute;
font-size: 0; /*解决表格之间空隙 最合适的方法就是给li的父级ul设置： font-size: 0; 给li设置：font-size: a px; 如此就达到了所需效果，li不设置font-size就是之间没有空格的效果。*/
transition: all 0.5s;
left:0;
}
.imgCon>img{
width:1500px;
height: 500px;
}
.leftBn,.rightBn{
position: absolute;
top:220px;
}
.leftBn{
left:50px;
}
.rightBn{
right: 50px;
}
ul{
list-style: none; /*列表样式，你把list-style:none去掉，你会发现li前面会有黑色的实心圆（默认的）。list-style也可以设置空心圆、方块、自定义链接图片等*/
margin: 0;
padding: 0;
bottom: 50px;
left:640px;
}
li{
width: 28px;
height: 28px;
border: 2px solid #FF0000;
float: left;
border-radius: 50%;
margin-left: 20px;
}
li:nth-child(1){
margin-left: 0;
}
.clear::after
{
content: "";
height: 0;
display: block;
visibility: hidden;
clear: both;
}
.clear{
zoom: 1;
}
</style>
</head>
<body>
<div class="crousel">
<div class="imgCon">
<img src="./img/a.jpeg">
<img src="./img/b.jpeg">
<img src="./img/c.jpeg">
<img src="./img/d.jpeg">
<img src="./img/e.jpeg">
</div>
<img src="./img/left.png" class="leftBn">
<img src="./img/right.png" class="rightBn">
<ul class="clear">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
var imgCon,leftBn,rightBn,list,prevDot;
var pos=0;
init();
function init(){
// 获取所有图片容器，左右按钮
imgCon=document.querySelector(".imgCon");
leftBn=document.querySelector(".leftBn");
rightBn=document.querySelector(".rightBn");
// 将所有li获取并且转换为数组
list=Array.from(document.querySelectorAll("li"));
// 给左右按钮增加点击事件
leftBn.onclick=clickHandler;
rightBn.onclick=clickHandler;
// list是所有小圆点的数组，遍历这个数组
list.forEach(function(item){
// 给每个小圆点增加点击事件
item.onclick=dotClickHandler;
});
changeDot();
}
function clickHandler(){
// 如果点击左边的按钮
if(this===leftBn){
pos--;
if(pos<0) pos=4;
}else{
// 如果点击了右边的按钮
pos++;
if(pos>4) pos=0;
}
imgCon.style.left=pos*-1500+"px";
changeDot();
}
function dotClickHandler(){
// this就是被点击的元素，list是所有小圆点的数组
// 查找当前点击小圆点是数组中第几个，这个第几个正好就是我们要显示第几张图片
pos=list.indexOf(this);
imgCon.style.left=pos*-1500+"px";
changeDot();
}
function changeDot(){
// 如果上一个小圆点变量存在时
if(prevDot){
// 设置上一个小圆点的背景色透明
prevDot.style.backgroundColor="rgba(255,0,0,0)";
}
// list是小圆点的数组，pos是当前应该显示第几张图
// 将上一个小圆点变量设置为当前这个小圆点数组中对应的那个小圆点
prevDot=list[pos];
// 并且设置当前这个小圆点背景色为红色
prevDot.style.backgroundColor="rgba(255,0,0)";
}
</script>
</body>
</html>
显示与输入的内容相关的
1，添加键盘抬起事件
2，获取文本框的内容，是否与数组中的内容匹配
3，创建元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #box { width: 450px; margin: 200px auto; } #txt { width: 350px; } #pop { width: 350px; border: 1px solid red; } #pop ul { margin: 10px; padding: 0px; width: 200px; list-style-type: none; } #pop ul li { } ul { margin: 0; padding: 0; list-style: none; } </style> </head> <body> <div id="box"> <input type="text" id="txt" value=""> <input type="button" value="搜索" id="btn"> </div> <script> var keyWords = [\'iphonex\', \'华为p20pro\', \'小米8\', \'华为nova3\', \'小辣椒\', \'iphonexr\', \'iphone8\', \'小米max3\'] // div var box = document.getElementById(\'box\'); // 文本框 var txt = document.getElementById(\'txt\'); // 命名函数 function fn() { // 判断有没有ul元素 if (document.getElementById(\'shelper\')) { var shelper = document.getElementById(\'shelper\') box.removeChild(shelper); } // 临时数组：存放匹配到的内容 var tempArr = []; // 检测输入的内容 for (var i = 0; i < keyWords.length; i++) { // 如果输入的内容与数组中匹配， if (keyWords[i].indexOf(txt.value) === 0) { tempArr.push(keyWords[i]); // 追加到临时数组 } } // 当输入的内容为空，或者临时数组没有 if (txt.value.length === 0 || tempArr.length === 0) { // 删除ul元素 if (document.getElementById(\'shelper\')) { var shelper = document.getElementById(\'shelper\') box.removeChild(shelper); } return; // 以下代码不执行 } // 创建ul var ulObj = document.createElement(\'ul\'); box.appendChild(ulObj); ulObj.id = \'shelper\'; ulObj.style.width = \'350px\'; ulObj.style.border = \'1px solid red\'; // 创建li tempArr.forEach(function (item) { var liObj = document.createElement(\'li\'); liObj.innerText = item; liObj.style.padding = \'5px 0 5px 5px\'; liObj.style.cursor = \'pointer\'; ulObj.appendChild(liObj); // 绑定鼠标进入事件 liObj.addEventListener(\'mouseover\', mouseOver, false); // 绑定鼠标离开事件 liObj.addEventListener(\'mouseout\', mouseOut, false); }); // 鼠标进入事件 function mouseOver() { this.style.backgroundColor = \'#ccc\'; } // 标离开事件 function mouseOut() { this.style.backgroundColor = \'\'; } } // 为文本框绑定键盘抬起事件 txt.addEventListener(\'keyup\', fn, false); </script> </body> </html>
版权声明：本文为luweiweicode原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。