多端统一开发框架，支持用 React 的开发方式编写一次代码，
生成能运行在微信/百度/支付宝/字节跳动小程序、H5、React Native 等的应用。
https://github.com/NervJS/taro
https://taro.js.org/
https://nervjs.github.io/taro/
https://nervjs.github.io/taro/docs/README.html 文档
https://github.com/NervJS/taro/issues/244 案例
优秀案例和第三方库征集 issues/244
Taro 多端开发实现原理与项目实战 官方付费教程
收集的一些资料：
http://echarts.baidu.com/
echarts2 官方实例
echarts3(4)官方实例 && 个人实例
123.207.117.45/demo20180919.7z
https://www.npmjs.com/package/globe.gl
https://github.com/vasturiano/three-globe
Globe.GL
地球
https://visibleearth.nasa.gov/collection/1484/blue-marble
地球
https://github.com/Gladysgong/3D_earth_all
echarts echarts-x echarts-gl 制作3D地球
https://www.makeapie.com/editor.html?c=xnyknPF1R
区贡献者维护的Apache ECharts (incubating)相关作品，与官方的 Apache ECharts (incubating) 项目无关。
http://www.popodv.com/
PoPo 数据可视化
https://echarts.apache.org/zh/option-gl.html
https://github.com/ecomfe/echarts-gl
GL配置
https://echarts.apache.org/zh/index.html
ECharts（ Apache ECharts）
https://github.com/apache/incubator-echarts
Apache ECharts
https://github.com/ecomfe/echarts-for-weixin
在微信小程序中使用 Apache ECharts (incubating)
https://github.com/xlsdg/vue-echarts-v3
第三方封装
https://mapv.baidu.com/
https://mapv.baidu.com/examples/
Forked from huiyan-fe/mapv
a library of geography visualization-地理信息可视化库
https://github.com/baidu/mapv
http://www.echartsjs.com/gallery/editor.html?c=doc-example/getting-started
数据可视化概览
大数据可视化大屏设计经验分享
公司大屏开发心得
制作公司数据大屏的几点技术总结 && 时钟demo
超大7k高清显示器显示网页解决方案
中国国家应急广播大屏幕UI设计
使用百度echarts制作可视化大屏——最终效果和动态数据刷新
使用百度echarts制作可视化大屏
大屏设计系列之七：大屏幕界面设计应用案例欣赏
大屏数据可视化示例 && demo
基于ECharts实现的可视化大屏展示
数据可视化，个人经验总结（Echarts相关）
一个炫酷大屏展示页的打造过程
大屏数据展示
一个炫酷大屏展示页的打造过程
航班实时追踪
http://flightadsb.variflight.com/
http://inorganik.github.io/countUp.js/
https://blog.csdn.net/itheima_Wujie/article/details/78765467
https://segmentfault.com/q/1010000003768836
https://www.helloweba.net/demo/totalnum/
https://github.com/kele527/digitRoll
https://github.com/zoeblow/numberAnimate
https://github.com/gitWhatever/vue-digitroll
https://github.com/leeenx/numberscroller
https://github.com/wqzwh/odometer
https://github.com/postbird/jquery.number-run.js
https://github.com/confidence68/numberAnimateOperate
https://github.com/cgygd/scrollnumbers
https://github.com/Takeos/Odometer
https://github.com/HouLijun/rollNumber
https://github.com/jixiaoxin666/digital_scroll
https://github.com/huangjihua/Ernie
https://github.com/kumaw/scrollNum
https://github.com/kolou/number_slide
https://github.com/lbshub/JS-mDigital
https://github.com/chaorenzeng/jquery.numscroll.js
https://github.com/chanble/rollingNumber
https://github.com/YuxinChou/DemoRotateNum
https://github.com/GYFlash/gScrollNumber.js
https://github.com/wsb260/jQuery-slimScrol
http://inorganik.github.io/countUp.js/
Echarts 系列
数据可视化
demo
http://wx.ioneup.com/index.php?s=/screen/index/signin/target_id/1.html
http://wx.ioneup.com/index.php?s=/screen/index/signin/pid/5/target_id/1.html
官网：https://vuejs.org 要是网络差可以打开中文
V3
GitHub：https://github.com/vuejs/vue
http://weibo.com/arttechdesign 尤雨溪
比较详细的采访 Vue 作者尤雨溪
Vue 2.0——渐进式前端解决方案
Vue CLI Vue.js 开发的标准
Vue的 Object.defineProperty和未来3.0的proxy观察者机制
集 Vue3+ & Vue-CLI3+ 开发生态圈和填坑姿态
第三届VueConf
关于 Vue3 的文章，我不明白为啥用 TS
使用 React Hooks 重构你的小程序
https://aotu.io/notes/2019/07/10/taro-hooks/
Vue Function API
https://github.com/vuejs/vue-function-api/blob/master/README.zh-CN.md
来自 Vue 3.0 的 Composition API 尝鲜
vue3 源码的利器 - mini-vue & B站
Vue作者：新手向：Vue 2.0 的建议学习顺序
从0到1手写一个vuejs
Vue.js 2.3 知识清单
2018 我所了解的 Vue 知识大全（一）
2018 我所了解的 Vue 知识大全 （二）
Vue2.0 新手入门 — 从环境搭建到发布
Vue.js学习教程_专题
JTaro-Tutorial
Vuex 是什么
技术胖-胜洪宇
easy-mock
蓝狐博客
入门看看
1.Vue.js——60分钟快速入门
2.Vue.js——60分钟组件快速入门（上篇）
3.Vue.js——60分钟组件快速入门（下篇）
4.Vue.js——基于$.ajax实现数据的跨域增删查改
5.Vue.js——vue-resource全攻略
6.Vue.js——使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
7.Vue.js——60分钟browserify项目模板快速入门
8.Vue.js——60分钟webpack项目模板快速入门
9.Vue.js——vue-router 60分钟快速入门
上面源码https://github.com/keepfool/vue-tutorials
在Vue中有条件地使用CSS类
vue学习
Vue 源码解析：深入响应式原理
剖析Vue原理&实现双向绑定MVVM
Vue技术内幕
VUE.JS组件化开发实践
vue开发看这篇文章就够了
vue.js关于Object.defineProperty的利用原理
vue 248个知识点（面试题）为你保驾护航
https://alligator.io/vuejs/
https://vuedose.tips/tips/
vuex的demo实现
到底vuex是什么？
使用Vue.js和Vuex实现购物车场景
正确理解Vuex： 懂人生，就懂了Vuex
Vuex 的简单使用
state的，store还有getter、Mutations、Actions以及Modules。
在vuex文档中都有非常详细的说明：http://vuex.vuejs.org/zh-cn/state.html
笼统的说：
组件获取 state 用 vuex 的 getter
组件触发动作用 vuex 的 action
修改 state 用 vuex 的 mutation
追求极致的用户体验ssr(基于vue的服务端渲染)
实现基于 Nuxt.js 的 SSR 应用
Element 2.0
vux github 移动框架
饿了么前端
Vue相关开源项目库汇总
Let you insight into the Vue.js
https://github.com/yaoyao1987/vue-cli-multipage
https://nutui.jd.com/demo.html#/index
https://github.com/luchanan/vue2.0-multi-page
基于 Vue-cli 构建多页面应用（Multi-pages Application）脚手架
基于vue-cli搭建一个多页面应用(六)--移动端适配方案
基于 vue2 + vuex 构建一个具有 45 个页面的大型单页面应用
改用nodejs构建的后台系统接口
对应的后台管理系统
Vue 全家桶 + Electron 开发的一个跨三端的应用
vue.js - 收藏集
vue相关收集
https://github.com/lichenbuliren/vuex-notes-app
微豆 - Vue 2.0 实现豆瓣 Web App 教程
Awesome douban DEMO created with Vue2.x + Vuex + Vue-router + Superagent
vue-element-admin && 文档 && 手摸手，带你用vue撸后台
Vue.js实践：一个Node.js+mongoDB+Vue.js的博客内容管理系统
开源中国微信版 vue+vux的2.x版本 github
使用vue.js + laravel开发单页面应用
利用WordPress REST API 开发微信小程序从入门到放弃
vue2.0 admin / a management system templateelement-ui
Vue Admin Panel Framework, Powered by Vue 2.0 and Bulma 0.3 https://admin.vuebulma.com
vue2 + vue-router + vuex 入门项目
vonic && vonic-documents
iview
基于 vue.js 和 ionic 样式的 UI 框架，用于快速构建移动端单页应用。
Nicescroll滚动条插件
bcrypt.js && npm && 使用
手摸手，带你封装一个vue component
[译]如何在 Vue.js 中使用第三方库
https://zhuanlan.zhihu.com/p/25042521
详解 Vue & Vuex 实践
http://www.cnblogs.com/gagag/p/6246493.html
生命周期
Vue2.0 探索之路——生命周期和钩子函数的一些理解
https://segmentfault.com/a/1190000008010666\
https://crazy0x.github.io/frontend/2017/01/23/vue-nga.html
使用Vue框架实现NGA客户端
Vue.js：a (re)introduction（作者中文）
https://zhuanlan.zhihu.com/p/20302927
http://blog.evanyou.me/2015/10/25/vuejs-re-introduction/ (作者英文原文)
https://github.com/vuejs/awesome-vue
sublime中有没有*.vue文件格式化插件？
https://segmentfault.com/q/1010000004221470
HTML/CSS/JS Prettify 这个插件就行， 安装后 tools->HTML/CSS/JS Prettify->set prettify preference 在"allowed_file_extensions": ["htm", "html", "xhtml", "shtml", "xml", "svg","vue"] 加上vue就好了
PostCSS(px2rem)
除了Sass这样的CSS处理器这外，我们团队的@颂奇同学还开发了一款npm的工具px2rem 。安装好px2rem之后，可以在项目中直接使用。也可以使用PostCSS 。使用PostCSS插件postcss-px2rem：
https://deliciousbrains.com/creating-a-wordpress-theme-using-the-rest-api-and-vue-js/
https://github.com/bstavroulakis/vue-wordpress-pwa
https://www.npmjs.com/package/vue-wordpress
https://segmentfault.com/a/1190000008715104
关于 webpack 打包后文件过大的那些事……
基于 Webpack 的应用包体尺寸优化
Vue路由开启keep-alive时的注意点
vue-cli 构建的项目 webpack 如何配置不 build 出 .map 文件？
如何降低Vue.js项目中Webpack打包文件的大小？
路由懒加载 Webpack 的代码分割功能
vue 组件按需引用，vue-router懒加载，vue打包优化，加载动画
在vue 中使用 Clipboard.js复制粘贴 官网
Clipboard is not a function?
使用clipboard.js实现页面内容复制到剪贴板
vue中8种组件通信方式
vue-router 项目中$route.params和$route.query的区别是什么，踩坑事件进行总结
?id=123456&uid=1 这样传参的方式，获取值为this.$route.query.id(uid) ，这样的不用改路由
/create/12345/1 这样的传参获取值为this.$route.params.id，需要改路由path: '/create/:id/:uid
node-vue前后端分离记录
利用scp2部署Vue项目到测试环境
vue.js（SCP2）打包后自动上传到服务器
vue2 前后端分离项目ajax跨域session问题解决
vuejs怎么在服务器部署？
大型Vuex应用程序的目录结构
你不知道的Vuejs
curated list(awesome-vue)
从1万篇文章中挑出的40篇最棒的 Vue 学习指南（2018版）
如何在Vue项目中使用vw实现移动端适配
Vue折腾记
Vuejs的一些总结
Vue2技术栈归纳与精粹
Vue-Layout : vue可视化布局、自动生成代码
Vue 脱坑记 - 查漏补缺(汇总下群里高频询问的xxx及给出不靠谱的解决方案)
Vue-Layout : vue可视化布局、自动生成代码
基于 Vue.js 的 PWA 解决方案帮助开发者快速搭建 PWA 应用，解决接入 PWA 的各种问题
npm uninstall xxx --save
为什么 npm 要为每个项目单独安装一遍 node_modules？
关于Webstorm webpack经常不能自动热更新问题
webstrom settings的system settings默认勾选safewrite,勾选去掉就可以了
SCSS 与 Sass 异同
https://www.jianshu.com/p/31ad32e7ec13
vue-scroller的详细用法，上拉加载下拉刷新,vue-axios获取数据的详细过程
done()方法的解释
因为不能直接引用或以请求的方式获取项目本地.json后缀的json文件，
可以把json数据转换js文件格式在index.html中引入
<!DOCTYPE html>
<html lang="en">
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
...
<script src="./datas.js"></script>
...
</body>
</html>
datas.js
// 在本地开发时 ESLint 报错，添加下面代码即可，build 时打包不受影响
// eslint-disable-next-line no-undef
datas = {
'identifier': '20190714',
'name': '我的好友',
'version': '0.0.1',
'build': 0,
'releaseNote': '我的好友',
'hidden': true,
'dependencies': {
'piece': '0.0.1',
'com.csair.base': '0.0.1',
'butterfly': '0.0.1',
'ratchet': '0.0.1'
},
'code': 200
}
在 页面上 xx.vue 中调用
created: function () {
...
// 下面是打包时的引用；
// 本地开发时这样写会报错，datas为未定义，开发时正常用请求的方式(axios,get)获取本地json即可
this.data = datas
...
},
在Vue-cli3.0项目的vue.config.js或vue-cli3.0之前版本的build/dev-server.js中配置：
const express = require('express')
const app = express()
var singer = require('./src/db/data/singer.json') //本地 json文件数据，打包会打包到 js 文件中
module.exports = {
devServer:{
before(app) {
app.get('/api/singer', (req, res) => {
res.json({
errno: 0, // 这里是你的json内容
data: singer
})
})
app.get('/api/recommend', (req, res) => {
res.json({
errno: 0, // 这里是你的json内容
data: recommend
})
})
},
再组件内使用axios调用本地json文件数据：
import axios from 'axios'
axios.get("/api/singer").then((data)=>{
console.log(data)
})
vue.config.js 配置如下：
const goods = require('./mock/goods.json')
module.exports = {
devServer: {
before: (app) => {
app.post('/goods', function (req, res, next) {
res.json(goods)
})
}
}
}
src/views/Home.vue
<script>
import axios from 'axios'
export default {
name: 'home',
components: {
HelloWorld
},
created () {
axios.post('/goods')
}
}
</script>
注意：vue cli3.0 public 文件夹才是静态资源文件,修改了vue.config.js需要重启项目。
二者作用：解决HTTP协议无状态的缺陷，在客户端/服务器端保存会话状态。
检查客户端请求中是否包含一个session标识（session id）
若包含，则说明之前已经为此客户端创建过session。服务器按照此session id检索出session
若不包含，则为此客户端创建一个session，并生成一个session id。此session id将作为响应返回给客户端保存。（使用Cookie保存）
若Cookie被禁止，必须有其他机制能够把session id回传给服务器
回传session id至服务器：
URL重写：把session id直接附加在URL路径后面
隐藏表单字段
Cookie中只能保存ASCII字符串，Session中可以保存任意类型的数据，甚至Java Bean乃至任何Java类、对象等隐私策略不同 Cookie存储在客户端，对客户端是可见的，可被客户端窥探、复制、修改。而Session存储在服务器上，不存在敏感信息泄露的风险有效期不同 Cookie的过期时间可以被设置很长。Session依赖于名为JSESSIONI的Cookie，其过期时间默认为-1，只要关闭了浏览器窗口，该Session就会过期，因此Session不能完成信息永久有效。如果Session的超时时间过长，服务器累计的Session就会越多，越容易导致内存溢出。服务器压力不同 每个用户都会产生一个session，如果并发访问的用户过多，就会产生非常多的session，耗费大量的内存。因此，诸如Google、Baidu这样的网站，不太可能运用Session来追踪客户会话。浏览器支持不同 Cookie运行在浏览器端，若浏览器不支持Cookie，需要运用Session和URL地址重写。跨域支持不同 Cookie支持跨域访问（设置domain属性实现跨子域），Session不支持跨域访问
参考：理解Cookie和Session机制
使用雪花图 http://www.spritecow.com/
使用矢量图字体 http://fontawesome.dashgame.com/
使用阿里矢量图库 https://www.iconfont.cn/
使用矢量图转成字体 https://icomoon.io/
使用无损压缩 https://tinypng.com/
png转换webp https://zhitu.isux.us/
jpg有损压缩，压缩率搞，不支持透明
png支持透明，浏览器兼容好
webp压缩程度更好，在ios webview有兼容性问题
svg矢量图，代码内嵌，相对于较小，图片样式相对简单的场景
相关：
推荐大家使用的CSS书写规范、顺序 顺序涉及浏览器渲染重绘等问题，请另查
CSS常用代码
CSS实现水平垂直居中的1010种方式（史上最全）
30个你必须记住的CSS选择符
普通table表格样式及代码大全(全)
w3c标准自适应高度height100%不起作用的问题分析
通过设置CSS position 属性来固定层的位置
CSS3 基础知识
整理：子容器垂直居中于父容器的方案
[教程] CSS入门4：css选择符
Meta 标签与搜索引擎优化
跨浏览器图像灰度(grayscale)解决方案
一行css代码搞定响应式布局
css控制默认滚动条样式
30秒CSS中文版
这种 PNG 图片前端如何实现动态图展示
入研究-webkit-overflow-scrolling:touch及ios滚动
https://www.cnblogs.com/xiahj/p/8036419.html
https://aotu.io/notes/2020/06/08/momentum-scrolling/
苹果公司在谈到黑暗模式时说它时一种有助于你专注工作的吸引人的新外观
同事也是一种全方位的对眼睛友好的无干扰环境
谷歌则从使用角度回答，生成黑暗模式可以显著降低用电量
提高低视力用户和对强光敏感用户的能见度，并且可以让任何人在低光环境下轻松的使用设备
https://segmentfault.com/a/1190000020899202
灵活运用CSS开发技巧(66个实用技巧，值得收藏)
响应式（RWD） = 所有设备的代码是一样的
自适应（AWD）= 不同设备的代码是不一样的
https://aotu.io/notes/2017/11/27/iphonex/index.html
https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/
div {
height: calc(60px(假设值) + constant(safe-area-inset-bottom));
height: calc(60px(假设值) + env(safe-area-inset-bottom));
background: #fff;
}
padding: 6px;
background: bisque;
text-align: left;
margin-bottom: 2px;
table中的td设置固定宽度，没有效果
twitter 网站是怎么根据 windows10 的“颜色”来改变网页背景颜色？
prefers-color-scheme
以上测试 windows : 个性化->颜色->选择默认应用模式
<html>
<head>
<title>每隔一定时间更换图片</title>
<script language="javascript">
<!--
Img = new Array("loading_1@2x.png","loading_2@2x.png","loading_3@2x.png","loading_4@2x.png","loading_5@2x.png","loading_6@2x.png","loading_7@2x.png","loading_8@2x.png","loading_9@2x.png","loading_10@2x.png");
size = Img.length;
i = 0;
function chImg(){
picID.src = Img[i];
i++;
if (i>=size) i = 0;
setTimeout("chImg()",500);
}
//-->
// for(var i = 0 ; i < 5 ; i++){
// var j = 0;
// var arr= [1,2,5,7,8];
// setTimeout(function(){
// console.log(arr[j ++]);
// },i*3000)}
</SCRIPT>
</head>
<body onLoad="chImg()">
<a href=""><img id="picID" border="0"></a>
</body>
</html>
方法二以上
给文字设置彩色水平流动效果
.index {
color: red;//一定要设置文字颜色，任意纯色即可
/*background: linear-gradient(to right, red, orange, yellow, green, cyan, blue, purple);*/ //不要删此行，注释即可，但对文字起作用
animation: hue 6s linear infinite;
}
@keyframes hue {
from { filter: hue-rotate(0deg); }
to { filter: hue-rotate(360deg); }
}
来自：为网站添加优衣库UNIQLOCK的音乐舞蹈时钟
对于网站的创意时钟来说，目前最好最有创意的莫过于优衣库UNIQLOCK的音乐舞蹈时钟。
优衣库（UNIOLO)是日本著名的休闲服装品牌，是排名全球服饰零售业前列的日本迅销集团旗下的核心品牌。其创意的营销受众，已经覆盖了全球超过两亿人。
这一款创意的优衣库UNIQLOCK的音乐舞蹈时钟，除了有清纯美丽的少女舞蹈外，还能带给人们在繁忙工作之余的些许放松，在视觉和听觉上都极其享受。使用这款创意时钟，不仅仅可以提供当做屏保，还可以作为博客的widget功能，丰富自己网站的内容，延长访客在网站停留的时间。据我不完全统计，几乎所有人都想把每个舞蹈姿势看完。
此外，此外UNIQLOCK的widget还有闹钟功能，你可以设定时间，到了指定时间将播放一段30秒的舞蹈及你所输入的文字。像这样的时钟widget以前接触过的还有ClockLink及Blog-Apartments，不过像UNIQLOCK这样有创意的还比较少有的。
登陆http://www.uniqlo.jp/uniqlock/ 在左侧有menu菜单，打开Blog Parts，LOCAL TIME里选择CHINA BEIJING，在SIZE里选择自己想要的尺寸，不过目前来说，只有两种尺寸可选，分别是：W：160 H：130和W：424 H：278。MUSIC的ON和OFF控制音乐的开关。
最后点击SET，就会在右侧出现可供使用的代码了。整个操作流程还是很简便的。 无论是放在自己的博文里还是放在网站的侧栏，都能带来不错的效果。
看不了 点我
来自：网站侧边栏仓鼠flash动画
网站侧边栏仓鼠flash动画 仓鼠头部会跟随鼠标移动，鼠标点击会。。。不知道该怎么描述了大家自己体验吧
在哪里？点我
代码如下：
<object data="http://cdn.abowman.com/widgets/hamster/hamster.swf?" height="100%" style="outline:none;" type="application/x-shockwave-flash" width="100%"><param name="movie" value="http://cdn.abowman.com/widgets/hamster/hamster.swf?" /><param name="AllowScriptAccess" value="always" /><param name="wmode" value="opaque" /></object>
仓鼠头部会跟随鼠标移动，鼠标点击会。。。不知道该怎么描述了大家自己体验吧
手机访问电脑版自动跳转手机版代码
<script type="text/javascript">
//手机跳转
var browser = {
versions: function() {
var u = navigator.userAgent;
var app = navigator.appVersion;
return {
trident: u.indexOf('Trident') > -1,
presto: u.indexOf('Presto') > -1,
pwebkit: u.indexOf('AppleWebKit') > -1,
gecko: u.indexOf('Gecko') > -1 && u.indexOf('Khtml') == -1,
mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/),
//是否为移动终端
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
//ios终端
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,
//android终端或者uc浏览器
//iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器
iPhone: u.indexOf('iPhone') > -1,
//是否为iPhone或者QQHD浏览器
iPad: u.indexOf('iPad') > -1,
//是否iPad
webApp: u.indexOf('Safari') == -1
//是否web应该程序，没有头部与底部
};
} ()
}
var argStr = location.search;
if (browser.versions.iPhone || browser.versions.android) {
//用手机浏览
if (argStr == "")
{
window.open('http://lxd.mobi/', '_self', '', 'true');
}
}
</script>
电脑访问手机版自动跳转电脑版
<script type="text/javascript">
var browser={
versions:function(){
var u=navigator.userAgent;
var app=navigator.appVersion;
return{
trident:u.indexOf('Trident')>-1,
presto:u.indexOf('Presto')>-1,
pwebkit:u.indexOf('AppleWebKit')>-1,
gecko:u.indexOf('Gecko')>-1&&u.indexOf('KHTML')==-1,
mobile: !!u.match(/AppleWebKit.*Mobile.*/)||!!u.match(/AppleWebKit/), //是否为移动终端
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
//iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器
iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
iPad: u.indexOf('iPad') > -1, //是否iPad
webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部
};
}()
}
var argStr=location.search;
if(browser.versions.iPhone||browser.versions.android){
//window.open('phone.html','_self','','true');
}
else
{
if(argStr=="")
{
window.open('http://www.lxd.cc/','_self','','true');
}
}</script>
HTML
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Tab切换</title>
<link type="text/css" rel="stylesheet" href="style.css">
<script src="app.js"></script>
</head>
<body>
<div class="tab" id="tab">
<div class="tab-title" id = "tab-title">
<ul>
<li class="select">
<a href="#">公告</a>
</li>
<li>
<a href="#">规则</a>
</li>
<li>
<a href="#">论坛</a>
</li>
<li>
<a href="#">安全</a>
</li>
<li>
<a href="#">公益</a>
</li>
</ul>
</div>
<div class="tab-content" id="tab-content">
<div class="tabct" style="display: block">
<ul>
<li>
<a href="#">八千家4S店参与双11</a>
</li>
<li>
<a href="#">故宫创意产品来袭啦</a>
</li>
<li>
<a href="#">阿里发布 YunOS 3.0</a>
</li>
<li>
<a href="#">阿里云运营智慧城市</a>
</li>
</ul>
</div>
<div class="tabct" style="display: none">
<ul>
<li>
<a href="#">谨防假冒客服诱导退款</a>
</li>
<li>
<a href="#">国企业厂家大联动</a>
</li>
<li>
<a href="#">八千家4S店参与双11</a>
</li>
<li>
<a href="#">八千家4S店参与双11</a>
</li>
</ul>
</div>
<div class="tabct" style="display: none">
<ul>
<li>
<a href="#">八千家4S店参与双11</a>
</li>
<li>
<a href="#">八千家4S店参与双11</a>
</li>
<li>
<a href="#">八千家4S店参与双11</a>
</li>
<li>
<a href="#">国企业厂家大联动</a>
</li>
</ul>
</div>
<div class="tabct" style="display: none">
<ul>
<li>
<a href="#">八千家4S店参与双11</a>
</li>
<li>
<a href="#">八千家4S店参与双11</a>
</li>
<li>
<a href="#">国企业厂家大联动</a>
</li>
<li>
<a href="#">八千家4S店参与双11</a>
</li>
</ul>
</div>
<div class="tabct" style="display: none">
<ul>
<li>
<a href="#">国企业厂家大联动</a>
</li>
<li>
<a href="#">国企业厂家大联动</a>
</li>
<li>
<a href="#">八千家4S店参与双11</a>
</li>
<li>
<a href="#">国企业厂家大联动</a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
list-style: none;
font-size: 12px;
}
.tab{
width: 298px;
height: 98px;
margin: 10px;
border: 1px solid #eee;
overflow: hidden;
}
.tab-title{
height: 27px;
position: relative;
background: #f7f7f7;
}
.tab-title ul{
position: absolute;
width: 301px;
left: -1;
}
.tab-title li{
float: left;
width: 58px;
height: 26px;
line-height: 26px;
text-align: center;
padding: 0 1px;
border-bottom: 1px solid #eee;
overflow: hidden;
}
.tab li a:link,.tab li a:visited{
text-decoration: none;
color: #000;
}
.tab li a:hover{
color:#f90;
font-weight: 700;
}
.tab-title li.select{
background: #fff;
border-bottom-color: #fff;
border-left: 1px solid #eee;
border-right: 1px solid #eee;
padding: 0;
}
.tab .tab-content .tabct{
margin: 10px 10px 10px 19px;
}
.tab .tab-content .tabct ul li{
float: left;
width: 134px;
height: 25px;
overflow: hidden;
}
JS
function $(id){
return typeof id=="string"?document.getElementById(id):id;
}
window.onload = function(){
var titleName = $("tab-title").getElementsByTagName("li");
var tabContent = $("tab-content").getElementsByTagName("div");
if(titleName.length != tabContent.length){
return;
}
for(var i = 0;i<titleName.length;i++){
titleName[i].id = i;
titleName[i].onmouseover = function(){
for(var j = 0;j<titleName.length;j++){
titleName[j].className = "";
tabContent[j].style.display = "none"
}
this.className = "select";
tabContent[this.id].style.display = "block";
}
}
}使用 function 参数处理来自 AJAX 请求的数据结果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用 function 参数处理来自 AJAX 请求的数据结果</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").load("demo_cd_catalog.xml",function(response,status){
if (status=="success"){
$("div").html("<ol></ol>");
$(response).find("artist").each(function(){
var item_text = $(this).text();
$('<li></li>').html(item_text).appendTo('ol');
});
//alert("总共有 "+$(response).find("cd").size()+" 张 CD")
}else{
$("div").html("错误信息: <br/>" + xhr.status + " " + xhr.statusText)
}
});
});
});
</script>
</head>
<body>
<p>艺术家</p>
<div></div>
<button>获取 CD 信息</button>
<p> XML 文件实例为 <a href="demo_cd_catalog.xml" target="_blank">demo_cd_catalog</a></p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>获取 JSON 数据</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.getJSON("demo_ajax_json.js",function(result){
$.each(result,function(i,field){
$("div").append(field+"<br>");
})
})
})
})
</script>
</head>
<body>
<button>获取 JSON 数据</button>
<div></div>
</body>
</html>
demo_ajax_json.js
{
"firstName": "Bill",
"lastName": "Gates",
"age": 60
}