<div id = "demo"></div>
<input type = "button" id = "btn1" value = "点个赞吧" />
由于还要引进心的图片，所以在这里我们在设置css样式的时候还要设置图片img的样式。
css代码如下：
<style type="text/css">
*{
margin: 0px
padding: 0px
}
#btn1{
position: absolute
bottom:100px
width: 200px
background-color: lightblue
font-size: 18px
left:45%
}
img{
bottom:100px
margin-left: -15px
width: 20px
height:20px
position: absolute
left: 50%
}
</style>
下来就是要写jquery函数。
(document).ready(function(){
// 1. 首先给按钮绑定点击事件。(“#btn1”).click(function(){
//2. 生成彩色的心，即随机选择图片。
// 2.1 生成随机数
var num = Math.floor(Math.random() * 3 +1)
//2.2 生成一个img元素，并为其添加src属性
var image = $(“”)
//三个图片的名字分别是 1.png\2.png\3.png,所以img的路径和图片名可以进行线面的字符串拼接
image.attr(“src”,”./images/”+num+”.png”)
//3。将生成的img追加到页面上
$(“#demo”).append(image)
//4. 下来就是让心动起来。从点击按钮的地方向上飘。利用jquery的动画函数animate()
//生成随机的距离左边的距离，这样就可以使心有种向上飘的感觉
var left = Math.random() * 800
image.animate({
‘bottom':'800px',
‘left':left,
‘opacity':'0'
},3000)
})
})；
})
对于第一个问题，设计一个schema->(messageID，likedCount)，记录每条微博的点赞数。messageID是微博的编号，likedCount是该微博的点赞人数。但是这里有两个问题需要解决，第一是并发，第二是数据量。
每条微博都有可能有很多人同时点赞，为了保证点赞人数精确就需要保证likedCount++是原子 *** 作，这个可以由应用程序来实现，也可以用redis的事务来实现(如果redis有事务机制或者自增功能的话)，但是我觉得为了性能考虑，也可以不用实现原子 *** 作，具体原因就不展开了。
每天都上亿可能更多的微博内容产生，这样就会有上亿个新的(messageID，likedCount)生成，这样的数据量是比较大的，单机数据库比较难提供高效的服务，所以需要采取sharding的功能(有时候也叫分表分库)，可能根据messageID把这些schema分散到十个或者更多的shards上(据说，sina微博有600个节点，如何三个节点组成一个shard，就有200个shards)，这样每个shard处理的请求就只有原来的十分之一，从而就能提高服务的性能。
关于点赞人列表的设计，一般来说，可能想到的schema是(messageID，userID)，但是这样的设计有一个小问题，就是有些大发的微博可能会得到几十万的点赞，这样就会产生几十万个条数据，这样数据有点多，读取起来可能也慢。所以可以用这样一个schema(messageID，partID，userIDs)，让一个messageID对于多个userID，同时比对应太多的userID，所以加入一个新的partID，一个part存1000个userID，这样几十万个点赞，只需要存几百条数据。这样做还有一个好处，用户点击查看点赞人时的，一般都不是完全显示所有点赞人，而是一批一批显示，这样可以一次只读一条数据，就可显示一批点赞用户信息。
这个，就我知道的说一下，网页主要需要使用HTML,CSS,JavaScript,PHP以及其它。所以如果想写网页还是需要学这些吧。C语言应该是不能做网页。当然有了编程基础学这些也快吧。HTML和CSS可以控制网页上显示什么和显示的格式。JavaScript是客户端的脚本语言，PHP是用于写服务器端的。
比如举个例子
<html xmins="http://www.w3.org/1999/xhtml" xml:lang="en"><head>
<meta http-equiv="Content-Type" content="text/html charset=gb2312">
<title>用户登录</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script language="javascript">
function InputCheck(form1)
{
if(form1.username.value=="")
{
alert('请输入您的账号')
form1.username.focus()
return(false)
}
if(form1.password.value=="")
{
alert('请输入您的密码')
form1.password.focus()
return(false)
}
}
</script>
</head>
<title>用户登录</title>是HTML，作用是在浏览器的标签显示“用户登录”。<link rel="stylesheet" type="text/css" href="styles.css" />也是HTML，作用是链接了一个CSS，就是styles.css，用于控制网页的格式。<script language="javascript">开始的那一段代码是JavaScript，作用是在客户端检查用户输入的账号和密码是否为空，如果为空，就提示“请输入”。
PHP用于在服务器端和数据库交互，数据库可以是MySQL，SQLServer等。因为如果做网页，储存一些用户的信息等最好还是用数据库吧。
希望你能大体明白吧，当然如果制作一个网页的界面可以使用一些软件，如Dreamweaver等，应该能做出比较漂亮的界面。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）