基于html jquery实现的网站打赏组件

如果你希望在你自己的网站上添加上打赏组件功能，可以参考我实现的打赏组件功能。

当点击打赏按钮的时候，会在网页正中间显示打赏二维码，支持多种打赏方式。

一、效果演示图

二、程序源代码

一、效果演示图

二、程序源代码

 <!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>打赏组件</title>
    <style>
        .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;
        }
    </style>
    <script src="https://www.ewbang.com/dist/js/jquery.min.js"></script>
</head>
 
<body>
    <div style="text-align: center; margin-left:30px; ">
 
        <div class="footer_flex">
            <div class="flex-footer">
                <img id="ewm" src="https://ewbangcom.oss-cn-hangzhou.aliyuncs.com/static/weixin/gzh.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>
    </div>
    <button onclick="shang()">
        打赏
    </button>
    <script language="javascript" type="text/javascript">
        function zfb() {
            var obj = document.getElementById("ewm");
            obj.src = `https://file.ewbang.com/static/donate/zfb.png`;
        };
 
        function wx() {
            var obj = document.getElementById("ewm");
            obj.src = `https://file.ewbang.com/static/donate/weixin.png`;
        };
 
        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();
            }
 
 
        }
    </script>
 
</body>
 
</html>复制

基于html jquery实现的网站打赏组件

一、效果演示图

二、程序源代码

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

前端提高篇（102）：jQuery高级方法callbacks、deferred

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

JQuery中的load()、$

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

文本，wangEditor5展示HTML无样式，wangEditor5如何看源码，Ctrl U看CSS文件，代码高亮，Prism.js可以实现，解决方法，参考网页源代码的写法

【html】新建一个html并且在浏览器运行

SSM基于html的网上购物系统2nluo 在线充值

前端哥

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

前端提高篇（102）：jQuery高级方法callbacks、deferred

解决npm install 报错 “npm err code 1“

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

JQuery中的load()、$

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

1
【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001

2
CSS常用属性（文本属性）

2024-11-04 09:11:111000

3
TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000

4
CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000

5
vue使用datav echarts

2024-09-06 00:09:381000

6
使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000

7
使用CDN提高jQuery加载速度

2024-08-24 23:08:211000

8
小兔鲜儿网页首页制作黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000

9
《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000

10
npm的使用

2024-08-18 00:08:131000

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>打赏组件</title>
	<style>
	.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;
	}
	</style>
	<script src="https://www.ewbang.com/dist/js/jquery.min.js"></script>
	</head>

	<body>
	<div style="text-align: center; margin-left:30px; ">

	<div class="footer_flex">
	<div class="flex-footer">
	<img id="ewm" src="https://ewbangcom.oss-cn-hangzhou.aliyuncs.com/static/weixin/gzh.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>
	</div>
	<button onclick="shang()">
	打赏
	</button>
	<script language="javascript" type="text/javascript">
	function zfb() {
	var obj = document.getElementById("ewm");
	obj.src = `https://file.ewbang.com/static/donate/zfb.png`;
	};

	function wx() {
	var obj = document.getElementById("ewm");
	obj.src = `https://file.ewbang.com/static/donate/weixin.png`;
	};

	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();
	}


	}
	</script>

	</body>

	</html>

基于html jquery实现的网站打赏组件

一、效果演示图

二、程序源代码

微信扫一扫：分享