前端知识点总结

css实现隐藏多余溢出文字并显示省略号

	
	



	
溢出文字隐藏溢出文字隐藏溢出文字隐藏溢出文字隐藏

css 把图片变为为黑白

img{
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
}

css 图片增加模糊效果

img{
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px); 
}

css scale 元素放大缩小效果

<style>
.trans-scale {
    width: 300px;
    height:300px;
    margin:100px auto;
    background:#99F;

    transition-function: ease-out;
    transition-duration: 1000ms;
    -webkit-transition-function: ease-out;
    -webkit-transition-duration: 1000ms;
    -moztransition-function: ease-out;
    -moztransition-duration: 1000ms;
    -o-transition-function: ease-out;
    -o-transition-duration: 1000ms;
}

.trans-scale:hover {
    transform: scale(1.25, 1.25);
    -webkit-transform: scale(1.25, 1.25);
    -moz-transform: scale(1.25, 1.25);
    -o-transform: scale(1.25, 1.25);
}
style>

<div class="trans-scale">div>

低版本IE内核浏览器兼容placeholder属性解决办法

最简便的一个方法，通过js实现。

<input type="text" name="username" id="username" value="姓名" onfocus="if(this.value=='姓名') this.value = ''" onblur="if(this.value=='') this.value='姓名'">
<textarea name="content" id="content" onfocus="if(this.value=='内容') this.value = ''" onblur="if(this.value=='') this.value='内容'">内容textarea>

css3渐变 transition使用方法

<style>
div{
    width:300px;
    height:300px;
    background:#89F;
    margin:100px auto;

    transition:width 1s ease-out .5s;
    -moz-transition:width 1s ease-out .5s;
    -webkit-transition:width 1s ease-out .5s;
    -o-transition:width 1s ease-out .5s;
}
div:hover{
    width:600px;
}
style>

<div>div>

js图片绘制框架 （折线图、柱状图、饼图、热力图） echarts

官方网站：http://echarts.baidu.com

html拨打电话、发送短信、发送邮件的链接写法

拨打电话

呼叫 

发送短信

短信

指定内容

群发短信

发送邮件

邮件 
群发 
指定主题 
指定抄送人

css去除ios文本框默认圆角

css去除ios文本框默认圆角

input, textarea {-webkit-appearance: none;}

百度地图api实例

<div id="allmap">div>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的KEY">script>
<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js">script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />

<script type="text/javascript">
var map = new BMap.Map("allmap");
    var point = new BMap.Point(113.663941,34.805986);//坐标
    var marker = new BMap.Marker(point);  // 创建标注
    marker.enableDragging(); //marker可拖拽
     marker.addEventListener("click", function(e){
        searchInfoWindow.open(marker);
    })
    var content = '
' +
　　　　　　　　　　　　'' +
                    '地址：
XXX
电话：
XXX' +
                  '';
    //创建检索信息窗口对象
    var searchInfoWindow = null;
    searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
            title  : "XX公司",  //标题
            width  : 290,  //宽度
            height : 105,  //高度
            panel  : "panel",  //检索结果面板
            enableAutoPan : true,  //自动平移
            searchTypes   :[
                BMAPLIB_TAB_SEARCH,  //周边检索
                BMAPLIB_TAB_TO_HERE,  //到这里去
                BMAPLIB_TAB_FROM_HERE  //从这里出发
            ]
        });
    
    var searchInfoWindow1 = new BMapLib.SearchInfoWindow(map, "信息框1内容", {
        title: "信息框1",  //标题
        panel : "panel",  //检索结果面板
        enableAutoPan : true,  //自动平移
        searchTypes :[
            BMAPLIB_TAB_FROM_HERE,  //从这里出发
            BMAPLIB_TAB_SEARCH  //周边检索
        ]
    });
    map.addOverlay(marker);  // 将标注添加到地图中
    map.centerAndZoom(point, 15);

    map.addControl(new BMap.MapTypeControl());  //添加地图类型控件
    map.setCurrentCity("北京市");  // 设置地图显示的城市 此项是必须设置的
    map.enableScrollWheelZoom(true);  //开启鼠标滚轮缩放
    function openInfoWindow1() {
        searchInfoWindow1.open(new BMap.Point(116.319852,40.057031));
    }
script>

多个onload事件写法

window.οnlοad=function(){
    function(a);
    function(b);
} 

js获取当前时间

var myDate = new Date();
myDate.getYear(); //获取当前年份(2位)
myDate.getFullYear(); //获取完整的年份(4位,1970-????)
myDate.getMonth(); //获取当前月份(0-11,0代表1月)
myDate.getDate(); //获取当前日(1-31)
myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
myDate.getTime(); //获取当前时间(从1970.1.1开始的毫秒数)
myDate.getHours(); //获取当前小时数(0-23)
myDate.getMinutes(); //获取当前分钟数(0-59)
myDate.getSeconds(); //获取当前秒数(0-59)
myDate.getMilliseconds(); //获取当前毫秒数(0-999)
myDate.toLocaleDateString(); //获取当前日期
var mytime=myDate.toLocaleTimeString(); //获取当前时间
myDate.toLocaleString( ); //获取日期与时间

