请求头获取用户设备、点赞
请求头获取用户设备、点赞
一、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的压缩包，然后解压导入创建好的文件夹，再以谷歌的拓展程序打开即可使用
后端展示代码块：此方式可以获得用户的请求头类型
from django.core.handlers.wsgi import WSGIRequest
print(request.environ)
print(request.environ.get('HTTP_USER_AGENT'))
二、点赞效果
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>
