JavaScript 相关范例代码汇总
2017-09-26 本文已影响8人
osborne
1 js相关概念
-
学习提示
到了 JavaScript，学习难度会慢慢增加，永远记得：戒骄戒躁、踏实前行。学 JS 的过程中需要多动手、多思考、多整理，慢慢准备自己的小项目、大项目。 -
学习资源
知乎前端学习指南, 这里汇聚了老师们写的原创文章，两三天看一篇绝对受益匪浅
GitHub笔试面试题集锦， 这里是收集的优质笔试面试题，可以作为学习成果的检验
饥人谷课件, 可以作为学习的教材
课堂内外一些前端小项目
饥人谷 api，老师实现的一些 api 接口，便于大家做一些个人创意小项目
饥人谷作品库, 饥人谷作品库，里面收集一些大家的作品，可以作为大家作品准备的参考
GitHub简历模板, 老师收集的一些简历模板，大家在写简历的时候可以参考 -
谷外优质资源
阮一峰Javascript教程, 系统权威的 JS 教程，可以作为学习的辅助教材
汤姆大叔的 javascript 翻译系列， 汤姆大叔翻译的一些优质文章，难度颇高，大家可以在学完进阶课程后再看
2 事件
- 学习提示
如果觉得实现起来有困难，可以参考代码提示，一定要自己手写一遍
可参考：饥人谷课件-event事件
题目5参考
题目6参考
题目7参考
3 事件的应用
-
题目1： 实现如下图Tab切换的功能
-
题目2：实现下图的模态框功能，点击模态框不隐藏，点击关闭以及模态框以外的区域模态框隐藏
4 瀑布流实现
<!doctype html>
<html lang="zh-Hans"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title>
<style>
* { margin: 0; padding: 0;
}
#container { display: flex; justify-content: center;
}
#container > #col1, #container > #col2, #container > #col3 {
width: 250px;
min-height: 100px;
margin: 0 10px;
overflow: hidden;
}
#container img {
max-width: 100%;
vertical-align: top;
margin-bottom: 10px;
}
</style>
</head>
<body>
<!doctype html>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* { margin: 0; padding: 0; }
#container {
display: flex;
justify-content: center;
}
#container > #col1,
#container > #col2,
#container > #col3 {
width: 250px;
min-height: 100px;
margin: 0 10px;
overflow: hidden;
}
#container img {
max-width: 100%;
vertical-align: top;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="container">
<div id="col1"></div>
<div id="col2"></div>
<div id="col3"></div>
</div>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script>
let $container = $('#container')
let columns = [$('#col1'), $('#col2'), $('#col3')]
let totalHeights = [0, 0, 0]
let currentPage = 1
getOnePage(1, function () {
getOnePage(2, function () {
currentPage = 2
})
})
$(window).scroll(function () {
if (isBottom()) {
getOnePage(currentPage + 1, function(){
currentPage += 1
})
} else {
console.log('继续滚')
}
})
function isBottom () {
return $(window).scrollTop() + $(window).height() == $(document).height()
}
function getOnePage (page, success) {
let number = 0
let images = []
getNews(6, page).then(function (response) {
let data = response.data
data.forEach((item, index) => {
let img = new Image()
images.push(img)
img.onload = function () {
number += 1
if (number === 6) {
for (let i = 0; i < images.length; i++) {
let shortestColumnIndex = findIndexOfShortestColumn()
$(`#col${shortestColumnIndex + 1}`).append(images[i])
totalHeights[shortestColumnIndex] += images[i].height + 10
}
success && success()
}
}
img.src = randomImage()
})
})
}
function findIndexOfShortestColumn () {
let minIndex = 0
for (let i = 0; i < totalHeights.length; i++) {
if (totalHeights[i] < totalHeights[minIndex]) {
minIndex = i
}
}
return minIndex
}
// 生成随机图片
function randomImage () {
let height = parseInt(Math.random() * 200 + 100, 10) // 100~300
return `http://lorempixel.com/250/${height}/sports/Dummy-Text/`
}
// 不要看了
// 获取新闻
function getNews (number, page) {
page = page || 1 // 保底
number = number || 8
let url = `http://platform.sina.com.cn/slide/album_tech` +
`?app_key=1271687855&num=${number}&page=${page}`
return $.ajax({
url: url,
dataType: 'jsonp',
jsonp: 'jsoncallback'
})
}
</script>
</body>
</html>
5其他JS Bin代码汇总：
1
我的第一个页面
导航栏
作品
2
输入框
新闻加载
github在线简历编辑1
github在线简历编辑2
面试题汇总
笔试题分享
饥人谷前端作品库
