文章目录
-
-
-
- 事件基础
- 对象的使用
- Math的使用
- 字符串的操作
- 数组操作
- 鼠标事件
- 键盘事件
- 定时器
事件基础
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件基础</title>
<style>
.box:hover {
cursor: pointer;
}
</style>
</head>
<body>
<!--为该盒子添加一个点击事件-->
<div class="box">12345</div>
<!--需求1:每一个li都具有点击事件,事件的目的是打印自己的文本内容-->
<!--需求2:点击时,不是打印内容,而是打印li自己的索引-->
<ul class="ul">
<li>001</li><!-- index: 0 -->
<li>002</li><!-- index: 1 -->
<li>003</li><!-- index: 2 -->
<li>004</li><!-- index: 3 -->
</ul>
</body>
<script>
var lis = document.querySelectorAll('.ul li');
for (var i = 0; i < lis.length; i++) {
lis[i].index = i;
lis[i].onclick = function () {
console.log(this.index)
}
}
</script>
<script>
var box = document.querySelector('.box');
function aaa() {
alert("aaa")
}
function btnClick() {
alert(123);
return aaa;
}
box.onclick = function () {
alert(this.innerText)
}
</script>
</html>
对象的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>对象的使用</title>
</head>
<body>
对象的使用
</body>
<script>
function Person(name,age) {
this.name = name;
this.age = age;
this.work = function () {
console.log(this.name + '在工作');
}
}
var p1 = new Person('egon',79);
var p2 = new Person('kevin',78);
var p3 = new Person('jerry',3);
console.log(p1.name);
console.log(p2['age']);
p3.work();
var obj = {
name1:'egon',
name2:'tank',
}
for (var i=1;i <=2;i++) {
console.log(obj['na' + 'me' +i])
}
var dict = {
a:"AAA",
b:"BBB"
}
console.log(dict.a);
dict.a = "AAAAA";
console.log(dict);
dict.c = "CCC";
console.log(dict);
delete dict.b;
console.log(dict);
</script>
</html>
Math的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Math</title>
</head>
<body>
Math
</body>
<script>
for (var i = 0; i < 20; i++) {
var rNum = parseInt(Math.random() * 100000000000) % 11 + 5;
console.log(rNum);
}
var ele = document.querySelector("h1:nth-child(1)")
ele.setAttribute("src", "ssdsdsa");
ele = document.querySelector("h1:nth-child(2)")
ele.setAttribute("src", "ssdsdsa");
</script>
</html>
字符串的操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字符串操作</title>
</head>
<body>
字符串操作
</body>
<script>
var s = 'abcdef123456呵呵哈哈'
console.log(s.charAt(3));
console.log(s.indexOf('呵'));
console.log(s.lastIndexOf('呵'));
var newS = s.replace('abc','ABC');
console.log(s);
console.log(newS);
newS = s.slice(0,3);
console.log(newS);
var ss = '123 456 abc def';
var arr = ss.split(' ');
console.log(arr)
</script>
</html>
数组操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数组操作</title>
</head>
<body>
数组操作
</body>
<script>
var arr = [3, 5, 1, 2, 4];
console.log(arr);
arr.reverse();
console.log(arr);
arr.sort();
console.log(arr);
console.log(arr.reverse())
console.log(arr.indexOf(5));
var ss = arr.join('@');
console.log(ss);
var newArr = arr.filter(function (ele) {
if (ele % 2 == 0) {
return true;
}
return false;
});
console.log(newArr)
</script>
<script>
console.log("-----------------------");
var a = [4, 3, 5, 1, 2];
a.push(6);
console.log(a);
a.unshift(0);
console.log(a);
var res = a.pop();
console.log(a, res);
res = a.shift();
console.log(a, res);
a.splice(3, 0, 10);
console.log(a);
a.splice(0, 0, 1, 2);
console.log(a);
a.splice(a.length - 1, 1, 20);
console.log(a);
a.splice(2, 3);
console.log(a);
</script>
</html>
鼠标事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标事件</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: orange;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
<script>
var box = document.querySelector('.box');
box.onmouseenter = function () {
box.style.cursor = "pointer";
console.log("鼠标悬浮了");
}
box.onmousemove = function () {
console.log("鼠标在移动");
}
box.onmousedown = function (ev) {
console.log(ev);
console.log("鼠标按下")
}
box.onmouseup = function () {
console.log("鼠标抬起")
}
box.onmouseleave = function () {
console.log("鼠标移开")
}
box.oncontextmenu = function () {
console.log("鼠标右键")
}
</script>
</html>
键盘事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>键盘事件</title>
</head>
<body>
键盘事件
</body>
<script>
document.onkeydown = function () {
}
document.onkeyup = function (ev) {
console.log(ev);
console.log(ev.keyCode,ev.altKey);
console.log("键盘抬起了")
}
</script>
</html>
定时器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>定时器</title>
</head>
<body>
定时器
</body>
<script>
var r1 = setTimeout(function () {
console.log("一次性定时器响了!1111");
},1000);
var r2 = setTimeout(function () {
console.log("一次性定时器响了!2222");
},1000);
var num = 0;
var r3 = setInterval(function () {
console.log("持续性性定时器响了%d次", ++num);
},1000);
console.log("代码向下执行了!");
console.log(r1,r2,r3);
clearInterval(2);
var r4 = setTimeout(function () {
console.log("一次性定时器响了!4444")
},1000);
console.log(r4);
var n = setTimeout(function () {}, 1);
for (var i = 0; i < n; i++) {
clearTimeout(i)
}
</script>
</html>
