码迷,mamicode.com
首页 > 其他好文 > 详细

请求头获取用户设备、点赞

时间:2019-12-23 22:29:25      阅读:90      评论:0      收藏:0      [点我收藏+]

标签:poi   通过   javascrip   颜色   条件   pre   搜索   实现   直接   

请求头获取用户设备、点赞

一、GooGle浏览器:使用插件User Agent Switcher, URL sniffer 0.9.3.9或者使用User Agent Switcher,调整用户设备请求头

1.获取用户设备请求头的意义,QQ的空间动态,会有手机类型的显示,其实现原理就是获取设备的请求头文件,使用方法或正则匹配出来显示到用户的客户端;还可以通过进行判断让其再不同的终端中显示不同的页面,实现多终端多效果。

2.安装User Agent Switcher, URL sniffer 0.9.3.9方法有两种:

(1)谷歌内部应用商店安装,直接在谷歌应用商店搜索,添加到扩展程序中即可

(2)百度下载,下载到的文件后缀名是.crx 文件,使用时先把后缀名改成.rar或.zip的压缩包,然后解压导入创建好的文件夹,再以谷歌的拓展程序打开即可使用

二、点赞效果

1.通过JQuery的使用实现动态的点赞效果图,主要涉及两个方法,dom中的document.createElement()方法添加span块,和setInterval设置时间动态显示

//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>

请求头获取用户设备、点赞

标签:poi   通过   javascrip   颜色   条件   pre   搜索   实现   直接   

原文地址:https://www.cnblogs.com/wylshkjj/p/12088394.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!