modify 1009 node
This commit is contained in:
parent
b37417dedb
commit
019d49adbf
@ -3,15 +3,19 @@
|
||||
|
||||
|
||||
|
||||
* window
|
||||
* window(浏览器顶级对象)
|
||||
* 所有变量属于window
|
||||
* name,top 属于window自有属性，不可声明
|
||||
* name,top 属于window自有属性，不可使用
|
||||
* 属性以及方法`<window.>functionName`可以省略window
|
||||
* `window.confirm();`模态框，返回Boolean
|
||||
* `window.promit('str',defaultStr);`输入框返回str
|
||||
* `window.alert('str');` 消息弹框，具有阻塞性，类似断点
|
||||
* `window.onload` 页面加载完成事件
|
||||
* `window.onunload` 页面关闭之后
|
||||
* `window.onbeforeunload` 页面关闭之前
|
||||
* `window.navigator` 对象包含有关访问者的信息
|
||||
* `navigator.userAgent` 用户浏览器类型
|
||||
* `navigator.platform` 客户端操作系统位数
|
||||
|
||||
* BOM
|
||||
* location
|
||||
@ -30,4 +34,12 @@
|
||||
* history
|
||||
* `go(<number>)` 页面跳转`<number>`个
|
||||
* `back()` 回退
|
||||
* `forward()` 前进
|
||||
* `forward()` 前进
|
||||
|
||||
* 定时器
|
||||
* `setInterval(<function>,time)`
|
||||
* function: 函数体
|
||||
* time: 每次重复的时间
|
||||
* return：IntervalId 定时器ID，用于清空定时器
|
||||
* `clearInterval(timerId)`
|
||||
* timerId: 定时器ID
|
||||
36
20191009/JS.作业.html
Normal file
36
20191009/JS.作业.html
Normal file
@ -0,0 +1,36 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<script type="text/javascript">
|
||||
//window.history.forward()
|
||||
//window.history.back()
|
||||
//window.history.go()
|
||||
window.onload = function(){
|
||||
document.getElementById('btn1').onclick = function(){
|
||||
window.location.href='test.html'
|
||||
window.location.href='test1.html'
|
||||
}
|
||||
// document.getElementById('btn2').onclick = function(){
|
||||
// window.history.forward()
|
||||
// }
|
||||
document.getElementById('btn2').onclick = function(){
|
||||
window.history.go(1)
|
||||
}
|
||||
document.getElementById('btn4').onclick = function(){
|
||||
window.history.go(1)
|
||||
}
|
||||
}
|
||||
// navigator 对象
|
||||
console.log(window.navigator)
|
||||
console.log(navigator.userAgent)//用户浏览器类型
|
||||
console.log(navigator.platform)//位数
|
||||
</script>
|
||||
<input type="button" name="" value="跳转" id="btn1">
|
||||
<input type="button" name="" value="前进" id="btn2">
|
||||
<input type="button" name="" value="快进" id="btn4">
|
||||
</body>
|
||||
</html>
|
||||
42
20191009/common.js
Normal file
42
20191009/common.js
Normal file
@ -0,0 +1,42 @@
|
||||
|
||||
function my$(id){
|
||||
return document.getElementById(id)
|
||||
}
|
||||
|
||||
//获取文本内容兼容代码
|
||||
function getInnerText(element){
|
||||
if(element.textContent){
|
||||
return element.textContent
|
||||
}else if(element.getInnerText){
|
||||
return element.innerText
|
||||
}
|
||||
}
|
||||
|
||||
//获取文本内容兼容代码
|
||||
function getInnerText(element,value){
|
||||
if(element.textContent){
|
||||
element.textContent = value
|
||||
}else if(element.getInnerText){
|
||||
element.innerText = value
|
||||
}
|
||||
}
|
||||
//为任意元素绑定事件的兼容
|
||||
function addEventListener(ele,type,fn){
|
||||
if(ele.addEventListener){
|
||||
ele.addEventListener(type,fn,false)
|
||||
}else if(ele.attachEvent){
|
||||
ele.attachEvent('on'+type,fn)
|
||||
}else{
|
||||
els['on'+type] = fn
|
||||
}
|
||||
}
|
||||
|
||||
//解绑事件的兼容
|
||||
function removeEventListener(ele,type,fn){
|
||||
if(ele.removeEventListener){
|
||||
ele.removeEventListener(type,fn,false)
|
||||
}else if(ele.detachEvent){
|
||||
ele.detachEvent('on'+type,fn)
|
||||
}else{
|
||||
ele['on'+type] = null
|
||||
}
|
||||
BIN
20191009/images/1.jpg
Normal file
BIN
20191009/images/1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
BIN
20191009/images/2.jpg
Normal file
BIN
20191009/images/2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
BIN
20191009/images/3.jpg
Normal file
BIN
20191009/images/3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
46
20191009/js.BOM.html
Normal file
46
20191009/js.BOM.html
Normal file
@ -0,0 +1,46 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<script type="text/javascript">
|
||||
// 浏览器顶级对象==>window
|
||||
// 页面顶级对象==>Document
|
||||
// 变量是属于 window 的，在内存中 ，存储
|
||||
// 堆==>引用类型
|
||||
// 栈==>值类型
|
||||
var str = 'hello'
|
||||
console.log(str)
|
||||
console.log(window.str)
|
||||
|
||||
function f1(){
|
||||
console.log('hello word')
|
||||
}
|
||||
f1()
|
||||
window.f1()
|
||||
|
||||
//注意
|
||||
var name = "战三"
|
||||
console.log(name)
|
||||
console.log(window.name)
|
||||
|
||||
var number
|
||||
console.log(number)//变量声明未赋值==>返回undefined
|
||||
console.log(window.number)
|
||||
|
||||
console.log(top)
|
||||
console.log(window)
|
||||
// top===>>window
|
||||
|
||||
window.alert(111)
|
||||
//window.的东西都可以省略window
|
||||
var res = window.confirm('确定退出么?')
|
||||
console.log(res)//===>返回值true false
|
||||
var res = window.prompt('请输入密码',8888)
|
||||
console.log(res)//返回输入的内容，，返回值字符串
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
31
20191009/js.history对象.html
Normal file
31
20191009/js.history对象.html
Normal file
@ -0,0 +1,31 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<script type="text/javascript">
|
||||
//window.history.forward()
|
||||
//window.history.back()
|
||||
//window.history.go()
|
||||
window.onload = function(){
|
||||
document.getElementById('btn1').onclick = function(){
|
||||
window.location.href='test.html'
|
||||
}
|
||||
// document.getElementById('btn2').onclick = function(){
|
||||
// window.history.forward()
|
||||
// }
|
||||
document.getElementById('btn2').onclick = function(){
|
||||
window.history.go(1)
|
||||
}
|
||||
}
|
||||
// navigator 对象
|
||||
console.log(window.navigator)
|
||||
console.log(navigator.userAgent)//用户浏览器类型
|
||||
console.log(navigator.platform)//位数
|
||||
</script>
|
||||
<input type="button" name="" value="跳转" id="btn1">
|
||||
<input type="button" name="" value="前进" id="btn2">
|
||||
</body>
|
||||
</html>
|
||||
42
20191009/js.location对象.html
Normal file
42
20191009/js.location对象.html
Normal file
@ -0,0 +1,42 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<script type="text/javascript">
|
||||
// location对象(即是对象也是window的属性)
|
||||
console.log(location)
|
||||
console.log(window.location)
|
||||
// url中#和#后的内容
|
||||
console.log(location.hash)
|
||||
//主机和端口号
|
||||
console.log(location.host)
|
||||
//主机名
|
||||
console.log(location.hastname)
|
||||
//文件路径-------相对文件
|
||||
console.log(location.pathname)
|
||||
//端口
|
||||
console.log(location.port)
|
||||
//协议
|
||||
console.log(location.protocol)
|
||||
//?和后面的内容(参数)
|
||||
console.log(location.search)
|
||||
window.onload = function(){
|
||||
document.getElementById('btn').onclick = function(){
|
||||
//alert(111)
|
||||
//跳转(属性)
|
||||
// location.href = 'https://www.baidu.com'
|
||||
//跳转(方法)
|
||||
// location.assign('https://www.jd.com')
|
||||
//刷新
|
||||
location.reload()
|
||||
//无历史记录跳转
|
||||
location.replace('https://www.baidu.com')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<input type="button" name="" value="跳转" id="btn">
|
||||
</body>
|
||||
</html>
|
||||
21
20191009/js.加载事件.html
Normal file
21
20191009/js.加载事件.html
Normal file
@ -0,0 +1,21 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<script type="text/javascript">
|
||||
window.onload = function(){
|
||||
document.getElementById('btn').onclick = function(){
|
||||
console.log('hahahah')
|
||||
}
|
||||
}
|
||||
//浏览器从上到下执行
|
||||
//加载事件 当整个页面加载完成之后在执行
|
||||
//onunloda 在页面关闭之后
|
||||
//onbeforeunload 在页面关闭之前
|
||||
</script>
|
||||
<input type="button" value="按钮" id="btn">
|
||||
</body>
|
||||
</html>
|
||||
29
20191009/js.定时器.html
Normal file
29
20191009/js.定时器.html
Normal file
@ -0,0 +1,29 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<script type="text/javascript">
|
||||
//setInterval
|
||||
//每间隔多久就执行一次函数
|
||||
//参数 1函数
|
||||
//参数 2时间(毫秒)
|
||||
// window.setInterval(function(){
|
||||
// alert('哈哈，卡住了')//alert具有阻塞性
|
||||
// },1000)
|
||||
//返回值就是定时器的Id
|
||||
var timerId = setInterval(function(){
|
||||
console.log('hahaha')
|
||||
},10)
|
||||
window.onload = function(){
|
||||
document.getElementById('btn').onclick = function(){
|
||||
//clearInterval(定时器的id)
|
||||
window.clearInterval(timerId)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<input type="button" name="" value="停止定时器" id="btn">
|
||||
</body>
|
||||
</html>
|
||||
41
20191009/js.定时器案例.html
Normal file
41
20191009/js.定时器案例.html
Normal file
@ -0,0 +1,41 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<script type="text/javascript">
|
||||
window.onload = function(){
|
||||
var im = document.getElementById('im')
|
||||
//定时器叠加问题
|
||||
var timer = null
|
||||
document.getElementById('btn').onclick = function(){
|
||||
im.style.position = 'absolute'
|
||||
clearInterval(timer)
|
||||
//创建定时器 不断地改变坐标
|
||||
timer = setInterval(function(){
|
||||
//改变坐标 改变数值 每一次生成一个数值 Math.random随机数
|
||||
//10-100之间随机数
|
||||
//a-b之间随机小数
|
||||
//公式 Math.random()*(b-a+1) + a
|
||||
//a-b之间随机整数
|
||||
// parseInt(Math.random()*(b-a+1) + a)
|
||||
var x = parseInt(Math.random()*90 + 10)
|
||||
var y = parseInt(Math.random()*90 + 10)
|
||||
im.style.left = x + 'px'
|
||||
im.style.top = y + 'px'
|
||||
|
||||
},200)
|
||||
}
|
||||
document.getElementById('btn1').onclick = function(){
|
||||
//清除定时器 定时器id?
|
||||
clearInterval(timer)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<input type="button" name="" value="图片摇动" id="btn">
|
||||
<input type="button" name="" value="停止摇动" id="btn1">
|
||||
<img src="images/1.jpg" id="im">
|
||||
</body>
|
||||
</html>
|
||||
21
20191009/test.html
Normal file
21
20191009/test.html
Normal file
@ -0,0 +1,21 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>测试页面</h1>
|
||||
<input type="button" name="" value="后退" id="btn3">
|
||||
<script type="text/javascript">
|
||||
window.onload = function(){
|
||||
// document.getElementById('btn3').onclick = function(){
|
||||
// window.history.back()
|
||||
// }
|
||||
document.getElementById('btn3').onclick = function(){
|
||||
window.history.go(-1)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
21
20191009/test1.html
Normal file
21
20191009/test1.html
Normal file
@ -0,0 +1,21 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>测试页面</h1>
|
||||
<input type="button" name="" value="后退" id="btn4">
|
||||
<script type="text/javascript">
|
||||
window.onload = function(){
|
||||
// document.getElementById('btn3').onclick = function(){
|
||||
// window.history.back()
|
||||
// }
|
||||
document.getElementById('btn4').onclick = function(){
|
||||
window.history.go(-1)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,3 +1,6 @@
|
||||
# 20191013
|
||||
|
||||
|
||||
|
||||
|
||||
* 复习上节内容
|
||||
[linkToHtml](./test1.html)
|
||||
54
20191013/test1.html
Normal file
54
20191013/test1.html
Normal file
@ -0,0 +1,54 @@
|
||||
<!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>Document</title>
|
||||
<style>
|
||||
/* 使用通配符浪费性能，尽量不使用 */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
div {
|
||||
width:400px;
|
||||
height:400px;
|
||||
background-color: #000;
|
||||
color: #ffffff;
|
||||
margin: 50px;
|
||||
position: relative;
|
||||
}
|
||||
div span {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<input type="button" value="星星点点" id="btn">
|
||||
<div id="dv">
|
||||
<!-- 可以做一个好看的星星，方便操作 -->
|
||||
<!-- <span>※</span> -->
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
document.getElementById('btn').onclick = function() {
|
||||
// 定义'dv'，优化性能
|
||||
var dv = document.getElementById('dv');
|
||||
//每隔一段时间添加一次
|
||||
//创建定时器
|
||||
setInterval(function() {
|
||||
//动态的向div内添加一颗星星
|
||||
dv.innerHTML = "<span>※</span>"
|
||||
//每间隔一段时间随机生成坐标 [0,400]
|
||||
var numX = parseInt(Math.random()*401);
|
||||
var numY = parseInt(Math.random()*401);
|
||||
dv.firstElementChild.style.left = numX + 'px';
|
||||
dv.firstElementChild.style.top = numY + 'px';
|
||||
}, 10)
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user