未注册过用户可以点击直接登录哦！
使用注册邮箱登录
选择画板...
你已经成功采集到
&|关闭窗口利用ASP.NET MVC和Bootstrap快速搭建个人博客之文章打赏功能（六）
作者：夜无痕星
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了利用ASP.NET MVC和Bootstrap快速搭建个人博客之文章打赏功能（六） 的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
看到新浪微博、百度百家等平台上都带有文章“打赏”功能，觉得很新鲜，于是也想在自己的博客中加入“打赏”功能。
　　当然，加入打赏功能并非是真的想要让别人打赏。因为只有那些真正能引起共鸣，发人深思,让人受益匪浅的文章才值得打赏，值得点赞。
而我的博客站仅仅是用作记录笔记，当做自己的知识库（如果能不经意间帮助别人那是再好不过了）。　
　加入打赏功能纯粹是“觉得好玩”，就是这么简单，Just have a fun!（博主喜欢折腾，看见一个酷炫的功能就想去实现它）
先看一下这个打赏的Icon长什么样吧！
　　点击“打赏Icon”后会弹出一个二维码界面，各位老板可以选择使用是使用支付宝打赏还是微信打赏：
具体代码如下：（时间仓促，并为将其扩展为插件）　
&!--打赏按钮--&
&div style="margin-bottom:20"&
&a title="打赏，支持一下" class="dashang" onclick="dashangToggle()" href="javascript:void(0)"&
　　打赏遮罩层HTML：
&div class="content"&
&div class="hide_box"&&!--遮罩--&&/div&
&div class="shang_box"&
&a class="shang_close" href="javascript:void(0)" onclick="dashangToggle()" title="关闭"&
&img src="/Content/dashangimg/close.jpg" alt="取消"&
&div class="shang_tit"&
&p&感谢您的支持，我会继续努力的!&/p&
&div class="shang_payimg"&
&img src="/Content/dashangimg/alipayimg.jpg" alt="扫码支持" title="扫一扫"&
&div class="pay_explain"&扫码打赏，你说多少就多少&/div&
&div class="shang_payselect"&
&div class="pay_item checked" data-id="alipay"&
&span class="radiobox"&&/span&
&span class="pay_logo"&
&img src="/Content/dashangimg/alipay.jpg" alt="支付宝"&
&div class="pay_item" data-id="weixinpay"&
&span class="radiobox"&&/span&
&span class="pay_logo"&
&img src="/Content/dashangimg/wechat.jpg" alt="微信"&
&div class="shang_info"&
&p&打开&span id="shang_pay_txt"&支付宝&/span&扫一扫，即可进行扫码打赏哦&/p&
　　主要的JS：
jQuery(".pay_item").click(function () {
jQuery(this).addClass('checked').siblings('.pay_item').removeClass('checked');
var dataid = jQuery(this).attr('data-id');
jQuery(".shang_payimg img").attr("src", "/Content/dashangimg/" + dataid + "img.jpg");
jQuery("#shang_pay_txt").text(dataid == "alipay" ? "支付宝" : "微信");
function dashangToggle() {
jQuery(".hide_box").fadeToggle();
jQuery(".shang_box").fadeToggle();
顺带提供CSS：
.hide_box {
z-index: 999;
filter: alpha(opacity=50);
background: #666;
opacity: 0.5;
-moz-opacity: 0.5;
height: 99%;
width: 100%;
.shang_box {
width: 540
height: 540
padding: 10
background-color: #
border-radius: 10
z-index: 1000;
left: 50%;
margin-left: -280
margin-top: -280
border: 1px dotted #
.shang_box img {
border-width: 0;
.dashang {
text-align:
transition: all 0.3s;
background: url(../dashangimg/dashang.png) no-repeat scroll 0% 0%
.dashang:hover {
background: url(../dashangimg/dashanghover.png) no-repeat scroll 0% 0%
.shang_close {
display: inline-
.shang_logo {
text-align:
margin: 20
.shang_tit {
width: 100%;
height: 75
text-align:
line-height: 66
color: #a3a3a3;
font-size: 16
background: url('../dashangimg/cy-reward-title-bg.jpg');
font-family: 'Microsoft YaHei';
margin-top: 7
margin-right: 2
.shang_tit p {
color: #a3a3a3;
text-align:
font-size: 16
.shang_payimg {
width: 150
height: 150
border: 6px solid #EA5F00;
border-radius: 3
.shang_payimg img {
text-align:
width: 140
height: 140
.pay_explain {
text-align:
margin: 10
font-size: 12
color: #545454;
.radiobox {
height: 16
background: url('../dashangimg/radio2.jpg');
margin-top: 5
margin-right: 14
.checked .radiobox {
background: url('../dashangimg/radio1.jpg');
.shang_payselect {
text-align:
margin-top: 40
height: 60
width: 280
.shang_payselect .pay_item {
display: inline-
margin-right: 10
.shang_info {
.shang_info p, .shang_info a {
color: #C3C3C3;
text-align:
font-size: 12
text-decoration:
line-height: 2
最后再提供几个打赏图标吧，喜欢的话就收藏起来吧：
以上所述是小编给大家介绍的利用ASP.NET MVC和Bootstrap快速搭建个人博客之文章打赏功能（六），希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具在本篇博文中我将介绍如何写一个Web Server.博文中大部分资料我是参考的这篇文章()，英文不错的同学可以参考这篇文章。
进程间通信
在操作系统中,进行通信的实际上是进程而不是程序，进程可以被认为是运行在端系统中的程序。当进程运行在相同的端系统的时候，他们使用进程间通信机制相互通信。进程间相互通信的规则是由端系统上的的操作系统确定的。
客户机和服务器进程
网络应用程序是由成对的进程组成，这些进程通过网络互相发送报文。在C/S架构的应用程序中，一个客户机浏览进程与一台服务器进程交换报文。在一个P2P文件共享系统中，文件从一个对等方的进程传送到另一个对等方的进程，在每对通信进程中我们通常将这两个进程标示为客户机(client),而另一个进程标示服务器(server)。在Web中浏览器进程是一个客户机进程，Web服务器是服务器进程。对于P2P文件共享。下载文件的对等方被标示为客户机，上载文件的对等发被标示为服务器。
在P2P文件共享等应用中，一个进程即可能是客户机也可能是服务器，实际上在一个P2P文件共享系统中，一个进程既能上载文件也下载文件，但无论如何，在一对通信进程中，我们任然能标示客户机和服务器，我们定义客户机和服务器进程如下:
在给定的一对进程之间的通信会话，发起通信的进程被标示为客户机，在会话开始等待联系的进程是服务器。
进程与计算机网络之间的接口(socket)
多数的应用程序是由通信进程组成的，每对中两个进程互相发送报文，从一个进程向另一个进程发送的报文必须通过网络发送，进程通过套接字(socket)的软件接口在网络上发送和接收报文。进程相当于一座房子，当一个进程向另一台进程发送报文时，它将报文推出门（套接字），该发送进程到另一接收进程有用于运输的基础设施，该设施将报文传送到目的进程的门口，一旦目的报文抵达到目的主机，目地报文通过门（套接字）传递，然后接收进程对报文进行处理。下图表示两个主机进程通过套接字通信：
套接字(socket)类型
当套接字进程被创建之后，需要实例化地址域和套接字的类型，拥有相同的地址域和相同的套接字类型的进程才能够互相通信;有两个广泛使用的地址域。
1.unix domain: 两个进程通过共享一个共同的文件系统来通信。
2.Internet domain: 两个进程通过因特网通信 。
在unix domain中套接字的地址是由字符串组成的，用于进入文件系统; 在Internet domain 中套接字的地址是主机在因特网上的IP地址。
有两种广泛使用的套接字类型：
1.stream sockets: 通过字符流的方式进行通信
2.datagram sockets:一次读取所有的信息
stream sockets 和 datagram都有各自的运输层协议，stream sockets使用TCP协议（TCP协议是面向连接，并且为两个端系统之间的数据流动提供可靠的字节流通道）; datagram sockets 使用UDP协议（UDP是无连接的，从一个端系统向另一个端系统发送独立的数据分组，不对交付提供任何保证）。
然而套接字通信还需要主机上的端口号，端口号是由十六位的无符号整型组成的，在Unix中端口号较小的都被标准服务使用了，例如21号端口就是服务的端口号;但是端口号大于2000的我们是可以使用的。
介绍完这些基础的知识之后，下篇将通过客户机和服务器的代码来对套接字通信的过程做更加深刻的分析
阅读(...) 评论()}