css设置兼容的透明样式

css设置透明并实现兼容：

<style>
div{
　　filter: alpha(opacity=80);
　　-moz-opacity: 0.8;
　　-khtml-opacity: 0.8;
　　opacity: 0.8;
}
style>

table内容强制换行

为防止文字过长而撑坏表格，一般我们需要通过css使td中内容强制换行。分别给table和td加一条样式即可实现：

<meta charset="utf-8">
<style>
table{table-layout:fixed;}
td{word-break:break-all;}
style>
<table width="90">
    <tbody>
        <tr>
            <td>table溢出自动换行td>
        tr>
    tbody>
table>

设为首页/加入收藏JS代码

传统网站常用的设为首页/加入收藏js代码

<a href="javascript:void(0)" onclick="sethome(this,window.location)">设为首页a> |
<a href="javascript:void(0)" onclick="collect(document.title,window.location)">加入收藏a>
<script type="text/javascript">
function sethome(obj,vrl){
    try{
        obj.style.behavior='url(#default#homepage)';obj.setHomePage(vrl)
    }catch(e){
        if(window.netscape){
            try{
                netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect")
            }catch(e){
                alert("此操作被浏览器拒绝！\n请在浏览器地址栏输入“about:config”并回车\n然后将 [signed.applets.codebase_principal_support]的值设置为'true',双击即可。")
            }
            var prefs=Components.classes['@mozilla.org/preferences-service;1'].getService(Components.interfaces.nsIPrefBranch);
            prefs.setCharPref('browser.startup.homepage',vrl)
        }else{
            alert("您的浏览器不支持，请按照下面步骤操作：\n1.打开浏览器设置。\n2.点击设置网页。\n3.输入："+vrl+"点击确定。")
        }
    }
}

function collect(sTitle,sURL){
    try{
        window.external.addFavorite(sURL,sTitle)
    }catch(e){
        try{
            window.sidebar.addPanel(sTitle,sURL,"")
        }catch(e){
            alert("加入收藏失败，请使用Ctrl+D进行添加")
        }
    }
}
script>

QQ客服代码

个人QQ客服代码

<a href="tencent://message/?uin=QQ号码">在线咨询a>

 

企业QQ客服代码

<a href="javascript:;" id="wap_qq">在线咨询a>
<script charset="utf-8" type="text/javascript" src="http://wpa.b.qq.com/cgi/wpa.php?key=你的key">script>
<script type="text/javascript">
　　BizQQWPA.addCustom({
　　nameAccount: '企业QQ号码', //企业QQ号码
　　selector: 'wap_qq' //客服链接所在元素
});
script>

 

唤起手机QQ代码

<a href="mqqwpa://im/chat?chat_type=wpa&uin=QQ号码">在线咨询a>

backgroud背景色样式兼容ie8 rgba()用法

今天遇到了一个问题，要在一个页面中设置一个半透明的白色div。这个貌似不是难题，只需要给这个div设置如下的属性即可：

background: rgba(255,255,255,.1);
但是要兼容到ie8。这个就有点蛋疼了。因为ie8不支持rgba()函数。下面我们总结一下rgba()函数的含义。

rgba的含义，r代表red，g代表green，b代表blue，红绿蓝是三原色。所有颜色都可以由这三种颜色拼合而成。a代表透明度。比如rgba（255，255，255，0.1）就是透明度为0.1的白色。在现代浏览器中是支持rgba的。但是在ie8等古董级浏览器中是不支持的rgba的，ie8只能勉强支持rgb()函数（即去掉了透明度，只能表示颜色）。

所以在ie8中设置半透明就要费点脑子了。从大神那里得知可以使用ie的filter来解决这个问题，css代码如下：

background: rgba(255,255,255,.1);   filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#19ffffff,endColorstr=#19ffffff);

第二句话的意思就是当上一行的透明度不起作用的时候执行。这句话的意思本来是用来做渐变的。但是这个地方不需要渐变。所以两个颜色都设置成了相同的颜色。

大家注意，这个颜色“#19ffffff”是由两部分组成的。

第一部是#号后面的19 。是rgba透明度0.1的IEfilter值。从0.1到0.9每个数字对应一个IEfilter值。对应关系如下：

第二部分是19后面的六位 。这个是六进制的颜色值。要跟rgb函数中的取值相同。比如rgb(255,255,255)对应#ffffff；都是白色。

css绘制倒三角

 

1 <style>
2 i{  border-left: 5px solid transparent;
3     border-right: 5px solid transparent;
4     border-top: 5px solid #2794EF;
5 }
6 style>
7 
8 <i>i>