javascript的理解及经典案例分析

js要学习的内容简介：

• web前端有三层
• JavaScript的组成
• JavaScript的特点
• JS在网页中输出信息的写法
• JS在网页中用户输入的写法
• 直接量
• 变量
• 数据类型
• 运算符
• 数据类型转换
• 流程控制
• 常用内置函数对象
• 函数
• 伪数组arguments
• 关于DOM的事件操作
• DOM操作中“事件三要素“
• 定时器
• BOM介绍
• BOM的常用方法和内置对象
• client，offset，scroll系列

 

JavaScript容易学习吗？特点:

• 简单易用
• 解释型语言: 边解释边执行.
• 基于对象: 内置大量现成的对象, 编写少量程序即可完成目标.

JavaScript的组成

JavaScript基础分为三个部分:

• ECMAScript: JavaScript的语法标准. 包括变量, 表达式, 运算符, 函数, if语句, for语句等.

• DOM: 文档对象模型. 操作网页上的元素的API. 比如让盒子移动, 变色, 轮播图等.

• BOM: 浏览器对象模型. 操作浏览器部分功能的API. 比如让浏览器自动滚动

.PS: API指应用程序编程接口.

 

 

简单案例，带你快速入门：

侧边栏动画效果

    
    
    



    

        拉开
    
    

链式运动效果

同时运动效果

联动效果

滚动监听效果

	
		
		
		
	

	
		

			
爱逛好货
			
好店主播
			
品质特色
			
猜你喜欢
		
		

			

				爱逛好货
			
			

				好店主播
			
			

				品质特色
			
			

				猜你喜欢
			
		
		
		
	

 

 

Animation2.js文件在这

var speed = 0;
/**
 * 动画的函数
 * @param {Object} obj 当前的对象
 * @param {Object} attr 当前元素对象的属性
 * @param {Object} endTarget 末尾位置
 */
function startAnimation(obj, json, fn) {
	// 针对于多物体运动,定时器的返回值要绑定当前的对象中.
	clearInterval(obj.timer);
	obj.timer = setInterval(function() {
		var cur = 0;
		var flag = true; //标杆 如果true，证明所有的属性都到达终点值
		for (var attr in json) {
			// 0 获取样式属性
			// 透明度变化处理
			switch (attr) {
				case 'opacity':
					cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
					break;
				case 'scrollTop':
					cur = obj[attr]
					break;
				default:
					cur = parseInt(getStyle(obj, attr));
					break;
			}
			// 1.求速度
			speed = (json[attr] - cur) / 10;
			speed = json[attr] > cur ? Math.ceil(speed) : Math.floor(speed);
			// 2.临界处理
			if (json[attr] !== cur) {
				flag = false;
			}
			// 3.运动起来
			switch (attr) {
				case 'opacity':
					obj.style[attr] = `alpha(opacity: ${cur + speed})`;
					obj.style[attr] = (cur + speed) / 100;
					break;
				case 'scrollTop':
					obj.scrollTop = cur + speed;
				default:
					obj.style[attr] = cur + speed + 'px';
					break;
			}
		}

		if (flag) {
			clearInterval(obj.timer);
			if (fn) {
				fn();
			}
			return;
		}

	}, 30);
}
/**
 * 获取元素属性的函数
 * @param {Object} obj 当前元素对象
 * @param {Object} attr 当前元素对象的属性
 */
function getStyle(obj, attr) {
	if (obj.currentStyle) {
		// 兼容ie
		return obj.currentStyle[attr];
	} else {
		// 兼容主流浏览器
		return getComputedStyle(obj, null)[attr];
	}
}

现在我还在读大二，这是我在学习JavaScript中的理解和做的部分案例就在这里，希望可以帮助像我这样的小白，刚入门的难！！！