6.1 定时器
<body>
<div id="box" style="background-color: red; width: 80px; height: 80px; position: absolute; top: 10px;"></div>
<button type="button" onclick="clearInterval(t1)">关闭定时器1</button>
</body>
<script type="text/javascript">
// js中的定时器有两种：Interval、Timeout
// 1）Interval定时器的开启和关闭
// 创建定时器：setInterval(函数, 时间) - 创建定时器每隔指定时间就自动调用指定的函数(时间单位是毫秒)，返回一个定时器对象
// 关闭定时器：clearInterval(定时器对象)
// num = 1
// t1 = setInterval(function(){
// console.log('hello world!' + num)
// num++
// }, 1000)
// clearInterval(t1)
// 让方块上下移动
top1 = 10
t2 = setInterval(function(){
top1 += 2
document.getElementById('box').style.top = top1 + 'px'
}, 100)
// 2）Timeout定时器
setTimeout(function(){
console.log('hello！')
}, 1000)
<script type="text/javascript">
// js中的定时器有两种：Interval、Timeout
// 1）Interval定时器的开启和关闭
// 创建定时器：setInterval(函数, 时间) - 创建定时器每隔指定时间就自动调用指定的函数(时间单位是毫秒)，返回一个定时器对象
// 关闭定时器：clearInterval(定时器对象)
// num = 1
// t1 = setInterval(function(){
// console.log('hello world!' + num)
// num++
// }, 1000)
</script>
定时跳转
<body>
<p id="p1">5秒后自动跳转到百度...</p>
</body>
<script type="text/javascript">
time1 = 5
t1 = setInterval(function(){
time1--
if(time1 == 0){
clearInterval(t1)
//打开百度
window.location = 'https://www.baidu.com'
// window.open('https://www.baidu.com')
}else{
document.getElementById('p1').innerText = time1 + '秒后自动跳转到百度...'
}
}, 1000)
</script>
6.2 事件绑定
<body>
<button id="btn1" type="button" onclick="func1()">问候</button>
<button id="btn2" type="button">提问</button>
<button id="btn3">确定</button>
<br><br>
<button type="button" onclick="addAction()">+</button>
<span>0</span>
<button type="button" onclick="subAction()">-</button>
<br>
<hr>
<!-- <button id="d1" οnclick="delAction1()">删除1</button>
<button id="d2" οnclick="delAction2()">删除2</button>
<button id="d3" οnclick="delAction3()">删除3</button>
<button id="d4" οnclick="delAction4()">删除4</button> -->
<button class="del">删除1</button>
<button class="del">删除2</button>
<button class="del">删除3</button>
<button class="del">删除4</button>
<button class="del">删除5</button>
<button class="del">删除6</button>
<button class="del">删除7</button>
<button class="del">删除8</button>
</body>
</html>
<!--
事件绑定 - 让网页内容和对人类的指定的行为做出反应。
1.事件三要素：事件源、事件、事件驱动程序
2.绑定事件的方法
1)在标签内部给事件源的事件属性赋值: <标签名 οnclick="事件驱动程序"></标签名>
函数中的this是window对象
2)在js中给标签对应的节点的事件属性赋值: 事件源节点.onclick = 事件驱动程序对应的函数
注意：事件驱动程序对应的函数必须是普通函数的函数名或者是匿名函数
函数中的this是事件源
3)在js中通过节点对象的addEventListener绑定事件：事件源节点.addEventListener(事件名称, 事件驱动程序对应的函数)
注意：这儿的事件名需要把on去掉
3.常见的事件
1）鼠标事件：点击事件(onclick)
-->
<script type="text/javascript">
// 绑定方式1
function func1(){
alert('你好！')
console.log(this)
}
// 绑定方式2
document.getElementById('btn2').onclick = function(){
alert('今年多大?')
console.log(this)
}
// 绑定方式3
document.getElementById('btn3').addEventListener('click', function(){
confirm('是否删除？')
console.log(this)
})
// =================数字增加减少练习=====================
num = 0
num_span = document.getElementsByTagName('span')[0]
function addAction(){
num ++
num_span.innerText = num
}
function subAction(){
num --
num_span.innerText = num
}
// ========================删除练习=====================
//方法1：
// function delAction1(){
// document.getElementById('d1').remove()
// }
// function delAction2(){
// document.getElementById('d2').remove()
// }
// function delAction3(){
// document.getElementById('d3').remove()
// }
// function delAction4(){
// document.getElementById('d4').remove()
// }
// 方法2：
function delAction(){
this.remove()
}
btns = document.getElementsByClassName('del')
for(index=0; index<8; index++){
btns[index].onclick = delAction
}
</script>
6.3 常见事件类型
<body>
<button id="btn1" type="button">点我呀</button>
<input id="input1"/>
<select id="city" name="city">
<option value="成都">成都</option>
<option value ="重庆">重庆</option>
<option value ="北京">北京</option>
<option value ="上海">上海</option>
</select>
</body>
</html>
<!-- 常见事件类型
1. 鼠标相关事件(任何可见标签都可以绑定鼠标事件)：
onclick - 鼠标点击事件
onmouseover - 鼠标悬停在标签上的事件
onmouseout - 鼠标从标签上离开的事件
2. 按键相关事件
onkeypress - 某个按键按下对应的事件
onkeydown - 某个按键按下对应的事件
onkeyup - 某个按键按下后弹起来对应的事件
注意：按键相关事件在绑定的时候必须通过js绑定(用方法2或者方法3绑定)，才可以在函数中添加事件对应的参数，来获取按键信息
3. 值改变 - 用于检测下拉列表的选项发生改变的时候
onchange
-->
<script type="text/javascript">
// 1. 鼠标相关事件
btn1 = document.getElementById('btn1')
btn1.onmouseover = function(){
this.innerText = '点不了'
}
btn1.onmouseout = function(){
this.innerText = '点我呀'
}
//2. 键盘相关事件
input1 = document.getElementById('input1')
input1.onkeypress = function(evt){
console.log('键盘按下!', evt, evt.key)
}
//3.值改变事件
city = document.getElementById('city')
city.onchange = function(){
console.log('选项发生改变!', city.value)
}
</script>
6.4 缩略图
<div>
<img id="big" src="img/picture-1.jpg" >
</div>
<div>
<img class="small" src="img/thumb-1.jpg" >
<img class="small" src="img/thumb-2.jpg" >
<img class="small" src="img/thumb-3.jpg" >
</div>
<script type="text/javascript">
function change_image(){
// document.getElementById('big').src = 'img/picture-'+this.i+'.jpg'
str1 = new String()
index1 = this.src.search('-')
num = this.src.slice(index1+1, index1+2)
document.getElementById('big').src = 'img/picture-'+num+'.jpg'
}
small_imgs = document.getElementsByClassName('small')
for(index=0;index<3;index++){
small = small_imgs[index]
small.i = index+1
small.onmouseover = change_image
}
</script>
6.5 动态添加和删除
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box1{
margin-left: 50px;
margin-top: 20px;
}
#box1>div{
background-color: rgb(98,158,160);
width: 200px;
height: 50px;
margin-top: 2px;
color: white;
font-size: 20px;
line-height: 50px;
}
#box1 p{
float: left;
text-align: center;
width: 180px;
}
#box2{
margin-top: 20px;
margin-left: 50px;
}
#box2>input{
border: 0;
border-bottom: 1px solid rgb(169,169,169);
width: 200px;
height: 50px;
outline: 0;
text-align: center;
font-size: 20px;
vertical-align: bottom; /*垂直对齐方式*/
}
#box2>button{
width: 70px;
height: 28px;
color: white;
font-size: 18px;
border: 0;
background-color: rgb(253,123,87);
}
</style>
</head>
<body>
<div id="box1">
<div>
<p>苹果</p>
<span>×</span>
</div>
<div>
<p>香蕉</p>
<span>×</span>
</div>
<div>
<p>西瓜</p>
<span>×</span>
</div>
<div>
<p>火龙果</p>
<span>×</span>
</div>
</div>
<div id="box2">
<input type="" name="" id="name" value="" />
<button type="button" onclick="add_friut()">确定</button>
</div>
<script type="text/javascript">
function add_friut(){
//1.获取输入框内容
input1 = document.getElementById('name')
name = input1.value
input1.value = ''
//2.创建新水果对应的新标签
div = document.createElement('div')
p = document.createElement('p')
p.innerText = name
span = document.createElement('span')
span.innerText = '×'
div.appendChild(p)
div.appendChild(span)
// 新增的水果的颜色是随机色
// random() - 产生0~1的随机数
r = parseInt(Math.random()*255)
g = parseInt(Math.random()*255)
b = parseInt(Math.random()*255)
div.style.backgroundColor = "rgba("+r+","+g+","+b+",0.3)"
box1 = document.getElementById('box1')
box1.insertBefore(div, box1.firstElementChild)
}
</script>
</body>
1440
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
