前端学习日记-log2

本文最后更新于：3 个月前

继续上次的地方继续往下学习

日志随笔

8. 单位

  • px：像素

我们用的最多的就是像素，一般移动端切图什么的都是使用像素作为单位，原生开发也一样

  • em：倍数

  • 百分号：百分比

9. 水平居中和垂直居中

可以看教程，也可以自己理解，毕竟前面已经看了很多概念了

慕课网上第二篇课程JavaScript入门篇

日志随笔

1. 引用js

javascript作为一种脚本语言可以放在html页面中任何位置，但是浏览器解释html时是按先后顺序的，所以前面的就先被执行。比如进行页面显示初始化的js必须放在head里面，因为初始化都要求提前进行（如给页面body设置css等）；而如果是通过事件调用执行的function那么对位置没什么要求的

2. 变量和数据类型，这点w3school上讲的更清楚

JavaScript拥有动态类型，这点和OC很不一样，类型错误是没有提示的，要自己去排查。

布尔值、数组、字典写法差不多

Undefined和Null，Undefined这个值表示变量不含有值,可以通过将变量的值设置为null来清空变量

3. 对象

JavaScript中的所有事物都是对象：字符串、数字、数组、日期，等等，对象是拥有属性和方法的数据

4. 函数方法

方法使用及作用域基本一致，写法稍有区别，其他一些循环语句等设计都是一样的

5. 各种弹出窗口

alert、confirm、prompt都是原生系统浏览器对html的支持，其他window的方法也是window.open，window.close

window层的方法也是对原生容器开放的，原生可以直接触发，参考我的其他文章

DOM探索之基础详解篇

1. DOM热身案例——滑动门特效

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!-- html -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>

		<link rel="stylesheet" type="text/css" href="css/test1.css" />
		<script src="js/test1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="container">
			<div id="image1" class="size"></div>
			<div id="image2" class="size"></div>
			<div id="image3" class="size"></div>
			<div id="image4" class="size"></div>
		</div>
	</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
// test1.js
window.onload = function() {
	//获取image数组
	var container = document.getElementById("container");
	var imgs = container.getElementsByTagName("div");
	
	//图片宽度
	var imageWidth = imgs[0].offsetWidth;
	
	//设置边缘露出的堆叠宽度
	var gapWidth = 30;
	
	//整个容器宽度
	var containerWidth = imageWidth + (imgs.length - 1) * gapWidth;
	container.style.width = containerWidth + 'px';
	
	//初始位置
	function setImgsPos() {
		for (var i = 1; i < imgs.length; i++) {
			imgs[i].style.left = imageWidth + gapWidth * (i - 1) + 'px';
		}
	}
	setImgsPos();
	
	//左侧距离
	var leftGap = imageWidth - gapWidth;
	
	//设置四张图片的鼠标焦点方法
	imgs[0].onmouseover = function() {
		setImgsPos();
	}
	imgs[1].onmouseover = function() {
		setImgsPos();
		imgs[1].style.left = gapWidth + 'px';
		parseInt()
	}
	imgs[2].onmouseover = function() {
		setImgsPos();
		imgs[1].style.left = gapWidth + 'px';
		imgs[2].style.left = gapWidth * 2 + 'px';
	}
	imgs[3].onmouseover = function() {
		setImgsPos();
		imgs[1].style.left = gapWidth + 'px';
		imgs[2].style.left = gapWidth * 2 + 'px';
		imgs[3].style.left = gapWidth * 3 + 'px';
	}
	
	//方法二，使用闭包设置四张图片的鼠标焦点方法
	// for (var i = 0; i < imgs.length; i++) {
	// 	(function(i) {
	// 		imgs[i].onmouseover = function() {
	// 			setImgsPos();
	// 			
	// 			for (var j = 1; j <= i; j++) {
	// 				imgs[j].style.left = gapWidth * j + 'px';
	// 			}
	// 		}
	// 	})(i)
	// }
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
/* test1.css */
#container {
	height: 300px;
	margin: 0 auto;
	border: 1px solid red;
	overflow: hidden;
	position: relative;
}

.size {
	width: 100px;
	height: 100px;
	position: absolute;
	display: block;
	left: 0;
}

#image1 {
	background-color: lightgray;
}

#image2 {
	background-color: darkgray;
}

#image3 {
	background-color: gray;
}

#image4 {
	background-color: black;
}

未完待续