-
<div class="ball ball1" ></div>
<div class="ball ball2" ></div>
<div class="ball ball3" ></div>
<script>
var ball1 = document.querySelector(".ball1")
var ball2 = document.querySelector(".ball2")
var ball3 = document.querySelector(".ball3")
var Promise = window.Promise
function promiseAnimate(ball,distance){
return new Promise(function(resolve,reject){
function _animate(){
setTimeout(function(){
var marginLeft = parseInt(ball.style.marginLeft,10)
if(marginLeft === distance){
resolve()
}else{
if(marginLeft < distance){
marginLeft ++
}else{
marginLeft --
}
ball.style.marginLeft = marginLeft + 'px'
_animate()
}
},13)
}
_animate()
})
}
promiseAnimate(ball1,100)
.then(function(){
return promiseAnimate(ball2,200)
})
.then(function(){
return promiseAnimate(ball3,300)
})
.then(function(){
return promiseAnimate(ball3,150)
})
.then(function(){
return promiseAnimate(ball2,150)
})
.then(function(){
return promiseAnimate(ball1,150)
})
查看全部 -
let http = require('http'); let baseUrl = 'http://www.imooc.com/learn/'; let learnNumber_baseUrl = 'http://www.imooc.com/course/AjaxCourseMembers?ids='; let cheerio = require('cheerio'); let videosId = [728,637,348,259,197,134,75]; function filerChapters(pageData){ let html = pageData.html; let $ = cheerio.load(html); let chapters = $('.chapter'); let courseData = { title:$('.hd h2').text(), number:pageData.number, id:$('.person-num').attr('href').split('/')[2], videos:[] }; chapters.each(function(item){ let chapter = $(this); let chapterTitle = chapter.find('h3').text(); let videos = chapter.find('.video').children('li'); let chapterData = { chapterTitle:chapterTitle, videos:[] }; videos.each(function(item){ let video = $(this).find('.J-media-item'); let videoTitle = video.text().trim(); let id = video.attr('href').split('video/')[1]; let videoData = { title:videoTitle, id:id }; chapterData.videos.push(videoData); }); courseData.videos.push(chapterData); }); return courseData; } function printCourseData(coursesData){ coursesData.forEach(function(courseData){ console.log('\n'); console.log(' ######### '+courseData.title + ' [学习人数:' + courseData.number + '] #########\n'); courseData.videos.forEach(function(item){ let chapterTitle = item.chapterTitle; console.log(chapterTitle ); item.videos.forEach(function(video){ console.log(' [' + video.id+ ']' + video.title.trim().split('(')[0]); }); }); }); } function getPageAsync(url){ return new Promise(function(resolve, reject){ http.get(url,function(res){ let html = ''; res.on('data',function(data){ html += data; }); res.on('end',function(){ resolve(html); }); }).on('error',function(){ console.log('error'); }); }); } function getLearnDataAsync(html){ return new Promise(function(resolve,reject){ let $ = cheerio.load(html); let id = $('.person-num').attr('href').split('/')[2]; let pageData = { html:html, number:0 }; let db = ''; http.get(learnNumber_baseUrl+id,function(res){ res.on('data',function(data){ db += data; db = JSON.parse(db); pageData.number = parseInt(db.data[0].numbers,10); }); res.on('end',function(){ resolve(pageData); }); }).on('error',function(){ console.log('error'); }); }); } let promiseList = []; // let coursesDataPromises = []; videosId.forEach(function(id){ promiseList.push(getPageAsync(baseUrl+id).then(function(html){ return getLearnDataAsync(html); })); }); Promise .all(promiseList) .then(function(pagesData){ let coursesData = []; pagesData.forEach(function(pageData){ coursesData.push(filerChapters(pageData)); }); printCourseData(coursesData); });
查看全部 -
fs.ReadStream 类#
新增于: v0.1.93
成功调用
fs.createReadStream()
会返回一个新的fs.ReadStream
对象。fs.ReadStream
对象都是可读流。'close' 事件#
新增于: v0.1.93
当
fs.ReadStream
底层的文件描述符被关闭时触发。'open' 事件#
新增于: v0.1.93
fd
<integer>ReadStream
使用的整数型文件描述符。
当
fs.ReadStream
' 的文件描述符被打开时触发。'ready' 事件#
新增于: v9.11.0
当
fs.ReadStream
已准备好被使用时触发。'open'
之后立即触发。查看全部 -
resume() 在有‘readable’监听事件时,不生效
查看全部 -
var http = require('http');
var baseUrl = 'http://www.imooc.com/learn/';
var learnNumber_baseUrl = 'http://www.imooc.com/course/AjaxCourseMembers?ids='
var cheerio = require('cheerio');
var videosId = [728,637,348,259,197,134,75];
function filerChapters(pageData){
var html = pageData.html;
var $ = cheerio.load(html);
var chapters = $('.chapter');
var courseData = {
title:$('.hd h2').text(),
number:pageData.number,
id:$('.person-num').attr('href').split('/')[2],
videos:[]
};
chapters.each(function(item){
var chapter = $(this);
var chapterTitle = chapter.find('h3').text();
var videos = chapter.find('.video').children('li');
var chapterData = {
chapterTitle:chapterTitle,
videos:[]
};
videos.each(function(item){
var video = $(this).find('.J-media-item');
var videoTitle = video.text().trim();
var id = video.attr('href').split('video/')[1];
var videoData = {
title:videoTitle,
id:id
}
chapterData.videos.push(videoData);
});
courseData.videos.push(chapterData);
});
return courseData;
}
function printCourseData(coursesData){
coursesData.forEach(function(courseData){
console.log('\n');
console.log(' ######### '+courseData.title + ' [学习人数:' + courseData.number + '] #########\n');
courseData.videos.forEach(function(item){
var chapterTitle = item.chapterTitle;
console.log(chapterTitle );
item.videos.forEach(function(video){
console.log(' [' + video.id+ ']' + video.title.trim().split('(')[0]);
})
})
})
}
function getPageAsync(url){
return new Promise(function(resolve, reject){
http.get(url,function(res){
var html = '';
res.on('data',function(data){
html += data;
});
res.on('end',function(){
resolve(html)
});
}).on('error',function(){
console.log('error');
})
})
}
function getLearnDataAsync(html){
return new Promise(function(resolve,reject){
var $ = cheerio.load(html)
var id = $('.person-num').attr('href').split('/')[2]
var pageData = {
html:html,
number:0
}
var db = ''
http.get(learnNumber_baseUrl+id,function(res){
res.on('data',function(data){
db += data;
db = JSON.parse(db)
pageData.number = parseInt(db.data[0].numbers,10)
})
res.on('end',function(){
resolve(pageData);
})
}).on('error',function(){
console.log('error')
})
})
}
var promiseList = []
var coursesDataPromises = []
videosId.forEach(function(id){
promiseList.push(getPageAsync(baseUrl+id).then(function(html){
return getLearnDataAsync(html);
}))
})
Promise
.all(promiseList)
.then(function(pagesData){
var coursesData = []
pagesData.forEach(function(pageData){
coursesData.push(filerChapters(pageData))
})
printCourseData(coursesData)
})
查看全部 -
var http = require('http')
// const fs = require('fs');
var Promise = require('bluebird')
var cheerio = require('cheerio')
var baseUrl = {
"htmlUrl": 'http://www.imooc.com/learn/',
"numberUrl": 'http://www.imooc.com/course/AjaxCourseMembers?ids='
};
videoIds = [348, 259, 197, 134, 75]
function filterChapters(html) {
var $ = cheerio.load(html)
var chapters = $('.chapter')
var title = $('#main .course-infos .hd h2').text().trim();
var courseData = {
title: title,
videos: []
}
chapters.each(function (item) {
var chapter = $(this)
var chapterTitle = chapter.find('h3').text().trim();
var videos = chapter.find('.video').children('li')
var chapterData = {
chapterTitle,
videos: []
}
videos.each(function (item) {
var video = $(this).find('.J-media-item')
var videoTitle = video.contents().filter(function () {
return this.nodeType == 3;
}).text().trim().split('\n');
var id = video.attr('href').split('video/')[1].trim();
chapterData.videos.push({
title: videoTitle[0].trim(),
id: id
})
//console.log(JSON.stringify(chapterData, undefined, 2));
})
courseData.videos.push(chapterData)
})
return courseData
}
function printCourseInfo(coursesData) {
// console.log(coursesData);
coursesData.forEach(function (courseData) {
console.log(courseData.number + '人学过' + courseData.title + '\n')
})
coursesData.forEach(courseData => {
// console.log('####' + courseData + '\n')
courseData.videos.forEach(function (item) {
var chapterTitle = item.chapterTitle
console.log(chapterTitle + '\n')
item.videos.forEach(function (video) {
console.log(' [' + video.id + ']' + video.title + '\n')
})
})
});
}
function getPageAsync(url) {
return new Promise(function (resolve, reject) {
console.log('*********正在爬取' + url + '*********')
var html = ''
var number = 0
http.get(url.htmlUrl, function (res) {
res.on('data', function (data) {
html += data
})
res.on('end', function () {
console.log("*************开始获取学习人数*************")
http.get(url.numberUrl, function (res) {
var resData = '';
res.on('data', function (data) {
resData += data;
});
res.on('end', function (res) {
number = JSON.parse(resData).data[0].numbers;
resolve({
"html": html,
"number": number
})
})
})
}).on('error', function (e) {
reject(e)
console.log('获取数据出错')
})
})
})
}
var fetchCourseArray = []
videoIds.forEach(function (id) {
fetchCourseArray.push(getPageAsync({
"htmlUrl": baseUrl.htmlUrl + id,
"numberUrl": baseUrl.numberUrl + id
}))
})
Promise.all(fetchCourseArray)
.then(function (pages) {
var coursesData = []
pages.forEach(function (page) {
fs.writeFileSync('./index.html', page.html);
var course = filterChapters(page.html)
course.number = parseInt(page.number)
coursesData.push(course)
})
coursesData.sort(function (a, b) {
return a.number < b.number
})
printCourseInfo(coursesData)
})
// const html = fs.readFileSync('./index.html').toString();
// const result = filterChapters(html);
查看全部 -
指定了buffer长度,超出长度的值会被截取
查看全部 -
const fs = require('fs') const readStream = fs.createReadStream('1.mp4') const writeStream = fs.createWriteStream('2.mp4') readStream.on('data',(chunk) =>{ if(writeStream.write(chunk) === false){ readStream.pause() } }) readStream.on('end',()=>{ writeStream.end() }) writeStream.on('drain',()=>{ readStream.resume() })
查看全部 -
on('readable',function(){});//可读的。
readStream.pause(),事件暂停。
readStream.resume(),事件重启。
writeStream.on('drain',function(){})//数据耗尽,已经写入到目标。
查看全部 -
pollsize:大小;
isBuffer:判断是否为buffer类型;
compare:判断相对位置;
isEncoding:是否支持某种编码;
concat:连接创建为新的buffer对象;
byteLength:获得指定编码下的字符串所占的字节数。
查看全部 -
new Buffer('str',格式参数)
Buffer 默认utf-8格式转换
查看全部 -
promise的then方法必须返回一个promise对象。
promiseObj.then(onFulfilled,onRejected)
onFulfilled=function(value){
return promiseObj2
}
onRejected=function(err){}
查看全部 -
<!DOCTYPE html>
<html>
<head>
<title>Promise animation</title>
<style type="text/css">
.ball{
width:40px;
height: 40px;
border-radius: 20px;
}
.ball1{
background: red;
}
.ball2{
background: yellow;
}
.ball3{
background: green;
}
</style>
</head>
<body>
<div class="ball ball1" ></div>
<div class="ball ball2" ></div>
<div class="ball ball3" ></div>
<script type="text/javascript">
var ball1=document.querySelector('.ball1');
var ball2=document.querySelector('.ball2');
var ball3=document.querySelector('.ball3');
var Promise=window.Promise;
function Promise_animate(ball,distance){
return new Promise(function(resolve,reject){
function animation(){
setTimeout(function(){
var marginLeft=parseInt(ball.style.marginLeft,10);
if(marginLeft===distance){
resolve();
return false;
}else {
if(marginLeft<distance){
marginLeft++;
}else{
marginLeft--;
}
}
ball.style.marginLeft=marginLeft +'px';
animation();
},13)
}
animation();
});
}
Promise_animate(ball1,100)
.then(function(){
return Promise_animate(ball2,200)
})
.then(function(){
return Promise_animate(ball3,300)
})
.then(function(){
return Promise_animate(ball3,150)
})
.then(function(){
return Promise_animate(ball2,150)
})
.then(function(){
return Promise_animate(ball1,150)
})
</script>
</body>
</html>
查看全部 -
<!DOCTYPE html>
<html>
<head>
<title>Promise animation</title>
<style type="text/css">
.ball{
width:40px;
height: 40px;
border-radius: 20px;
}
.ball1{
background: red;
}
.ball2{
background: yellow;
}
.ball3{
background: green;
}
</style>
</head>
<body>
<div class="ball ball1" ></div>
<div class="ball ball2" ></div>
<div class="ball ball3" ></div>
<script type="text/javascript">
var ball1=document.querySelector('.ball1');
var ball2=document.querySelector('.ball2');
var ball3=document.querySelector('.ball3');
function animation(ball,distance,cb){
setTimeout(function(){
var marginLeft=parseInt(ball.style.marginLeft,10);
if(marginLeft===distance){
cb&&cb();
return false;
}else {
if(marginLeft<distance){
marginLeft++;
}else{
marginLeft--;
}
}
ball.style.marginLeft=marginLeft +'px';
animation(ball,distance,cb);
},13)
}
animation(ball1,100,function(){
animation(ball2,200,function(){
animation(ball3,300,function(){
animation(ball3,150,function(){
animation(ball2,150,function(){
animation(ball1,150,function(){
//
})
})
})
})
})
})
</script>
</body>
</html>
查看全部 -
安装emmet插件,实现tab键自动填充。
按下Ctrl+D ----------- 可以继续向下同时选中下一个相同的文本进行同时编辑。
查看全部
举报