前端筆記-201807

時間 2019-11-08

標籤前端筆記简体版

原文原文鏈接

一、css浮動javascript

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .row {
            width: 265px;
            margin: 50px;
        }
        .ipt-key {
            width: 180px;
            height: 34px;
            line-height: 34px;
            padding: 0 10px;
            border: 1px solid #ddd;
        }
        .btn-key {
            float: right;
            height: 36px;
            padding: 0 10px;
            border: 1px solid #ddd;
            background: none;
        }
    </style>
</head>
<body>
    <div class="row">
        <!-- 'ipt-box'這個div沒有浮動 -->
        <div class="ipt-box">
            <input class="ipt-key" type="text" placeholder="短信驗證碼">
        </div>
        <!-- 'btn-key'這個元素右浮動，此時按鈕會換行 -->
        <button type="button" class="btn-key">獲取</button>
    </div>
</body>

運行效果：php

解決辦法1：css

<div class="row">
    <!-- 'btn-key'這個右浮動元素放到前面 -->
    <button type="button" class="btn-key">獲取</button>
    <!-- 'ipt-box'這個div沒有浮動 -->
    <div class="ipt-box">
        <input class="ipt-key" type="text" placeholder="短信驗證碼">
    </div>
</div>

解決辦法2：html

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /*...*/
        .ipt-box {
            float: left;
        }
    </style>
</head>
<body>
    <div class="row">
　　　　 <!-- 將'ipt-box'這個div設爲左浮動 -->
        <div class="ipt-box">
            <input class="ipt-key" type="text" placeholder="短信驗證碼">
        </div>
        <button type="button" class="btn-key">獲取</button>
    </div>
</body>

我的比較推薦使用方式2，使用方式1是維護原有項目。java

最終運行效果：jquery

二、@media媒體查詢不兼容ie8及如下git

參考：http://www.bootcdn.cn/respond.js/web

http://www.javashuo.com/article/p-ehbhirfh-co.htmlcanvas

使用 respond.js 解決 ie8媒體查詢的兼容問題；api

1）需把文件置於服務器上運行。因爲安全限制，一些瀏覽器可能不容許respond.js以 file:// 方式運行（由於它使用 xmlHttpRequest）

以 file:// 方式運行在ie8下會報錯SCRIPT5：拒絕訪問。

2）包含媒體查詢的 css文件需採用外鍊形式，

3）引用的respond.js 需置於媒體查詢 css 文件以後；

4）引用的respond.js 文件必須放在本html頁內，如shtml文件提出公共部分後則無效。（該條未驗證）

<link rel="stylesheet" type="text/css" href="/demo/resource/css/test.css" media="screen and (max-width: 800px)">
<!-- 只在ie9如下瀏覽器引入respond.min.js，能夠減小其餘瀏覽器的http請求 -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

respond.js目前只支持媒體查詢裏的一部分屬性，如min-width、max-width和媒體類型 (screen、print等) ，轉換這些屬性來解決不支持媒體查詢的瀏覽器的兼容問題。（該條未驗證）

20190709補充

若是 Respond.js 和 CSS 文件被放在和頁面不一樣的域名或子域名下面時，須要額外的配置（何嘗試，解決方案：直接將引入的媒體查詢樣式放在和頁面相同的域名下，就不存在跨域問題）

參考：http://dtop.powereasy.net/Item.aspx?id=3701

https://my.oschina.net/ximidao/blog/349130

三、jQueryRotate插件實現轉盤抽獎（可以兼容ie8）

1）引入jQueryRotate.2.2.js

2）轉動關鍵代碼

$("#lotteryBtn").rotate({
    angle:0, 
    duration: 5000, 
    animateTo: angle+2160, //angle是圖片上各獎項對應的角度，2160是我要讓指針旋轉6圈
    callback:function(){
        // 轉動結束回調函數
    }
});

四、微博話題牆

參考連接：http://jssdk.sinaapp.com/start.php#website-connect

Step 1. 網站接入

Step 2. 綁定域名

Step 3. 增長命名空間

在您頁面的HTML標籤中增長XML命名空間：<html xmlns:wb="http://open.weibo.com/wb">

Step 4. 部署wb.js

在您的頁面部署wb.js，同時，若是您的頁面編碼不是UTF-8，請添加charset="utf-8"屬性。

<script src="http://tjs.sjs.sinajs.cn/open/api/js/wb.js?appkey=YOUR APPKEY" type="text/javascript" charset="utf-8"></script>（appkey是否須要？）

Step 5. 使用Jssdk或微博組件

部署微博話題牆組件（http://jssdk.sinaapp.com/widget/topic.php）

使用：（紫框中部分能夠修改組件背景顏色和連接顏色，具體可進一步研究）

微博話題牆組件不兼容ie8（是否有解決方案？）

五、git clone xxx --depth=1

depth用於指定克隆深度，爲1即表示只克隆最近一次commit（git clone下載內容過大時，這樣能夠提升速度）。這樣僅獲取最新版和一個歷史版本，即最後2個版本。

六、css問題

1）圖片垂直居中（可兼容ie8）

七、極驗驗證

八、js用POST方式頁面跳轉,避免在地址欄中顯示傳遞參數

form以post方式提交表單

var data = { // 要傳遞的數據
    product_id: product_id,
    num: 1
};
var form = $("<form method='post'></form>");
form.attr('action', '【跳轉頁面路由】');
for(var p in data) {
    var input = $("<input type='hidden'>");
    input.attr('name', p);
    input.val(data[p]);
    form.append(input);
}
$('body').append(form);
form.submit();

九、生成二維碼

方式一：jquery.qrcode.min.js

1）引入jquery.min.js和jquery.qrcode.min.js

2）根據連接codeUr生成二維碼

$("#pay-qrcode").qrcode({width:170, height:170, render:"canvas", correctLevel:1, text:codeUrl});

上例是使用canvas渲染二維碼，可是canvas不兼容ie8。

$("#pay-qrcode").qrcode({width:170, height:170, render:"table", correctLevel:1, text:codeUrl});

爲了兼容ie8，能夠用table渲染二維碼，咱們會發現二維碼實際是使用table表格把每個二維碼的點畫出來，這就致使網頁上的Dom元素會特別多。生成的二維碼大小和canvas方式同樣大。

方式二：qrcode.min.js

1）qrcode.min.js

2）根據連接codeUr生成二維碼

var qrcode = new QRCode(document.getElementById("pay-qrcode"), {
    width : 170,
    height : 170
});
qrcode.makeCode(codeUrl);

ie8以上瀏覽器：

ie8（二維碼大小變小）：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。