一、JS獲取滾動條位置
1、獲取坐標：
IE (event.x event.y)
2、獲取滾動條位置(網頁最前面沒有<! DOCTYPE html >)：
document.body.scrollTop （滾動條離頁面最上方的距離）
document.body.scrollLeft （滾動條離頁面最左方的距離）
當我用js獲取當前垂直或者水平方向滾動條位置的時候，使用"document.body.scrollTop"或者"document.body.scrollLeft"是無效的，得到的數值永遠是0。但是，當寫在“onscroll”事件里面的時候，上述方法可以獲得當前滾動條的位置。
3、當網頁最前面有以下內容：
<! DOCTYPE html >
document.documentElement.scrollTop （滾動條離頁面最上方的距離）
document.documentElement.scrollLeft （滾動條離頁面最左方的距離）
所以為了准確取得當前滾動條的位置，正確的使用方法是：
document.documentElement.scrollTop：垂直方向
document.documentElement.scrollLeft：水平方向
二、通過window.onscroll來實現部分內容的適時顯示
1、實現代碼
window.onscroll=function(){
var fixed=document.getElementById("fixed"); //獲取需要適時顯示的元素節點
var scrollTop = document.documentElement.scrollTop||window.pageYOffset||document.body.scrollTop; //滾動條與頁面頂部距離（包括pc端和移動端），window.pageYOffset和document.body.scrollTop用於獲取移動端距離
var allHeight=window.screen.height; //獲取整個頁面的高度
console.log("滾動條與頁面頂部距離："+scrollTop);
console.log("整個屏幕的高度："+allHeight);
if(scrollTop>allHeight*1.2){ //給出判斷條件，即高度如何時進行以下邏輯
fixed.className="fix"; //給獲取的元素節點加上相應的樣式
}else{
fixed.className=" "; //給獲取的元素節點去除相應的樣式
}
}
三、clipboard.js（插件）實現復制粘貼
1、 引入插件
<script src="js/clipboard.min.js"></script>
2、基本使用
首先需要您需要通過傳遞DOM選擇器，HTML元素或HTML元素列表來實例化它。
new Clipboard('.btn');
1、用一個元素當觸發器來復制另一個元素的文本,data-clipboard-target屬性后需要跟屬性選擇器
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">
<button class="btn" data-clipboard-target="#foo">
</button>
另外還有另外一個屬性data-clipboard-action屬性，以指定是要要么copy還是要cut操作。默認情況下是copy。cut操作只適用於<input>或<textarea>元素。
<textarea id="bar">Mussum ipsum cacilds...</textarea>
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
Cut to clipboard
</button>
2、從屬性中復制文本，不需要另一個元素當觸發器，可以使用data-clipboard-text屬性，在后面放上需要復制的文本.
<button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
Copy to clipboard
</button>
3、其他說明
1、通過運行檢查clipboard.js是否支持Clipboard.isSupported()，返回true則可以使用。
2、顯示一些用戶反饋或捕獲在復制/剪切操作后選擇的內容。操作，文本，觸發元素
var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) { console.info('Action:', e.action); console.info('Text:', e.text); console.info('Trigger:', e.trigger); e.clearSelection(); }); clipboard.on('error', function(e) { console.error('Action:', e.action); console.error('Trigger:', e.trigger); });
3、該插件使用的是事件委托的方式來觸發，所以大大減少了對dom的操作。
4、高級使用
如果你不想修改你的HTML，那么你可以使用一個非常方便的命令API。所有你需要做的是聲明一個函數，寫下你想要的操作，並返回一個值。下面是一個對不同id的觸發器返回不同的值的例子。具體的使用方法請看https://clipboardjs.com
<body>
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">
<button id='foo_1' class="btn" data-clipboard-target="#foo">
</button>
</body>
<script>
new Clipboard('.btn', {
text: function(trigger) {
if(trigger.getAttribute('id')=='foo_1'){
return 1;
}else{
return 2;
}
}
});
</script>
1、基本代碼
五、騰訊營銷QQ解決方案（網頁上的客服聊天功能）
1、官網鏈接
https://id.b.qq.com/login/index
2、說明文檔
https://files.cnblogs.com/files/huangfeihong/%E8%85%BE%E8%AE%AF%E8%90%A5%E9%94%80QQ%E4%BA%A7%E5%93%81%E5%B8%AE%E5%8A%A9%E6%96%87%E6%A1%A3.rar
六、H5移動頁面自適應手機屏幕的方法
七、iOS/Android 微信及瀏覽器中喚起本地APP
八、pc端實現輪播效果
1、使用swiper插件
html：
| 選擇器 | 千位 | 百位 | 十位 | 個位 | 合計值 |
|---|---|---|---|---|---|
h1(元素選擇器) |
0 | 0 | 0 | 1 | 0001 |
#indentifier(ID選擇器) |
0 | 1 | 0 | 0 | 0100 |
h1(元素選擇器) + p(元素選擇器)::first-letter(偽類) |
0 | 0 | 0 | 3 | 0003 |
li(元素選擇器)> a(元素選擇器)[href*="zh-CN"](屬性選擇器) > .inline-warning(類選擇器) |
0 | 0 | 2 | 2 | 0022 |
沒有選擇器, 規則在一個元素的 <style> 屬性里 |
1 | 0 | 0 | 0 | 1000 |
1、電腦屏幕及尺寸(分辨率)通常有下列幾種
1024 1280 1366 1440 1680 1920
2、可以通過簡單的媒體查詢方式來進行屏幕適配
PC端響應式媒體斷點
@media (min-width: 1024px){
body{font-size: 18px}
} /*>=1024的設備*/
@media (min-width: 1100px) {
body{font-size: 20px}
} /*>=1100的設備*/
@media (min-width: 1280px) {
body{font-size: 22px;}
} /*>=1280的設備*/
@media (min-width: 1366px) {
body{font-size: 24px;}
} /*>=1366的設備*/
@media (min-width: 1440px) {
body{font-size: 25px !important;}
} /*>=1440的設備*/
@media (min-width: 1680px) {
body{font-size: 28px;}
} /*>=1680的設備*/
@media (min-width: 1920px) {
body{font-size: 33px;}
} /*>=1920的設備*/
注意: 用min-width時，小的放上面大的在下面，同理如果是用max-width那么就是大的在上面，小的在下面
十二、CSS3修改單選框radio默認
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="utf-8"> <title> Document </title> </meta> <style media="screen" type="text/css"> .real-radio{ display: inline-block;
width: 15px;
height: 15px; background-color: #fff;
border: 1px solid #000;
border-radious: 8px;
cursor: pointer; } .radio > input[type=radio]:checked ~ .real-radio{
border: 1px solid red; background-color: red; } .radio > input[type=radio]{ display: none; } </style> </head> <body> <label class="radio"> <input name="" type="radio" value="a"/> <span class="real-radio"></span> </label> </body> </html>十三、vue中實現緩慢回到頂部
1 <meta name="referrer" content="no-referrer">
