請求頭獲取用戶設備、點贊

時間 2019-12-24

標籤請求獲取用戶設備简体版

原文原文鏈接

請求頭獲取用戶設備、點贊

1、GooGle瀏覽器：使用插件User Agent Switcher, URL sniffer 0.9.3.9或者使用User Agent Switcher，調整用戶設備請求頭

1.獲取用戶設備請求頭的意義，QQ的空間動態，會有手機類型的顯示，其實現原理就是獲取設備的請求頭文件，使用方法或正則匹配出來顯示到用戶的客戶端；還能夠經過進行判斷讓其再不一樣的終端中顯示不一樣的頁面，實現多終端多效果。javascript

2.安裝User Agent Switcher, URL sniffer 0.9.3.9方法有兩種：css

（1）谷歌內部應用商店安裝，直接在谷歌應用商店搜索，添加到擴展程序中便可html

（2）百度下載，下載到的文件後綴名是.crx 文件，使用時先把後綴名改爲.rar或.zip的壓縮包，而後解壓導入建立好的文件夾，再以谷歌的拓展程序打開便可使用java

2、點贊效果

1.經過JQuery的使用實現動態的點贊效果圖，主要涉及兩個方法，dom中的document.createElement()方法添加span塊，和setInterval設置時間動態顯示jquery

//javaScript部位代碼塊
$(function(){
    $(".zan").click(function(){
        var fz = 12; //font-size
        var tp = 5; //top
        var lf = 5; //left
        var op = 1; //opacity
        var tag = document.createElement("span");
        tag.innerHTML = "+1"; //由於是文本因此innerText與innerHtml的使用效果相同
        tag.style.color = "red";//字體顏色
        tag.style.fontSize = fz+ "px";//字體大小
        tag.style.top = lf + "px";//移動方向
        tag.style.opacity = op; //透明度
        $(this).append(tag);//把span標籤添加到class屬性值爲zan的div的後面
        var tim = setInterval(function(){ //自動進行循環，直到條件達到clearInterval(tim)時中止
            fz += 5; //font-size
            tp += 5; //top
            lf += 5; //left
            op -= 0.2; //opacity
            tag.innerHTML = "+1";
            tag.style.color = "red";
            tag.style.fontSize = fz+ "px";
            tag.style.top = lf + "px";
            tag.style.opacity = op; //透明度
            if (op<0){ // 斷定計時中止的條件
                clearInterval(tim);
                $("tag").remove();
            }

        },50)
        });
})

<!-- 所有代碼塊 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/js/jquery-2.1.4.min.js"></script>
</head>
<style type="text/css">
    .item{
        height: 100px;
        border: 1px solid rebeccapurple;
    }
    .zan{
        height: 35px;
        width: 35px;
        background-color: #000000;
        color: white;
        position: relative;
        cursor: pointer;
    }
    .zan span{
        position: absolute;
        font-weight: bold;
    }
</style>
<script>
    $(function(){
        $(".zan").click(function(){
            var fz = 12; //font-size
            var tp = 5; //top
            var lf = 5; //left
            var op = 1; //opacity
            var tag = document.createElement("span");
            tag.innerHTML = "+1"; //由於是文本因此innerText與innerHtml的使用效果相同
            tag.style.color = "red";//字體顏色
            tag.style.fontSize = fz+ "px";//字體大小
            tag.style.top = lf + "px";//移動方向
            tag.style.opacity = op; //透明度
            $(this).append(tag);//把span標籤添加到class屬性值爲zan的div的後面
            var tim = setInterval(function(){ //自動進行循環，直到條件達到clearInterval(tim)時中止
                fz += 5; //font-size
                tp += 5; //top
                lf += 5; //left
                op -= 0.2; //opacity
                tag.innerHTML = "+1";
                tag.style.color = "red";
                tag.style.fontSize = fz+ "px";
                tag.style.top = lf + "px";
                tag.style.opacity = op; //透明度
                if (op<0){ // 斷定計時中止的條件
                    clearInterval(tim);
                    $("tag").remove();
                }

            },50)
        });
    })
</script>
<body>
<!--
<form action="/userp/">
    <input type="text">
</form>
-->
<div>
    <div class="item">
        <div class="zan">贊<span>+1</span></div>
    </div>
    <div class="item">
        <div class="zan">贊</div>
    </div>
    <div class="item">
        <div class="zan">贊</div>
    </div>
    <div class="item">
        <div class="zan">贊</div>
    </div>
</div>
</body>
</html>

相關標籤/搜索

每日一句

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