京东顶部栏，点击消失：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$美少女战士$</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.topBox {
width: 100%;
height: 80px;
background-color: #231fee;
/* opacity: 1; !*!/初值*!*/
}
.topBox .adv-img {
position: relative;
width: 1190px;
height: 80px;
margin: 0 auto;
background: url("images/jdTop.jpg") no-repeat 0px 0px;
/*调整背景的尺寸 cover 铺满 */
background-size: cover;
}
.adv-img span {
position: absolute;
right: 0px;
top:0;
width: 30px;
height: 30px;
background: rgba(45,45,45,.3);
color: #fff;
line-height: 30px;
text-align: center;
}
</style>
</head>
<body>
<div class="topBox" style="opacity: 1">
<!--javascript:; 阻止a的默认跳转-->
<a href="javascript:;">
<div class="adv-img" >
<span> X </span>
</div>
</a>
</div>
<script src="获取元素.js"></script>
<script>
//1:先获取元素 点击关闭按钮 大盒子
var topBox = my$('.topBox')
var close = my$('.adv-img span')
console.log(topBox ,close)
//2:点击关闭按钮 让大盒子隐藏
close.onclick = function () {
//3：利用循环去减透明度 while
/* console.log(topBox.style.opacity); 第一 ： 对象.style.属性名 只能获取行内样式 */
console.log(topBox.style.opacity) //字符串 灰色 转数值
var op = topBox.style.opacity;
/* while(op>0){
op = op-0.1;
console.log(op.toFixed(1))
topBox.style.opacity = 'op.toFixed(1)'
}*/
//定时器'
var timer = setInterval(function () {
op = op-0.1;
console.log(op)
topBox.style.opacity = op ;
if(op<=0){
clearInterval(timer)
topBox.style.display = 'none';
}
},100)
}
</script>
</body>
</html>定时器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$美少女战士$</title>
</head>
<body>
<script>
//1:永久定时 返回 定时器标识 整数
//window.setInterval(function(){
// 每隔多长时间执行的代码
// }, 1000(ms))
//2: 一次性定时 返回 定时器标识 整数
/*
* setTimeout(function(){1s之后执行一次},1000)
*/
var i =0;
/* var timer1 = window.setInterval(function () {
i++;
console.log(i)
if(i===10){
//清除定时器 clearInterval(标识)
clearInterval(timer1)
}
},1000)
*/
var timer2 = window.setTimeout(function () {
console.log('我是一次性定时器 ，执行一次')
//clearTimeout(timer2)
},2000)
/* var timer2 = window.setInterval(function () {
i++;
console.log(i)
if(i===10){
//清除定时器 clearInterval(标识)
}
},1000)*/
</script>
</body>
</html>节点添加操作：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$美少女战士$</title>
<!--<link rel="stylesheet" href="1.css">-->
<!--<link rel="stylesheet" href="1.css">-->
<!--<link rel="stylesheet" href="1.css">-->
<!--<link rel="stylesheet" href="1.css">-->
<!--<link rel="stylesheet" href="1.css">-->
<!--<link rel="stylesheet" href="1.css">-->
<!--<link rel="stylesheet" href="1.css">-->
</head>
<body>
<button id="btn">点击创建a标签</button>
<div class="father">
</div>
<script src="获取元素.js"></script>
<script>
/*入口函数 目的 保障静态资源加载 完毕 只要加载完毕 这个回调函数就触发了*/
window.onload = function () {
// js 写到{}里面
var btn = my$('#btn')
var father = my$('.father')
// document.createElement('div')
//创建出来一个标签而已
var obj = document.createElement('a')
//添加文本
/* obj.innerText = '百度'*/
//创建文本节点
var text = document.createTextNode('百度')
//文本节点追加到a标签身上
obj.appendChild(text);
//设置默认属性 . setAttribute()
obj.href = 'http://baidu.com'
//最后在把完整a标签挂接到树上
father.appendChild(obj)
console.log(obj)
}
</script>
</body>
</html>插入节点：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$美少女战士$</title>
</head>
<body>
<button id="btn">删除节点</button>
<div class="fa">
<span class="gege"></span>
<!--<p></p>-->
<span class="last"></span>
</div>
<script src="获取元素.js"></script>
<script>
//插入节点 兄弟关系 之前 之后
var myp = document.createElement('p')
myp.innerText = '我是p元素'
//起了类名
myp.setAttribute('class','myp')
//insertBefore(创建的节点,参考节点)
my$('.fa').insertBefore(myp,my$('.last'));
my$('#btn').onclick = function () {
//移除元素 父元素.removeChild('子元素')
my$('.fa').removeChild( my$('.myp'))
}
</script>
</body>
</html>省市联动：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$美少女战士$</title>
</head>
<body>
<select name="province" id="province" > <!--// province:0 -->
<option value="0">北京</option>
<option value="1">河南省</option>
<option value="2">河北省</option>
<option value="3">广东省</option>
</select>
<select name="city" id="city">
//不能提前写好
</select>
<script src="获取元素.js"></script>
<script>
window.onload = function () {
//1:下拉列表改变 onchange 给你要改变那个列表加
//2:数据 城市数组
var str = ''; //空串
var cities = [['朝阳区','海淀区','大兴区'],['洛阳市','开封市','郑州市'],['张家口市','石家庄市','保定市'],
['东莞市','珠海市','深圳市'] ];
my$('#province').onchange = function () {
//在改变之后 str清空
str = '';
//1:遍历对应的市 ---文字
/*得到被选中的元素 检测那个元素有selected属性 */
for(var i =0;i<this.options.length;i++){
if(this.options[i].selected){
var index = this.options[i].value
}
}
console.log(index)
for(var i = 0;i<cities.length;i++){
if(i == index ){ //?
var cs = cities[index]
/* console.log(cities[index])*/
//遍历每一个城市 装到option标签里
for(var j= 0;j<cities[index].length;j++){
//拼接字符串
str+="<option value="+ j+">"+ cities[index][j]+" </option>"
}
console.log(str)
}
}
my$('#city').innerHTML = str;
//2:option标签
//3:追加到name=city的下拉列表里
}
//初始化函数
function init() {
//创建元素法 createElement('option')
for(var i =0;i<cities[0].length;i++){
var o = document.createElement('option')
o.innerText = cities[0][i];
my$('#city').appendChild(o)
}
}
init();
}
</script>
</body>
</html>轮播图：
html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$美少女战士$</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<!--相框-->
<div class="Photo-frame">
<!--照片条-->
<ul class="picBox clearFix" style="left: 0">
<li><a href="#"><img src="images/zhutu1.jpg" alt=""></a></li>
<li><a href="#"><img src="images/zhutu3.jpg" alt=""></a></li>
<li><a href="#"><img src="images/zhutu4.jpg" alt=""></a></li>
<li><a href="#"><img src="images/zhutu5.jpg" alt=""></a></li>
<li><a href="#"><img src="images/zhutu6.jpg" alt=""></a></li>
</ul>
<!--指示 小圆圈-->
<div class="circles">
<span in="0" style=" box-shadow: 0 0 10px 5px rgba(255,255,255,.7) inset"></span>
<span in="1"></span>
<span in="2"></span>
<span in="3"></span>
<span in="4"></span>
</div>
<!--箭头 next 右箭头-->
<div class="arrow" id="next"> > </div>
<!--左箭头-->
<div class="arrow" id="prev"> < </div>
</div>
<!--不能互换顺序-->
<script src="../获取元素.js"></script>
<script src="index.js"></script>
</body>
</html>css：
@charset "UTF-8";
* {
padding: 0;
margin: 0;
}
img {
display: block; /*转换块级元素*/
}
ul li {
list-style: none;
}
/*清浮动的衣服*/
.clearFix::after,.clearFix::before {
content: '';
display: block;
line-height: 0;
clear: both;
}
.Photo-frame {
position: relative;
width: 590px;
height: 470px;
border: 1px solid #ccc;
margin: 100px auto;
/*溢出隐藏*/
overflow: hidden;
}
/*照片条*/
.picBox {
/*定位*/
position: absolute;
width: 2950px;
height: 470px;
top:0;
}
.picBox > li {
float: left;
}
.arrow {
position: absolute;
top:50%;
margin-top: -20px;
width: 24px;
height: 40px;
background-color: rgba(45,45,45,.3);
color: #fff;
line-height: 40px;
text-align: center;
font-size: 25px;
cursor: pointer;/*鼠标小手样式*/
}
#next {
right: 0;
}
#prev {
left: 0;
}
.arrow:hover {
background-color: rgba(45,45,45,.7);
}
/*小圆点*/
.circles {
position: absolute;
bottom:20px;
left: 50%;
margin-left:-76px ;
height: auto;
}
.circles span {
display: inline-block;
box-sizing: border-box;
width: 14px;
height: 14px;
border: 3px solid rgba(255,255,255,.3);
border-radius: 50%;
margin-left: 10px;
cursor: pointer;
background-color: darkblue;
}
/*
.circles span:hover {
box-shadow: 0 0 10px 5px rgba(255,255,255,.7) inset;
}*/
js：
window.onload = function () {
// ☆☆☆☆☆ 如果你是先加后判断 判断条件应该是下标+1
//1:手动播放
/*
* (1)当用户点击右箭头 下一张 照片盒子向左移动 left-=590px
* (2)当用户点击左箭头 上一张 照片盒子向右移动
* left+=590px
*
* */
//相框
var Photo_frame = my$('.Photo-frame')
//照片盒子
var picBox = my$('.picBox')
//箭头
var next = my$('#next') //右
var prev = my$('#prev') //左
var circles = my$('.circles')
var circlesSpans = my$All('.circles span') //bug my$() ===>my$All()
console.log(circlesSpans)
var index = 0 ;// 标记当前有光圈的小圆点的下标
/***********照片盒子运动函数 picBoxAnimation()
* 参数：偏移量 +590 向右 上一张
* -590 向左 下一张
* 返回值 无
* ************/
function picBoxAnimation(offset){
var leftValue = parseInt(picBox.style.left); //数值类型
var newLeft = leftValue + offset //照片盒子要运动的距离
if(newLeft < -2360 ){ //向左走的趋势 当前已经展示的是第5张
newLeft = 0;
}
if(newLeft > 0 ){
newLeft = -2360
}
picBox.style.left = newLeft + 'px';
console.log(picBox.style.left) //只能获取行内样式
}
//右箭头
next.onclick = function () {
picBoxAnimation(-590)
//右箭头朝右移动 加+
index++; //4
if(index === 5){
index = 0;
}
buttonShow();
}
prev.onclick = function () {
picBoxAnimation(+590)
index--;
if(index === -1){
index = 4;
}
buttonShow();
}
//2:自动播放 定时器
function play() {
timer = setInterval(function () {
next.onclick();
},1000)
}
play();
//s鼠标移入不动 清定时器
Photo_frame.onmouseover = function () {
clearInterval(timer) //清除定时器 停止自动轮播
}
//鼠标移开 重新自动轮播 play()
Photo_frame.onmouseout= function () {
play()
}
/*********小圆点
* 1：随着图片移动
* 2：鼠标切换相应（自定义属性 ）图片
* **********/
//小圆点移动函数 buttonShow() 参数 无 返回值 无
function buttonShow() {
for(var i =0;i<circlesSpans.length ;i++){
circlesSpans[i].style.boxShadow = '';//清除样式
}
circlesSpans[index].style.boxShadow = "0 0 10px 5px rgba(255,255,255,.7) inset"
}
//鼠标移入哪个小圆圈 哪张图就显示
//图片盒子运动偏移量 = (旧下标 index -新下标 )*590
for(var i =0;i<circlesSpans.length ;i++){
//给小圆圈绑定鼠标移入事件
circlesSpans[i].onmouseover= function () {
//获取当前鼠标移入的那个小圆圈的下标 ===》 新下标
var newIndex = this.getAttribute('in')
console.log(newIndex)
//根据产生的新下标和旧下标的差的到了照片移动的偏移量
var currentOffset = (index-newIndex)*590
//调用运动函数 ===》图片已经切换
picBoxAnimation(currentOffset)
//新旧更替 旧下标保存新下标
index = newIndex ;
//调用小圆圈展示的函数 为什么在这调用？ 能不能拿到前面? 为什么？
buttonShow()
}
}
}