工作总结
2018-12-12 09:23:23来源:博客园 阅读 ()
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改变图标背景颜色
图层选---混合图层---颜色叠加
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- 网页的标题栏添加小图标 2020-02-03
- 网站的favicon图标 2019-11-18
- css精灵图&字体图标 2019-11-15
- python day 22 CSS拾遗之箭头,目录,图标 2019-11-14
- 纯css制作电闪雷鸣的天气图标 2019-09-17
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash