前端知识点总结

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




	
	Document



	

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

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值。对应关系如下:

前端知识点总结_第1张图片

第二部分是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>

你可能感兴趣的:(IT)