工作总结

1、标题页加图标：
2、隐藏滚动条
3、placeholder 颜色改变：
4、文字两端对齐
5、微信开发之移动手机WEB页面(HTML5)Javascript实现一键拨号及短信发送功能
6、微信里不能复制解决办法
7、（1）判断内核是PC还是手机，手机微信客户端与PC微信客户端（好用）
7、（2）js判断手机系统是android还是ios（true/false）
8、动态生成元素加事件
9、select 下拉三角号去掉
10、如何完成一个段落的每行文本渐变效果
11、判断手机横屏竖屏的代码
12、webstorm相同内容选中
13、清楚css样式缓存的方法
14、为每个li添加一个索引值
15、本地存储值替代函数调用的方法
16、分辨率兼容
17、如何使img标签在div中垂直居中
18、$.get请求接口
19、给li加索引值从0开始
20、禁止链接hover，真实意义上去掉onclick事件
21、return
22、（常用）外层函数返回内层函数对象3种方法
23、解决input,number类型的maxlength无效
24、PS改变图标背景颜色

-----------------------------------------------------------------------------

1、标题页加图标：
http://www.atool.org/ico.php

2、隐藏滚动条

::-webkit-scrollbar
{
　　display:none;
}

3、placeholder 颜色改变：

::-webkit-input-placeholder {　　 /* WebKit, Blink, Edge */
　　color: #999FB1;
}
:-moz-placeholder {　　 　　　　/* Mozilla Firefox 4 to 18 */
　　color: #999FB1;
}
::-moz-placeholder {　　　　　　 /* Mozilla Firefox 19+ */
　　color: #999FB1;
}
:-ms-input-placeholder {　　　　　/* Internet Explorer 10-11 */
　　color: #999FB1;
}

4、文字两端对齐

text-align: justify;
text-align-last: justify;-moz-text-align-last:

5、微信开发之移动手机WEB页面(HTML5)Javascript实现一键拨号及短信发送功能

http://www.cnblogs.com/skylaugh/p/3277899.html

1.最常用WEB页面JS实现一键拨号的电话拨打功能：
<a href="tel:13764567708">移动WEB页面JS一键拨打号码咨询功能</a>
帅哥，美女，请注意，要把这个号码换成你的真实号码
在拨号界面，显示号码，并提示拨打。
支持大部分的浏览器，但是在QQ浏览器上支持不好。
微信现在出现屏蔽常规拨号功能，具体解决办法见《微信开发实现一键拨号出现屏蔽问题的解决方案》

2.最常用WEB页面JS实现一键发送短信功能：
<a href="sms:13764567708">移动WEB页面JS一键发送短信咨询功能</a>
在信息录入界面，显示发送号码，并提示录入信息。
支持大部分的浏览器，但是在QQ浏览器上支持不好。

3、移动web页面自动探测电话号码
<meta name="format-detection" content="telephone=no">
<meta http-equiv="x-rim-auto-match" content="none">

homehtml5/css3webapp开发-打电话发短信发邮件关注微信
webapp开发-打电话发短信发邮件关注微信
时间:14-11-05 栏目:html5/css3 作者:zongyan86 评论:0 点击: 4,551 次
本文标签： WEB web app开发 web开发 微信开发
现在web app还是比较流行的，刚用jquery mobile做了个通讯录的页面，需要直接点击电话链接直接给该电话拨打号码，发短信，发邮箱等，其实，html已经提供了这样的功能。这里暂且不考虑兼容性的问题。
实现如下：
<a href="tel:10086">10086</a>
<a href="sms:10086">短信：10086</a>
<a href="weixin://addfriend/kuaipao8-com">微信号：kuaipao8-com</a>
<a href="mailto:378588579@qq.com">电子邮箱：378588579@qq.com</a>

6、微信里不能复制解决办法：

user-select:auto !important;

7、（1）判断内核是PC还是手机，手机微信客户端与PC微信客户端（好用）：

function IsPC() {
　　var userAgentInfo = navigator.userAgent;
　　var Agents = ["Android", "iPhone",
　　　　"SymbianOS", "Windows Phone",
　　　　"iPad", "iPod"

　　];
　　var flag = true;
　　for (var v = 0; v < Agents.length; v++) {
　　　　if (userAgentInfo.indexOf(Agents[v]) > 0) {
　　　　　　flag = false;
　　　　　　break;
　　　　}
　　}
　　return flag;
}

if(IsPC()){
　　alert('我是PC')
}else{
　　alert("我是手机")
}

7、（2）js判断手机系统是android还是ios（true/false）

<script type="text/javascript">
　　var u = navigator.userAgent;
　　var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
　　var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
　　alert('是否是Android：'+isAndroid);
　　alert('是否是iOS：'+isiOS);
</script>

8、动态生成元素加事件：

$("body").delegate(".closetag","click",function(){
$(this).parent('.tag').remove();
　　alert('ok');
})

