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指应用程序编程接口.
简单案例，带你快速入门：
侧边栏动画效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>04 侧边栏动画效果</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
#box {
width: 200px;
height: 200px;
background-color: red;
position: relative;
left: -200px;
}
#box span {
position: absolute;
width: 40px;
height: 60px;
color: #fff;
background-color: #000000;
right: -40px;
top: 50%;
margin-top: -30px;
line-height: 60px;
text-align: center;
}
</style>
</head>
<body>
<div id="box">
<span>拉开</span>
</div>
<script type="text/javascript">
window.onload = function() {
var box = document.getElementById('box');
var timer = null,
speed = 0;
box.onmouseover = function() {
startAnimation(this, 0);
}
box.onmouseout = function() {
startAnimation(this, -200);
}
function startAnimation(obj, end) {
// 先关闭定时器
clearInterval(timer);
speed = end > obj.offsetLeft ? 5 : -5;
timer = setInterval(function() {
if (obj.offsetLeft === end) {
clearInterval(timer);
return;
}
obj.style.left = obj.offsetLeft + speed + 'px';
}, 30);
}
}
</script>
</body>
</html>链式运动效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#box{
width: 200px;
height: 200px;
background-color: palevioletred;
opacity: 0.3;
}
</style>
</head>
<body>
<div id="box"></div>
<script src="js/myAnimation.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function (){
var box = document.getElementById('box');
box.onmouseover = function (){
startAnimation(box,'width',500,function (){
startAnimation(box,'height',400,function (){
startAnimation(box,'opacity',100);
})
})
}
}
</script>
</body>
</html>
同时运动效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box{
width: 200px;
height: 200px;
background-color: #DA70D6;
}
</style>
</head>
<body>
<div id="box"></div>
<script src="js/myAnimation2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function (){
var box = document.getElementById('box');
box.onmouseover = function (){
startAnimation(box,{"width": 500,"opacity": 30});
}
box.onmouseout = function (){
startAnimation(box,{"width": 200,"opacity": 100});
}
}
</script>
</body>
</html>
联动效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>17 联动效果</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#ad{
position: fixed;
right: 0;
bottom: 0;
}
#close{
position: absolute;
right: 0;
top: 0;
width: 25px;
height: 25px;
z-index: 5;
}
</style>
</head>
<body>
<div id="ad">
<img src="images/ad.png" alt="" width="300">
<span id="close"></span>
</div>
<script src="js/myAnimation2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 1.联动效果
// 2.侧边栏横幅
// 3.滚动监听
// 4.轮播图
// (1)获取标签
var ad = document.getElementById('ad');
var close = document.getElementById('close');
close.onclick = function (){
startAnimation(ad,{"height": 260},function(){
startAnimation(ad,{"width": 0},function(){
ad.style.display = 'none';
})
})
}
</script>
</body>
</html>
滚动监听效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 19 滚动监听</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
html,
body {
width: 100%;
height: 100%;
}
.container {
width: 1190px;
height: 100%;
margin: 0 auto;
}
.container div {
width: 100%;
height: 100%;
text-align: center;
color: #fff;
font-size: 30px;
}
.aside {
position: fixed;
width: 40px;
right: 20px;
top: 300px;
font-size: 16px;
font-weight: 700;
text-align: center;
}
.aside li {
height: 50px;
border-bottom: 1px solid #ddd;
}
.aside li a {
color: peru;
}
.aside li.current {
background-color: coral;
}
.aside li.current a {
color: #fff;
}
</style>
</head>
<body>
<div class="container" id="box">
<div class="current">爱逛好货</div>
<div>好店主播</div>
<div>品质特色</div>
<div>猜你喜欢</div>
</div>
<ul class="aside" id="aside">
<li class="current">
<a href="javascript:void(0)">爱逛好货</a>
</li>
<li>
<a href="javascript:void(0)">好店主播</a>
</li>
<li>
<a href="javascript:void(0)">品质特色</a>
</li>
<li>
<a href="javascript:void(0)">猜你喜欢</a>
</li>
</ul>
<script src="js/myAnimation2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function() {
// 1.获取标签
var box = document.getElementById('box');
var allBoxs = box.children;
var aside = document.getElementById('aside');
var lis = aside.children;
var isClick = false; //默认没有被点击
// 2.上色
var colors = ['red', 'pink', 'purple', 'blue'];
for (var i = 0; i < allBoxs.length; i++) {
allBoxs[i].style.backgroundColor = colors[i];
}
// 3.监听侧边栏按钮的点击
for (var j = 0; j < lis.length; j++) {
lis[j].index = j;
lis[j].onclick = function() {
isClick = true;
for (var k = 0; k < lis.length; k++) {
lis[k].className = '';
}
// 设置当前的类
this.className = 'current';
var _this = this;
// 页面动画起来
startAnimation(document.documentElement, {
"scrollTop": this.index * (document.body.clientHeight)
}, function() {
isClick = false;
// 这是跳转的页面
if (_this.index == lis.length - 1) {
alert(111);
window.open('https://www.baidu.com');
}
})
// document.documentElement.scrollTop = this.index * document.body.clientHeight;
}
}
// 4.监听页面滚动
window.onscroll = function() {
if (!isClick) {
// 4.1 获取页面滚动的高度
var docScrollTop = document.documentElement.scrollTop + 20 || document.body.scrollTop + 20;
console.log(docScrollTop);
for (var i = 0; i < lis.length; i++) {
if (docScrollTop > allBoxs[i].offsetTop) {
for (var j = 0; j < allBoxs.length; j++) {
lis[j].className = '';
}
lis[i].className = 'current';
}
}
}
}
}
</script>
</body>
</html>
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中的理解和做的部分案例就在这里，希望可以帮助像我这样的小白，刚入门的难！！！
扫一扫
1260
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
