setTimeout方法使用时需注意：
//以下两种方式都行： setTimeout(function () { test(); }, 2000); //或者 setTimeout('test()',2000); function test(){ alert("aaaa"); } //以下是错误示例 setTimeout(test(),2000); //会马上执行，没有延迟效果
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
$(selector).fadeToggle(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeToggle() 方法：
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
效果图如下
//图例组件
legend: {
top: 'center',
right: 30,
data: [],
width: "auto",
itemWidth: 10, // 小方块尺寸
itemHeight: 10,
textStyle: {
color:'#90CCFF',
lineHeight:20,
// 通过rich自定义尺寸，加宽度使百分比及数值各自对齐
rich:{
a:{
width:100,
align:'left'
},
b:{
width:40,
align:'right'
}
}
},
orient: 'vertical', // 竖向排列
// 通过formatte自定义格式
// 因为formatter的参数里只有name一个参数，所以需要通过获取的数据匹配显示
// 这里的optionData是获取到的数据，格式为
// optionData:[
// { value: 47.01, name: "水果" },
// { value: 31.67, name: "蔬菜" },
// { value: 12.51, name: "禽畜" },
// { value: 8.24, name: "禽蛋" },
// { value: 7.27, name: "水产品" },
// { value: 6.32, name: "其他" }
// ],
formatter: (name) => {
var total = 0;
var tarValue;
this.optionData.forEach((item,i) => {
total += Number(item.value)
if (item.name == name) {
tarValue = Number(item.value ? item.value : 0)
}
});
var percent = ((tarValue / total) * 100).toFixed(2)
let arr = [
'{a|'+name+" : "+percent+'%}'+'{b|'+tarValue+'张}'
]
return arr
}
}
自定义legend的方式就是这样，遇到格式不同的可以参考上面的方式自定义
单独定义echarts中每个图例的样式,自定义图例的点击方法
//用不同样式的图例用数组写对应图例的样式
legend:[{
top: "15%",
right: "24%",
textStyle: {
color: "#3BAEFE",
fontSize: 14,
fontFamily: "微软雅黑"
},
itemWidth: 27,
itemHeight: 16,
data:[{
name: "农药",
icon: "circle"
},{
name: "LOL",
icon: "rect"
}]
},{
top: "15%",
right: "15%",
textStyle: {
color: "#3BAEFE",
fontSize: 14,
fontFamily: "微软雅黑"
},
itemWidth: 33,
itemHeight: 16,
data:[{
name: "农药+LOL",
icon: "image:///soyking/static/image/echarts/merge.png" //引用自定义的图片
}]
},{
top: "15%",
right: "15%",
textStyle: {
color: "#3BAEFE",
fontSize: 14,
fontFamily: "微软雅黑"
},
data:["\n","\n","\n","农药占比","LOL占比"]
}],
结果:
自定义图例的方法 (点击图例，显示图例的选中结果)
var bar = echarts.init(document.getElementById("barDiv"));
//自定义图例的方法
bar.on("legendselectchanged",function(obj){
//获取图例选择的结果
var selected = obj.selected;
for(var i in selected){
alert(selected[i]);
}
});
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
代码如下
var data = [ { name: "一次检验数/条", value: 150 }, { name: "多次检验数/条", value: 80 } ]; var option = { legend: { show: true, left: "center", top: "245", itemHeight: 13, itemWidth: 13, itemGap: 35, icon: "circle", data: data, formatter: function(name) { var total = 0; var target; var value; for (let i = 0, l = data.length; i < l; i++) { value = data[i].value; total += data[i].value; if (data[i].name == name) { target = data[i].value; } } var arr = ["{a|" + name + "}", "{b|" + target + "}"]; return arr.join("\n"); }, textStyle: { rich: { a: { color: "#B6B6B6", verticalAlign: "top", align: "center", fontSize: 12, padding: [0, 0, 28, 0] }, b: { align: "left", fontSize: 18, padding: [0, 10, 10, 0], lineHeight: 25, color: "#181818" } } } },
echarts legend 自定义图例
legend: {
selectedMode: true,
top: 0,
right: 0,
orient: 'vertical', // itemWidth: 24, // itemHeight: 2, textStyle: {
fontFamily: 'ABBvoiceCNSG-Regular',
fontSize: 12,
}, // icon: 'rect', data: [
{
name:"高严重等级报警",
icon:'rect',
},
{
name:"低严重等级报警",
icon: 'rect' },
{
name:"健康度",
icon: 'line' }
]
},
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
App界面设计对于设计师而言一直是盛久不衰的话题，尤其是如今越来越多的流量转移到了移动平台，使得更多的UI设计师涌入移动端领域，甚至出现了市场饱和的言论，对于从事移动端的UI设计师来讲，充满压力的同时又面临无限机遇，唯有不断的学习才能滋生出源源不断的设计灵感，站稳脚跟。
摹客想在这方面给各位设计师朋友做点什么，除了提供简单好用的设计工具，我们也整理了非常多的优秀设计案例，希望可以对设计师朋友有借鉴意义。这将会是一个系列的专题，我们以月为单位，整理了国内外设计师的优秀APP界面设计案例，我们是搬运工，更是好设计的传达者，希望你会喜欢。
接下来为大家分享精美的app UI设计案例：
--手机appUI设计--
更多精彩文章：
JS中的对象是属性和行为的结合体，其中属性是对象的静态特征，行为又称方法，是对象的动态特征。
JavaScript中的对象主要分为三大类：
定义非空对象
// 非空对象： var 对象名 = { 属性名： 值, ... 方法名: function([参数]){ 方法体语句; } ... }
var p1 = { color: '黑色',//给对象添加属性 weight: '188g',//属性之间用逗号隔开 screenSize: 6.5, call: function(name){//给对象添加方法 console.log("打出电话："+name); }, sendMassage: function(msg){ console.log("发出的信息是："+msg); }, playVideo: function(){ console.log("播放视频"); }, playMusic: function(){ console.log("播放音乐"); } } console.log("手机颜色:"+p1['color']);//也可以使用 对象['属性']来输出属性值 console.log("手机重量:"+p1.weight); console.log("屏幕尺寸:"+p1.screenSize); p1.call("张三");//调用对象的发方法 p1["sendMassage"]("helo"); p1.playVideo(); p1.playMusic(); console.log(p1);
使用new Object()创建对象
var p = new Object(); // 创建一个空对象p
p2.name = '刘备'; p2.sex = '男'; p2.age = 32; p2.sayHello = function(){ console.log('Hello'); } p2.sayHello();//调用对象的方法
可以使用构造函数来创建对象：
语法： new 构造函数名( )
function Student(name,sex,age){ this.name = name;//这里的this指向的是构造函数新创建的对象 this.sex = sex; this.age = age; this.show = function(){ console.log("姓名："+this.name) console.log("姓别："+this.sex) console.log("年龄："+this.age) } } var s1 = new Student('乔峰','男',28);//s1为构造函数创建的新对象 即实例 s1.show(); var s2 = new Student('段誉','男',23); s2.show();
注意："构造函数"可以有参数，也可以没有参数，如果没有参数小括号可以省略
遍历对象的属性和方法：使用for…in循环
for(var 变量名 in 对象名){ 循环语句 }
function Student(name,sex,age){ this.name = name; this.sex = sex; this.age = age; this.show = function(){ console.log("姓名："+this.name) console.log("姓别："+this.sex) console.log("年龄："+this.age) } } // s2是要遍历的对象 var s2 = new Student('段誉','男',23); for(var k in s2){ console.log(k);//依次输出 name sex age show() console.log(s2[k]);//依次输出 段誉 男 23 }
in运算符
判断成员(属性)在对象中是否存在，存在返回true;不存在返回false。
JavaScript提供了很多常用的内置对象，包括数学对象Math、日期对象Date、数组对象Array以及字符串对象String等。
Math对象：用来对数字进行与数学相关的运算，不需要实例化对象，可以直接使用其静态属性和静态方法.
Math对象:不需要实例化
Math.PI:算数常量PI Math.abs(x):返回x的绝对值
Math.max(args...):返回最大数
Math.min(args...):返回最小数
Math.pow(x,y):返回x的y次方
Math.sqrt(x):返回x的算术平方根
Math.random():返回0.0到1.0之间的随机数
Math.round(x):返回最接近x的整数
Math.floor(x):返回一个小于等于x 并且与它最接近的整数
Math.ceil(x):返回一个大于等于x 并且与它最接近的整数
Date对象：需要使用new Date()实例化对象才能使用，创建一个对象 Date()是一个构造函数，可以给该构造函数传递参数生成一个日期对象。
// 1.创建一个Date对象 没有参数 var date1 = new Date(); console.log(date1); // 2.传入年 月 日 时 分 秒 创建一个指定日期时间的Date对象 // 月份是 0-11 var date2 = new Date(2021,4,22,10,17,55); console.log(date2); // 3.传入一个日期和时间字符串创建一个Date对象 var date3 = new Date("2021-5-22 18:19:25"); console.log(date3); console.log(date3.getMonth())//4 console.log(date3.getTime())//表示Date对象距离1970年1月1日午夜之间的毫秒数 console.log(date1.toLocaleDateString())//2021/6/14 console.log(date1.toLocaleString())//2021/6/14 下午11:17:36 console.log(date1.getFullYear())//2021
数组：是一些类型相同的数据的集合，它和普通的对象功能类似，也是用来存储一些值，数组是使用数字来作为索引操作内部的元素。
数组的创建
var arr=[]//创建一个空数组
var arr = new Array();//定义一个空数组
判断一个对象是不是数组的两种方法：
var arr = []; var obj = {}; console.log(Array.isArray(arr));//true console.log(Array.isArray(obj));//false console.log(arr instanceof Array);//trrue
关于数组的其他方法之前的文章要有详细介绍，这里不多做解释。
String对象:字符串对象，必须使用new String()来创建
字符串常用方法
- charAt(n) 返回n位置上的字符串 - concat(s1,s2,...) 连接多个字符串 - charCodeAt(n) 返回n位置上的ASCII码 - split('分隔符') 将字符串按给定的分隔符 转换成字符串数组 - substr(start,length) 从start开始提取length个字符构成一个新串 - substring(from,to) 提取from和to之间的字符串构成一个新串 - toLowerCase() 将串中的大写字符转换成小写 不影响原字符串 返回一个新字符串 - toUpperCase() 将串中的所有小写转换成大写 不影响原字符串 返回一个新字符串 - replace(str1,str2) 使用str2替换字符串中的str1 返回替换结果 不影响原字符串
// 输入一个由字母组成的字符串,统计串中每个字母出现的次数 var str = 'abBSdXbdea'; var lower = new Array(26);// 存放26个小写字母各自出现的次数 var upper = new Array(26);// 存放26个大写字母各自出现的次数 // 初始化两个数组 for(var i=0;i<lower.length;i++){ lower[i] = 0 upper[i] = 0 } for(var k=0;k<str.length;k++){ if(str.charAt(k)>='a' && str.charAt(k)<='z'){ lower[str.charCodeAt(k)-97]++ }else if(str.charAt(k)>='A' && str.charAt(k)<='Z'){ upper[str.charCodeAt(k)-65]++ } } console.log(lower); console.log(upper);
/* 输入一个十进制整数和一个数制（2、8、16）将该十进制整数转换成
对应的数值格式输出
取余法：
m=15 k=8
m%k 将余数存放在数组中
*/ var m = parseInt(prompt('请输入一个整数：')); var k = parseInt(prompt('请输入一个数制(2~16)')); var result = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F']; var arr = new Array();//存放数制转换的结果 var i = 0; while(m!=0){//对m进行数制转换 将余数放在arr数组里 arr[i] = m%k; m = parseInt(m/k); i++; } var str = ''; if(k==8){ str = '0'; }else if(k==16){ str = '0x'; } for(var i=arr.length-1;i>=0;i--){ str += result[arr[i]]; } console.log('转换的结果为：'+str);
值类型: 简单的数据类型(字符串,数值型,布尔型,undefined,null)
引用类型: 复杂数据类型(对象) 变量中保存的是引用的地址
注意： 引用类型的特点是，变量中保存的仅仅是一个引用的地址，当对变量进行赋值时，并不是将对象复制了一份，而是将两个变量指向了同一个对象的引用。
下面对内存中的栈和堆进行分析
栈(stack)：会自动分配内存空间，会自动释放，简单数据类型存放到栈里面。
堆(heap)：动态分配的内存，大小不定也不会自动释放，复杂数据类型存放到堆里面。
由此可见存放在堆内存中的对象，变量实际保存的是一个指针，这个指针指向另一个位置，通过这个指针来寻找堆中存储的对象的属性和值，并且每个空间大小不一样，要根据情况开进行特定的分配。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
转自csdn博客
分享此文一切功德，皆悉回向给文章原作者及众读者.
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
1.随着互联网的发展，页面传递给后台有太多需要验证的东西，尽管后端的代码是能够实现对传递过来的数据进行校验和判断的，但是这样的话无疑是加重了后台程序的工作任务量，于是广大互联网工作人员迫切需要有一种新的办法/语言能够实现这样的效果，于是js也就是在这样的一个大的时代背景下诞生的
2.js最开始的时候是不叫js而是叫scrpit语言，他们也想将这个前景光明的明日之星卖给微软，但是微软没有买下，在种种机缘巧合之后被Sun公司收购了，为了让其与java语言走的近点 ，更是改名为JavaScript简称为js
在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成
1997年，在ECMA（欧洲计算机制造商协会）的协调下，由Netscape、Sun、微软、Borland组成的工作组确定统一标准：ECMA-262。
1.弱类型语言：在书写的时候不去做明确的数据类型的限定 例如 var a=3.14 var b=“998”
2.运行在浏览器端的解释执行性语言(js—>node.js可以运行在服务器上)
3.基于对象的编程语言
4.跨平台性：JavaScript是依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持JavaScript的浏览器就可正确执行。从而实现了“编写一次,走遍天下”的梦想。
5.动态性：JavaScript是动态的，它可以直接对用户或客户输入做出响应，无须经过Web服务程序。它对用户的反映响应，是采用以事件驱动的方式进行的。所谓事件驱动，就是指在主页（Home Page）中执行了某种操作所产生的动作，就称为“事件”（Event）。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。
可以简单的理解为：只要用户发出动作，js就会产生响应
6.安全性：JavaScript是一种安全性语言，它不直接允许访问本地的硬盘，并不能直接将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失。
小结：js现在的用途
1）作用于浏览器端帮助提升用户的体验度
2 ) 可以用来编写游戏脚本
3）可以被构建成各种组件(node.js,React.js，vue.js, Jquery)
<html> <head> <meta charset="UTF-8"> <title>JS</title> </head> <body> <script type="text/javascript"> alert("Hello World"); /*弹出对话框*/ </script> </body> </html>
小结：1.js在页面内使用的时候必须要写在<script>标签内
2.js代码书写的时候不用分号标识一行编程语句的结束
3.在js代码中xxx():此时表明这是一个函数
4.alert():以弹窗的形式将括号内的内容展示出来
JavaScript： 是一个脚本语言。它是一个轻量级，但功能强大的编程语言
1.数据类型：虽然JavaScript在书写校验上不去区分数据的类型，但是并不意味着是不区分数据类型，而是通过在浏览器中内置的JS解析器/引擎自动的去判断的
---------------------------------------------------------------------------------------------------------
1.1数字：
var a=12 //整数
var b=2.3 //浮点数或者说是小数型
var c=-0.5
友情提示：1）在js中变量名必须以字母或下划线（"_"）开头
2）变量可以包含数字、从 A 至 Z 的大小写字母
3）JavaScript 区分大小写，即变量 myVar、 myVAR 和 myvar 是不同的变量
---------------------------------------------------------------------------------------------------------
1.2逻辑型或布尔型：
var a= true
var b=false
alert(a)
alert(b)
---------------------------------------------------------------------------------------------------------
1.3Undefined 和 null
Undefined： 用于存放 JavaScript 的 undefined 值，表示一个未声明的变量，或已声明但没有赋值的变量，或一个并不存在的对象属性
null:可以通过将变量的值设置为 null 来清空变量，其意思为空值
var a=""
var a=null
var a
alert(typeof(a))
---------------------------------------------------------------------------------------------------------
1.4字符串： 可以使用单引号或双引号
var firstName=“biil”
var familyName=‘Gates’
alert(firstName+familyName)
---------------------------------------------------------------------------------------------------------
1.5日期：
var myDate=new Date()
alert(myDate)/默认是格里尼形式的日期格式/
提示：Date是js中的一个内置的类
new：为类Date在内存中创建一个内存空间，进而实现实例化
补充：关键字：就是具有特殊含义的词
---------------------------------------------------------------------------------------------------------
1.6数组：是一种存放数据的容器，其一般可以存放多个，且需要知道其长度
var array=[40, 100, 1, 5, 25, 10]
alert(array[0])
---------------------------------------------------------------------------------------------------------
注释：
单行注释：//
多行注释：/**/
扩展：注释的作用：
1）统一规范
2）注解，帮助理解/阅读代码
3）扯淡
---------------------------------------------------------------------------------------------------------
连接字符和转义字符：
连接字符：在js中场用+表示为连接字符
例如： var a=123
alert(‘变量a的值为：’+a)
转义字符：具有特殊含义的字符
\n 换行符 alert(“这是第一局 \n 这是第二句”)
\t 制表符 alert(“这是第一局 \t 这是第二句”)
---------------------------------------------------------------------------------------------------------
2.运算符：
2.1算术运算符： +， -， *， /， %，++，--
++：自动加1 例如 var a=12
alert(a++)
++在前：先计算再输出； ++在后：先输出再计算
–：自动减1，例如 var h=6
alert(a–)
---------------------------------------------------------------------------------------------------------
2.2关系运算符： > ，>=， <，<=, !=, ==,===
---------------------------------------------------------------------------------------------------------
2.3逻辑运算符：
与 ：&& ：全真为真，只要有一个假则为假
或 ：|| ：全假为假，只要有一个为真则为真
非 ：！ ：取相反的
JavaScript 可以通过不同的方式来输出数据：
1）使用 window.alert() 弹出警告框。
<html> <body> <h1>使用 window.alert() 弹出警告框</h1> <script> window.alert(5 + 6); </script> </body> </html>
2）使用 document.write() 方法将内容写到 HTML 文档中。
<html> <body> <h1>我的第一个 Web 页面</h1> <script> document.write(123); </script> </body> </html>
3）使用 innerHTML 写入到 HTML 元素。
<html> <body> <h1>使用 innerHTML 写入到 HTML 元素</h1> <p id="demo">我的第一个段落</p> <script type="text/javascript"> document.getElementById("demo").innerHTML = "段落已修改。"; </script> </body> </html>
使用innerHTML方法，将前面定位到的选择器中的标签内容进行更改
4）使用 console.log() 写入到浏览器的控制台。
<!DOCTYPE html> <html> <body> <h1>使用 console.log() 写入到浏览器的控制台</h1> <script> a = 5; b = 6; c = a + b; console.log(c); </script> </body> </html>
console.log()会将想要输出的数据写到网页的控制台中显示
1）顺序语句：js默认是从上向下自动执行的
2）选择语句：
2.1）二路分支：
if(条件)
{
//JavaScript代码;
}
else
{
//JavaScript代码;
}
2.2）多路决策：
switch (表达式)
{
case 常量1 :
JavaScript语句;
break;
case 常量2 :
JavaScript语句;
break;
…
default :
JavaScript语句;
}
小结：switch…case…default不仅有多路决策的特性，还有穿透性
或者：
if (time<10) { alert("早上好"); } else if (time>=10 && time<16) { alert("中午好"); } else { alert("晚上好!"); }
3）循环语句：
for循环语句：
for (var i=0;i<10;i++) { alert("当前i的值为:"+i) }
while循环语句：
var i =1 while (i>5) { alert("当前i的值为："+i) i++; }
do…while循环：
var i=5 do { alert("执行了") i++; } while (i<5);
备注：for：知道次数的循环
while：>=0次的循环
do…while：>=1次的循环
break：语句用于跳出循环。
continue：用于跳过循环中的一个迭代。
1.typeof 操作符：可以使用 typeof 操作符来查看 JavaScript 变量的数据类型。
2.将数字转换为字符串
var a=123 //第一种方法，用String //var castResult=String(a) //第二种方法，用toString方法 var castResult2=a.toString() alert(typeof(castResult2))
3.将字符串转换为数字
var a="123" //用Number转换 var b=Number(a) //用parseInt方法将字符串强行转换为数字 //var b=parseInt(a) alert(typeof(b)) alert(b+998)
1.match():匹配字符串可用正则表达式
2.search() 方法 用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置
var str = "abcderfha"; //返回查找到的下标位置 alert(str.search("er")) //返回 4 //查查找不到的时候返回-1 alert(str.search("zy"))//返回-1
3.replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
var str = "Hello World"; alert(str.replace("World","javascript"))//显示结果为Hello javascript
语法： function 函数名( ){
}
实例一
<html> <head> <meta charset="UTF-8"> <title>JS函数</title> </head> <script type="text/javascript"> function sum(a,b){ alert(a+b) } </script> <body> <input type="button" value="求和" onclick="sum(3,4)" /> </body> </html>
定义一个求和函数，当点击求和按钮的时候将计算出传入的两个参数的和
ps：onclick单击事件
var xx =function(x,y){
alert(x+y)
}(23,34);
或
(function( o ){
alert(o)
})(“你好”)
实例二：
<script type="text/javascript"> var fun=function(a,b){ alert(a+"\n"+b) } fun(12,45); </script> ------------------------- <script type="text/javascript"> (function( o ){ alert(o) })("你好") </script>
创建一个数组：三种方式
1：常规方式
<script type="text/javascript"> var myCars=new Array(); myCars[0]="nike" myCars[1]="李宁" myCars[2]="安踏" alert(myCars[1]) </script>
2：简洁方式
<script type="text/javascript"> var myCars=new Array("nike","李宁","安踏"); alert(myCars[1]) </script>
3：字面方式
<script type="text/javascript"> var myCars=["nike","李宁","安踏"]; alert(myCars[1]) </script>
2：访问数组：通过指定数组名以及索引号码，你可以访问某个特定的元素
例如：var name=myCars[0];
3:数组的方法和属性
数组名.length ： 数组 中元素的数量
数组名.indexOf(“abc”)：“abc” 值在数组中的索引值
4：数组的排序
数组名.sort(); ：将数组按正序排序，但是是按照字符串的排序方式来排序，不管里面是数字还是什么都是按字符串的排序方式来排序
reverse（）：将一个数组中的元素的顺序反转，（即是将数组中的元素的头变成尾，尾变成了头，不是其他的）
扩展：将数组先用sort（）方法进行正序排序，在利用reverse（）方法反转，即可达成降序的目的
字符串中常用的属性和方法
str.length:获取字符串的长度
str.match("")：内容匹配
str.replace（）：替换内容
var str="adsfadsf"; var n=str.replace("adsf","abcx"); var s=str.length;
1.对象：是属性和/方法的组合
属性：是对象所拥有的一组外观特征，一般为名词
方法：是对象可以执行的功能，一般为动词
例如：对象：汽车
属性：型号：法拉利 颜色：绿色
方法：前进、刹车、倒车
PS:三类已经存在的对象：
浏览器对象：BOM(已经存在于浏览器中的，到时候我们直接调用即可，例如Screen,History,Location,Navigator)
js脚本对象:数组，字符串，日期，Math等(JS语言中已经写好的具有某一些功能的对象，例如Array,Number,Math…)
HTML文档对象：DOM（已经存在于HTML中的，且已经写好了，用的时候可以直接调用即可，例如Document）
例如：
<script type="text/javascript"> function Car(name,color) { this.name=name; this.color=color; this.type="轿车"; this.fun=function(){alert("100km/h");} } var car1=new Car("奥迪","蓝色"); var car2=new Car("奔驰","绿色"); alert(car1.type); //轿车 car1.fun();//100km/h </script>
1.id选择器：通过 id 查找 HTML 元素，如果找到该元素，则该方法将以对象的形式返回该元素。
document.getElementById("id1").value //获取id为id1的标签中的value值
2.name选择器：通过name查找到HTML的元素，如果找到元素了，则会返回一个数组
var arr=document.getElementsByName("like") //将name为like的标签全部存入arr数组中
3.通过标签名找到 HTML 元素：
getElementsByTagName("p"); var habbies=document.getElementsByTagName("input")//其他的都与步骤2一样
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>确认框</title> </head> <body> <p>点击按钮，显示确认框。</p> <button onclick="myFun()">点击</button> <p id="demo"></p> <script type="text/javascript"> function myFun() { var x; var r=confirm("是否提交商品订单");//弹出一个确定框，确定，返回true，取消返回false if(r==true){ x="提交成功，已确定" } else{ x="提交失败，已取消" }、 //抓取掉id为demo的标签，在屏幕显示x内容 document.getElementById("demo").innerHTML=x; } </script> </body> </html>
点击确定，会在屏幕显示”提交成功，已确定“，点击取消，会在屏幕显示"提交失败，已取消"
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>确认框</title> </head> <body> <p>点击按钮，显示输入框。</p> <button onclick="myFun()">点击</button> <p id="demo"></p> <script type="text/javascript"> function myFun() { var x; var r=prompt("请输入你的名字","Hello"); //弹出对话框，可输入名字 //判断如果输入的不为空或者不是空字符串，则x被赋值 if(r!=null && r!=""){ x="早上好"+r+"今天又是新的开始，加油" } //抓取掉id为demo的标签，在屏幕显示x内容 document.getElementById("demo").innerHTML=x; } </script> </body> </html>
点击确定以后则会将被赋值的x显示在屏幕中
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
转自csdn博客
分享此文一切功德，皆悉回向给文章原作者及众读者.
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
使用js动态引入js和css文件方法
方法1：
//引入css var head = document.getElementsByTagName('head')[0]; var link = document.createElement('link'); link.href = 'css/style.css'; link.rel = 'stylesheet'; link.type = 'text/css'; head.appendChild(link); //引入js var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); script.src = 'js/js.js'; script.type = 'text/javascript'; head.appendChild(script);
方法2：
//引入css new_element=document.createElement("link"); new_element.setAttribute("rel","stylesheet"); new_element.setAttribute("type","text/css"); new_element.setAttribute("href","css/style.css"); document.body.appendChild(new_element); //引入js new_element=document.createElement("script"); new_element.setAttribute("type","text/javascript"); new_element.setAttribute("src","js/js.js"); document.body.appendChild(new_element);
方法3：
var importCssJs = { css: function(path) { if(!path || path.length === 0) { throw new Error('参数"path"错误'); } var head = document.getElementsByTagName('head')[0]; var link = document.createElement('link'); link.href = path; link.rel = 'stylesheet'; link.type = 'text/css'; head.appendChild(link); }, js: function(path) { if(!path || path.length === 0) { throw new Error('参数"path"错误'); } var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); script.src = path; script.type = 'text/javascript'; head.appendChild(script); } } //引用方法 importCssJs.css('css/style.css'); importCssJs.js('js/js.js');
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
在源代码加上
<i class="layui-icon layui-icon-tips" lay-tips="最大长度为16个文字" ></i>
加上js代码
$('*[lay-tips]').on('mouseenter', function(){
var content = $(this).attr('lay-tips');
this.index = layer.tips('<div style="padding: 10px; font-size: 14px; color: #eee;">'+ content + '</div>', this, {
time: -1
,maxWidth: 280
,tips: [3, '#3A3D49']
});
}).on('mouseleave', function(){
layer.close(this.index);
});
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
在项目实际开发我们会遇到表格列过多，表格内容过长的困扰，表格数据的展现很不理想，今天我为大家介绍如何结合Datatables 使用表格固定列；
1、在屏幕足以展现内容的情况下
2、模拟屏幕过小 或表格列过多的情况
从效果图可以看出，我将左侧两列和右侧一列 作为固定列 ，中间内容可拖动显示
//引入juqery datables fixedColumns 根据各自的样式需求 本人使用的是bootstrap
<link href="您的资源目录/dataTables.bootstrap.css" rel="stylesheet">
<link href="您的资源目录/fixedColumns.bootstrap.css">
<script src='您的资源目录/jquery.js'></script>
<script src='您的资源目录/jquery.dataTables.min.js'></script>
<script src='您的资源目录/dataTable.fixedColumns.js'></script>
//异步请求获取表格渲染数据
var dataTable;
$(function () {
dataTable = $('#表格ID')..DataTable({
"processing": true,
"serverSide": true,
"ajax": {url: "您的请求URL"},
"scrollX": true,
"autoWidth": true,
"columns": [
...
]
});
})
new $.fn.dataTable.FixedColumns(dataTable,{
"iLeftColumns":2, //开启左侧两列固定
"iRightColumns":1, //开启右侧1列固定
"drawCallback": function(){
//重绘的回调执行
}
});
在datableas 初始化后 根据设定的开启固定列，获取datables 对应表格数据 进行复制，然后采用position: absolute 在原表格 上加多一层固定列表格的展现，感兴趣的朋友可以浏览器DEBUG查阅；
1、固定列出现滚动条
出现这个问题是 dataTable.fixedColumns.js 插件计算固定列宽的问题，可以在源码进行修改；或者在fixedColumns.js 重绘成功后回调中执行
$(".DTFC_Cloned").css("width","auto");
2、采用ICheck 插件无法点击 和 勾选问题
原因：因为异步加载数据的问题 ，我们每次在datables重绘的回调函数中 进行ICheck 再次初始化；
而dataTable.fixedColumns.js 是 datables 初始化完成后才执行的 ，上文也提到固定列实现的原理，其复制了固定列数据 position: absolute，那么展现给我们看到的是已经初始化的ICheck ，真正可以勾选点击的其实在下一层；
解决思路：在fixedColumns.js 重绘成功后回调中初始化ICheck； 再重新注册全选 和反选事件；
//朋友们可以根据需求 自定定义自己的初始化和事件注册
new $.fn.dataTable.FixedColumns(dataTable,{
"iLeftColumns":2,
"iRightColumns":1,
"drawCallback": function(){
//重绘Icheck 这里是我封装的初始化方法
iCheckInitFunction();
//重新设置全选事件 这里是我全选/反选的注册事件
TableiCheck(".DTFC_Cloned thead tr th input.i-checks", ".DTFC_Cloned tbody tr td input.i-checks");
}
});
大家可以选择适合自己的样式
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
默认展开
// 所有节点加载完成后触发$('#jstree1').on("ready.jstree", function(e, data) {// 默认选择节点$('#jstree1').jstree('select_node', ['child-1-1', 'child-2-2']);// 默认展开/打开全部$('#jstree1').jstree().open_all();});// 选择更改时触发$('#jstree1').on("changed.jstree", function(e, data) {console.log(data.selected);});
默认收起
// 所有节点加载完成后触发$('#jstree1').on("ready.jstree", function(e, data) {// 默认选择节点$('#jstree1').jstree('select_node', ['child-1-1', 'child-2-2']);// 默认关闭/收起宣布$('#jstree2').jstree().close_all();});// 选择更改时触发$('#jstree1').on("changed.jstree", function(e, data) {console.log(data.selected);});蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com