2018-08-21 day07 js事件
2018-08-21 本文已影响0人
Kris_Shin
-
添加事件
- 添加事件方式，见代码
- 显示隐藏图片
- 操作div的display属性，在block和none之间切换即可
- this使用
- 在匿名函数中的this就是当前对象
- 在onclick=demo(this) 就是当前节点
- 修改内容
- this.innerHTML = 'xxx'
- 切换背景色
- 表单内容控制
// clear是关键字，不能使用函数名 function cleara(obj) { // console.log('clear') if (obj.value == "请输入用户名") { obj.value = '' } } function recover(obj) { if (obj.value == '') { obj.value = '请输入用户名' } } var oinput = document.getElementById('ip') oinput.onfocus = function () { // 判断要不要清空 if (this.value == "请输入用户名") { this.value = '' } } oinput.onblur = function () { // 判断内容是不是为空，如果为空变成下面这个 if (this.value == '') { this.value = '请输入用户名' } }
-
onload函数
- window的事件，windows.onload = function () {} 是在整个文档加载完毕之后执行，但是自己写的onclick的点击函数不能写到onload里面，因为内部函数只能在内部使用，不能再外部使用
- 如果实在是想用
window.lala = function () {} -
选项卡
- 方式一
<body> <button class="active" onclick="dudu(this, 0)">周杰伦</button> <button onclick="dudu(this, 1)">王力宏</button> <button onclick="dudu(this, 2)">张学友</button> <button onclick="dudu(this, 3)">刘德华</button> <div class="show">菊花台、千里之外、七里香、霍元甲、听妈妈的话、稻香、双节棍、简单爱</div> <div>花田错、龙的传人、唯一</div> <div>慢慢、吻别、一千个伤心的理由</div> <div>谢谢你的爱、冰雨、天意、忘情水</div> </body> </html> <script> // 得到所有的button var abuttons = document.getElementsByTagName('button') // 得到所有的div var adivs = document.getElementsByTagName('div') function dudu(obj, index) { // 先将所有的button的class属性设置为空 for (var i = 0; i < abuttons.length; i++) { abuttons[i].className = '' adivs[i].className = '' } // 给指定的button添加样式 obj.className = 'active' // 给指定的div添加样式 adivs[index].className = 'show' } </script>- 方式二
// 得到所有的button var abuttons = document.getElementsByTagName('button') var adivs = document.getElementsByTagName('div') // 循环button数组，给里面每一个button添加点击事件 for (var i = 0; i < abuttons.length; i++) { // 给指定的button手动添加一个属性，用来保存是第几个button abuttons[i].index = i abuttons[i].onclick = function () { // 首先清掉所有button和div上面的class for (var j = 0; j < abuttons.length; j++) { abuttons[j].className = '' adivs[j].className = '' } // 给指定的button添加样式 this.className = 'active' // console.log(i) // 给指定的div添加样式 adivs[this.index].className = 'show' } } -
定时器
- 定时器：分为两种，一种是周期性定时器，一种是一次性定时器 setTimeOut()
- 周期性：每隔5s执行一次函数 setInterval
- 一次性：几秒之后执行一次函数，执行完毕定时器结束
var timer = setTimeout(fn, 5000) 5000ms之后执行fn一次。然后结束 销毁定时器 clearTimeout(timer) - 计数器
- 图片消失
-
获取非行内样式
- IE浏览器获取非行内样式方式
obj.currentStyle['name'] - 火狐和谷歌获取方式
getComputedStyle(odiv, null)['width']
获取非行内样式的兼容性写法
function getStyle(obj, name) { return obj.currentStyle ? obj.currentStyle[name] : getComputedStyle(obj, null)[name] } - IE浏览器获取非行内样式方式
-
BOM操作
- window.setTimeout,window.setInterval
- window.alert\window.confirm
- window.open
- window.history(back. go)
- history.go(1) 去往前一个网址
- history.go(2) 去往后一个网址
- history.back() 倒退一个网址
- location
- href : 读取得到当前的url，设置跳转到指定的url
- reload() : 刷新整个页面
(还没有讲)
-
DOM操作
-
children
-
parentNode
-
firstElementChild
-
lastElementChild
-
previousElementSibling
-
nextElementSibling
-
firstChild
-
lastChild
-
previousSibling
-
nextSibling
-
tagName
-
createElement
-
removeChild
-
appendChild
-
insertBefore
-
setAttribute
-
getAttribute
-
-
select下拉框和oninput事件
-
onchange : 事件，用户点击下拉框触发
-
selectedIndex : 用户点击的option的下标，下标从0开始
-
options : osel.options 可以得到所有的option对象，这是一个数组
-
input框的oninput事件，只要内容改变，就会触发
-
作业
case.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Case</title>
</head>
<body>
<div>
1. 进度条:<br>
<progress id="pg1" value="0" max="100"></progress>
<span id="a1"> 0%</span><button onclick="case1()">Start</button>
</div>
<div>
2. 时钟:<br>
<span id="a2">00:00:00</span>
<button onclick="case2_1()">开始</button>
<button onclick="case2_2()">暂停</button>
<button onclick="case2_3()">重置</button>
</div>
<div>
3.文字时钟<br>
<span id="a3" onmousemove="case3_1()" onmouseout="case3_2()">当前时间:</span>
</div>
<div>
4.
</div>
<div>
5.短信<br>
<input type="button" value="发送短信" id="5" onclick="case5()">
</div>
</body>
<script>
function case1() {
var pg1 = document.getElementsByTagName('progress')[0]
var i = 0
var t = setInterval(function () {
if (i == 100) {
clearInterval(t)
}
pg1.value = i;
document.getElementById('a1').innerHTML = '' + i + '%';
i++;
}, 40)
}
var h = 0
var m = 0
var s = 0
var t = null
function case2_1() {
t = setInterval(function () {
s++
if (s < 10) {
s1 = '0' + s
} else { s1 = s }
if (m < 10) {
m1 = '0' + m
} else { m1 = m }
if (h < 10) {
h1 = '0' + h
} else { h1 = h }
if (s == 60) {
s = 0;
m++;
if (m == 60) {
m = 0;
h++
if (h == 24) {
h = 0
}
}
}
time = ''
time = h1 + ':' + m1 + ':' + s1;
document.getElementById('a2').innerHTML = time
}, 1)
}
function case2_2() {
clearInterval(t)
}
function case2_3() {
s = 0;
m = 0;
h = 0;
document.getElementById('a2').innerHTML = '00:00:00'
}
var tt = null
function case3_1() {
tt = setInterval(function () {
var datetime = new Date()
var year = datetime.getFullYear()
var month = datetime.getMonth() + 1
var date = datetime.getDate()
var weekday = datetime.getDay() + 1
var hrs = datetime.getHours()
var min = datetime.getMinutes()
var sec = datetime.getSeconds()
document.getElementById('a3').innerHTML = '当前时间:' + year + '年' + month + '月' + date + '日' + ' 星期' + weekday + ' ' + hrs + ':' + min + ':' + sec
}, 1000)
}
function case3_2() {
clearInterval(tt)
}
function case5() {
var i = 60;
var ttt = setInterval(function () {
if (i >= 0) {
btn = document.getElementById('5');
btn.disabled = 'disabled';
btn.value = '再次发送(' + i + 's)';
i--;
} else if (i < 0) {
btn.value = '点击发送';
btn.disabled = "";
clearInterval(ttt);
}
}, 10)
}
</script>
</html>
image.png
