如何在网站里面添加打赏功能
文章描述：
怎么在网站里面添加打赏功能
html
点击按钮
<div class="rewardBox">
<button class="reward" onclick="shang()">
¥ 赏
</button>
</div>
弹出打赏界面
<div class="footer_flex">
<div class="flex-footer">
<img id="ewm" src="wxxhd.jpg" width="120px" height="120px">
<div style="margin-top:5px;">
<label><input name="pay" type="radio" value="wx" checked="checked" onclick="wx()">微信</label>
<!-- <label style="margin-left:3px; display:block-inline"><input name="pay" type="radio" value="zfb" onclick="zfb()">支付宝</label>-->
</div>
<div style="height:40px; background:rgba(0,0,0,0);"></div>
</div>
</div>
css
.rewardBox{ padding:10px 0 20px 0; text-align:center; }
.footer_flex .flex-footer {
box-shadow: 0px 0px 5px 0px #409eff;
border-radius: 8px;
width: 300px;
height: 166px;
position: absolute;
left: 100px;
top: 200px;
text-align: center;
padding-top: 15px;
background: #fff;
display: none;
}
.flex-footer input {
vertical-align: middle;
margin-bottom: 3px;
margin-bottom: 3px;
}
.reward{
width: 90px;
height: 32px;
background: #f0ad4e;
border: 1px solid #fbaa36;
border-radius: 3px;
color: #fff;
transition: all 0.3s ease;
cursor:pointer;
}
.reward:hover{
box-shadow: 0px 0px 5px 0px #f0ad4e;
transition: all 0.3s ease;
}
script
function zfb() {
var obj = document.getElementById("ewm");
obj.src = ``;
}
function wx() {
var obj = document.getElementById("ewm");
obj.src = `wxxhd.jpg`;
}
function shang() {
let obj = $(".flex-footer");
let isHidden = obj.is(':hidden');
if (isHidden) {
let screenWidth = $(window).width();
screenHeight = $(window).height(); //当前浏览器窗口的 宽高
let scrolltop = $(document).scrollTop(); //获取当前窗口距离页面顶部高度
let objLeft = (screenWidth - obj.width()) / 2;
let objTop = (screenHeight - obj.height()) / 2 + scrolltop;
obj.css({
left: objLeft + 'px',
top: objTop + 'px',
'display': 'block'
});
obj.show();
} else {
obj.hide();
}
}
发布时间：2023/03/08
发表评论