移动web开发相关笔记（三）
1.推荐以sublime插件的排名官网:https://packagecontrol.io/（sublime插件官网）
2.时间算法
【
//总秒数
var totalSecond= 3671;
//获取里面的小时
var hours=Math.floor(totalSecond/3600);
//获取剩下的分钟
var minute=Math.floor(totalSecond%3600/60);
//获取剩下的秒
var second=totalSecond%60;
//算法的原理是
小时：总秒数除以3600就是小时，但是不要小数，所以向下取整
分钟：总秒数余以3600，其实就获取除以3600后的余数，余数是71，之后用71/60，也就是除以1分钟的秒数，就获取到了分钟，还是不要小数，向下取整
秒：总秒数余以60，其实就是获取除以60后的余数，结果是11，这个地方有点不同常理，但是无论是3600还是60，其实都是一分钟60秒的倍数，不足一分钟就是秒了，也就是剩下的余数。
】
3.实际开发中页面中的数据的获取
◆动态网站（基本所有的网站都是动态的）：页面中的内容是动态生成的，例如img的src属性，a标签的文本值，页面的布局效果等等。
◆不刷新页面获取新数据：【
◇使用ajax技术来发送请求
◇可以在以下情况下发送请求，如点击加载更多（点击事件发送请求）、滚动加载更多（滚动事件发送请求）、逝去焦点验证用户名（失去焦点事件中发送请求）。
】
◆使用ajax获取数据，通常情况下是由产品经理来设计的，设计页面的大体布局以及交互效果，它很容易与美工与程序起冲突。
4.移动的轮播图与pc端的有点不一样。
◆自动轮播【
◇
◇
◇
◇
◇
◇
◇
】
◆手指拨动 轮播
5.推荐一个sublime中文官网：http://sublimetext.iaixue.com/（Sublime Text 中文官网）
6.css3过渡属性tansition的过渡结束事件（由于是css3中的新属性对应的新事件，所以需要加上各个浏览器的私有化前缀）
◆默认这么写：element.addEventListener('transitionEnd',function(){
});
◆加上私有化前缀这么写：element.addEventListener('webkitTransitionEnd',function(){
});，如果是火狐浏览器，将第一个参数改成mozTransition，IE则是msTransition，欧朋则是oTransition。
★这个事件专门针对被过渡的属性，所以当你设置transition的属性值为all的时候，可能这个事件会被触发多次。
7.移动端的手指触摸屏幕的事件（类似鼠标的事件），不支持简单绑定的方式，只可以使用addEventListener这种绑定方式，只有移动设备上支持
◆touchstart：手指触摸时触发（事件参数中有触摸点的值）
◆touchmove：手指在屏幕上滑动时连续触发（事件参数中有触摸点的值）
◆touchend：当手指离开屏幕时触发（事件参数中没有触摸点的值）
◆touchcancel：系统停止跟踪触摸时会触发，比如alert弹出一个框框，阻塞了线程，就会触发这个事件。（这个事件使用的很少）
◆通过事件参数 获取移动的一些属性
element.addEventListener('touchstart',function(event){
var event=event||window.event;
console.log(event.targetTouches);//目标元素的所有当前触摸
console.log(event.changedTouches);//最新更改的所有触摸
console.log(event.touches);//所有的触摸
});
★start、move、end这三个事件常见的封装：左滑、右滑、长按、捏合等等。
8.推荐一个在线编辑markdown的网站：https://www.zybuluo.com/mdeditor（在线 Cmd Markdown 编辑阅读器），https://maxiang.io/（马克飞象）
2.时间算法
【
//总秒数
var totalSecond= 3671;
//获取里面的小时
var hours=Math.floor(totalSecond/3600);
//获取剩下的分钟
var minute=Math.floor(totalSecond%3600/60);
//获取剩下的秒
var second=totalSecond%60;
//算法的原理是
小时：总秒数除以3600就是小时，但是不要小数，所以向下取整
分钟：总秒数余以3600，其实就获取除以3600后的余数，余数是71，之后用71/60，也就是除以1分钟的秒数，就获取到了分钟，还是不要小数，向下取整
秒：总秒数余以60，其实就是获取除以60后的余数，结果是11，这个地方有点不同常理，但是无论是3600还是60，其实都是一分钟60秒的倍数，不足一分钟就是秒了，也就是剩下的余数。
】
3.实际开发中页面中的数据的获取
◆动态网站（基本所有的网站都是动态的）：页面中的内容是动态生成的，例如img的src属性，a标签的文本值，页面的布局效果等等。
◆不刷新页面获取新数据：【
◇使用ajax技术来发送请求
◇可以在以下情况下发送请求，如点击加载更多（点击事件发送请求）、滚动加载更多（滚动事件发送请求）、逝去焦点验证用户名（失去焦点事件中发送请求）。
】
◆使用ajax获取数据，通常情况下是由产品经理来设计的，设计页面的大体布局以及交互效果，它很容易与美工与程序起冲突。
4.移动的轮播图与pc端的有点不一样。
◆自动轮播【
◇
◇
◇
◇
◇
◇
◇
】
◆手指拨动 轮播
5.推荐一个sublime中文官网：http://sublimetext.iaixue.com/（Sublime Text 中文官网）
6.css3过渡属性tansition的过渡结束事件（由于是css3中的新属性对应的新事件，所以需要加上各个浏览器的私有化前缀）
◆默认这么写：element.addEventListener('transitionEnd',function(){
});
◆加上私有化前缀这么写：element.addEventListener('webkitTransitionEnd',function(){
});，如果是火狐浏览器，将第一个参数改成mozTransition，IE则是msTransition，欧朋则是oTransition。
★这个事件专门针对被过渡的属性，所以当你设置transition的属性值为all的时候，可能这个事件会被触发多次。
7.移动端的手指触摸屏幕的事件（类似鼠标的事件），不支持简单绑定的方式，只可以使用addEventListener这种绑定方式，只有移动设备上支持
◆touchstart：手指触摸时触发（事件参数中有触摸点的值）
◆touchmove：手指在屏幕上滑动时连续触发（事件参数中有触摸点的值）
◆touchend：当手指离开屏幕时触发（事件参数中没有触摸点的值）
◆touchcancel：系统停止跟踪触摸时会触发，比如alert弹出一个框框，阻塞了线程，就会触发这个事件。（这个事件使用的很少）
◆通过事件参数 获取移动的一些属性
element.addEventListener('touchstart',function(event){
var event=event||window.event;
console.log(event.targetTouches);//目标元素的所有当前触摸
console.log(event.changedTouches);//最新更改的所有触摸
console.log(event.touches);//所有的触摸
});
★start、move、end这三个事件常见的封装：左滑、右滑、长按、捏合等等。
8.推荐一个在线编辑markdown的网站：https://www.zybuluo.com/mdeditor（在线 Cmd Markdown 编辑阅读器），https://maxiang.io/（马克飞象）
