效果图如下：
主页面index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Digg</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(function(){ getdigshtml();})
function isdigs(digtype)//顶一下，踩一下操作
{
$.ajax({
type:'POST',
url:'Digg',
data:'action=digs&digtype='+digtype,
/* beforeSend:function(){
$("#vote").hide();
$("#loadings").show();
}, ajax请求显示loading效果*/
success:function(msg){
switch (msg)
{
/* 后台用来判断
case '1':
$("#loadings").hide();
$("#vote").show();
alert("请先登录！");
break;
case '2':
$("#loadings").hide();
$("#vote").show();
alert("请先下载，再操作！");
break;
case '4':
$("#loadings").hide();
$("#vote").show();
alert("您已经参与过评价！");
break;*/
case '3':
getdigshtml();//重新绑定html
//$("#loadings").hide();
//$("#vote").show();
alert("谢谢你的参与！");
break;
default:
}
}
})
}
function getdigshtml()//获取顶一下，踩一下html
{
$.ajax({
type:'POST',
url:'Digg',
data:'action=getdigshtml',
success:function(msg){
$("#digg").html(msg);
}
})
}
</script>
<style type="text/css">
* {
padding:0;
margin:0;
}
.digg {
height: auto;
width: 190px;
font-size:12px;
font-weight:normal;
}
.digg a {
display: block;
height: 48px;
width: 189px;
background-image: url(images/mark.gif);
background-repeat: no-repeat;
position: relative;
color: #000;
text-decoration: none;
}
.digg .good {
margin-bottom:10px;
margin-top:5px;
}
.digg .good a {
background-position: -189px 0px;
}
.digg .good a:hover {
background-position: 0px 0px;
}
.digg .bad a {
background-position: -378px 0px;
}
.digg .bad a:hover {
background-position: -567px 0px;
}
.digg a p {
padding-left:30px;
line-height:25px;
}
.digg .bar {
background-color: white;
height: 5px;
left: 20px;
overflow: hidden;
position: absolute;
text-align: left;
top: 30px;
width: 55px;
}
.bar #g_img {
background-image: url(images/sprites.gif);
background-repeat: repeat-x;
height: 5px;
width: auto;
}
.bar #b_img {
background-image: url(images/sprites.gif);
background-repeat: repeat-x;
height: 5px;
width: auto;
background-position: 0px -5px;
}
.num {
color: #333;
font: normal normal 100 10px/12px Tahoma;
left: 80px;
position: absolute;
top: 26px;
}
.digg .good .bar {
border: 1px solid #40A300;
}
.digg .bad .bar {
border: 1px solid #555;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="digg" id="digg" style="margin-left: auto;margin-right: auto;">
</div>
</body>
</html>
后台servlet:
package com.test;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.text.NumberFormat;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class Digg extends HttpServlet {
private static Connection con = null;
private static Statement stmt = null;
/**
* Constructor of the object.
*/
public Digg() {
super();
}
/**
* Destruction of the servlet. <br>
*/
public void destroy() {
super.destroy(); // Just puts "destroy" string in log
// Put your code here
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf8");
response.setCharacterEncoding("utf8");
String action = request.getParameter("action");
String digtype = request.getParameter("digtype");
if(action.equals("digs")){
try {
response.getWriter().write(dig(digtype));
} catch (Exception e) {
e.printStackTrace();
}
}else if(action.equals("getdigshtml")){
try {
response.getWriter().write(getDigHtml());
} catch (Exception e) {
e.printStackTrace();
}
}
}
private String dig(String digtype)throws Exception{
String sql ="";
if(digtype.equals("digs")){
sql ="update dig set digs=digs+1 where id =1";
}else{
sql ="update dig set undigs=undigs+1 where id =1";
}
int num =stmt.executeUpdate(sql);
if(num>0){
return "3";
}
return "1";
}
public static void main(String[] args){
NumberFormat nf = NumberFormat.getPercentInstance();
nf.setMaximumIntegerDigits(4);
nf.setMaximumFractionDigits(6);
double d = (double)1/(double)7;
System.out.println(nf.format(d));
}
private String getDigHtml()throws Exception{
NumberFormat nf = NumberFormat.getPercentInstance();
nf.setMaximumIntegerDigits(3);
nf.setMaximumFractionDigits(2);
String sql ="select * from dig where id=1";
ResultSet res = stmt.executeQuery(sql);
double digSum = 0 ;
double unDigSum =0 ;
double digSumAll = 0;
String digPer = "0%";
String unDigPer = "0%";
while(res.next()){
digSum = res.getInt("digs");
unDigSum = res.getInt("undigs");
}
digSumAll = digSum + unDigSum;
if(digSumAll !=0 ){
digPer = nf.format(digSum/digSumAll);
unDigPer = nf.format(unDigSum/digSumAll);
}
String str="<div class='good'>";
str+="<a href=JavaScript:isdigs('digs') >";
str+="<p>很好</p><div class='bar'><div id='g_img' style='width:"+digPer+"'></div></div>";
str+="<span class='num'>"+digPer+"("+digSum+")</span>";
str+="</a></div><div class='bad'>";
str+="<a href=JavaScript:isdigs('undigs') >";
str+="<p>很差</p><div class='bar'><div id='b_img' style='width:"+unDigPer+"'></div></div>";
str+="<span class='num'>"+unDigPer+"("+unDigSum+")</span>";
str+="</a></div>";
return str;
}
/**
* Initialization of the servlet. <br>
*
* @throws ServletException
* if an error occurs
*/
public void init() throws ServletException {
try {
Class.forName("com.mysql.jdbc.Driver");
con = DriverManager.getConnection(
"jdbc:mysql://172.16.42.39:3306/dig", "root", "12345678");
stmt = con.createStatement();
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
public void closeCon() {
try {
stmt.close();
con.close();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
sql语句：
CREATE TABLE dig( id INT PRIMARY KEY, digs INT, undigs INT ); INSERT INTO dig VALUES(1,0,0);