$("#provinces").on("click" , ".a_padd a" ,function(){ ... }）

9、select 下拉三角号去掉：

select {
　　appearance: none;
　　-moz-appearance: none;
　　-webkit-appearance: none;
}

10、如何完成一个段落的每行文本渐变效果

background-image: linear-gradient(to right, deeppink, dodgerblue);
-webkit-background-clip: text;
color: transparent;

11、判断手机横屏竖屏的代码：

@media all and (orientation : landscape) { 
　　h2{color:red;}　　/*横屏时字体红色*/
} 
@media all and (orientation : portrait){ 
　　h2{color:green;}　　/*竖屏时字体绿色*/
}

12、 大夺webstorm相同内容选中：

alt+j

13、清楚css样式缓存的方法：
<link rel="stylesheet"href="../resources/css/recruit_list.css?v_1.1">

14、为每个li添加一个索引值：

$lis = $list.find('li')
$lis.each(
　　function (i){
　　　　$(this).attr("data-index",i)
　　}
)

15、本地存储值替代函数调用的方法：

localStorage.setItem("getIndex",$index) //存储名字为name值为caibin的变量
localStorage.getItem("getIndex") //getIndex,读取保存在localStorage对象里名为name的变量的值

清空localStorage：
localStorage.clear()

16、分辨率兼容

;(function(win,doc){
　　var rem = 40/750*doc.documentElement.clientWidth;
　　doc.documentElement.style.fontSize=rem+'px';
　　win.addEventListener('resize',function(){
　　　　var rem = 40/750*doc.documentElement.clientWidth;
　　　　doc.documentElement.style.fontSize = rem+'px';
　　},false)
})(window,document);

17、如何使img标签在div中垂直居中

div{ display:block; width:200px; height:120px; border:1px solid #ccc; text-align:center; display:table-cell;vertical-align:middle;}

div img{vertical-align:middle;display:inline;}

18、$.get请求接口：

格式：
//$.get三个参数，这里第二个｛data:我传的｝，data是后台给的，
$.get('http://dev.admission.edvantage.com.cn/?site=user&ctl=video&act=index' , {data:我传的} , function(res){
　　if(res.status == 'true'){
　　console.log(res);
}
})
不传数据的写法：
$.get(apiUrl + '?site=user&ctl=video&act=index' , {} , function(res){})

$.ajax请求接口：
$.ajax({
　　url:'http://dev.admission.edvantage.com.cn/?site=user&ctl=video&act=index',
　　type:'GET',
　　data:{
　　　　id:1　　//这里是后台让我传的东西，只要接口数据不写
　　}
　　success:function(res){
　　　　console.log(res.data)
　　}
})
$.post请求接口：
给的接口和要传的值：http://dev.admission.edvantage.com.cn/user/video/get_student_video.html?video_id=9&student_id=18（每个列表中的id值传过去）
var dataParam = {
　　'video_id':video_id,
　　'student_id':student_id,
};
$.post('http://dev.admission.edvantage.com.cn/user/video/get_student_video.html' , dataParam , function(res){
　　if(res.status == 'true'){
　　　　var data = res.data.list;
　　　　//console.log("1:"+data);

　　}
　　}) .then(function(){　　//then这里是执行完上边的之后执行的，新知识
　　　　$('#video_list').find('li').eq(0).trigger('click');
　　})
}

19、给li加索引值从0开始：

$lis.each(
　　function (i){
　　$(this).attr("data-index",i)
　　}
)

20、禁止链接hover，真实意义上去掉onclick事件：

不可点击，类似于disabled一样
CSS3样式：pointer-events:none

 21、return：

else{
if(!(reg.test(username))) {
　　//如执行false下边不执行
　　return false;
}
　　//如上边if不执行，执行这里true，相当
　　return true;
}

22、（常用）外层函数返回内层函数对象3种方法：

1、return function(){...}
2、直接给全局变量赋值一个内部function
3、将内部函数保存在一个对象的属性或数组元素中

例2：闭包，结果999 1000 //鄙视题

function outer(){
　　var i=999;
　　nAdd=function(){ return i++}//2、直接给全局变量赋值一个内部function
　　　　return function(){console.log(i)}
}
var getN = outer();
getN();　　//999
nAdd();　　//只做了i++,没输出
getN();　　//1000

23、解决input,number类型的maxlength无效：

使用input数字number类型的时候maxlength无效，假设需要控制输入数量为5，可以用以下方式：
无效：
<input type="text" maxlength="5" /> 效果ok，当 <input type="number" maxlength="5" />
有效：
<input type="number" oninput="if(value.length>5)value=value.slice(0,5)" />

24、PS改变图标背景颜色
图层选---混合图层---颜色叠加

25、二维码

https://cli.im/text?c801aa572463e9e17aef2d6d6affb527

 26、不做任何操作，不跳页面

<a href="javascript:;">连接</a>
<a href="javascript:void(0);">连接</a>

27、js中offsetWidth取不到值？

oPopwin.offsetWidth
查看是否有设置display:none，

28、js里appendChild用法？

parentNode.appendChild()需要先原生创建节点，节点内容成为了document的一部分，且不直接支持传字符串

var btn = document.createElement('div');

29、字符串内容拼接：

for(var i = 0,opts='';i<aProvince.length;i++){
        opts +='<option>'+aProvince[i].name+'</option>';
}

oSelect.innerHTML = opts;

替代：

for(var i = 0,opts='';i<aProvince.length;i++){
      var oProvince =aProvince[i];
      var option = document.createElement('option');
      option.innerHTML = oProvince.name;
      oSelect.append(option)
}

30、HTML DOM cloneNode() 方法

obj.cloneNode(true) 方法创建节点的拷贝，并返回该副本。

如果您需要克隆所有后代，参数设置 true，否则设置为 false。

 

31、 removeChild() 方法

父节点.removeChild(子节点)

32、取消input复选框选中状态的误区

 http://www.17sucai.com/pins/demo-show?id=6904

正确：oInput.checked=false;   或 oInput.checked='';
错误：oInput.setAttribute('checkd',false);

33、如果有border时oDiv.style.width与 oDiv.offsetWidth值会不同

   #aa{width:100px;border:1px solid #ddd;}
    var oDiv = document.getElementById('aa');
    console.log(oDiv.style.width);  //100，
    console.log( oDiv.offsetWidth)  //102， 计算加border后的什

34、if else if else根据判断条件是否成立，从上到下，三者选其一，只要有一个成立，之后的就不执行 ，结果1

 if(1==1){
      alert(1)
 }else if(1!=0){
      alert(2)
 }else {
      alert(3)
  }