轉載請註明出處
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin: 0;padding: 0;list-style-type: none;}
#box{
/*width: 300px;*/
padding: 0 10px;
height:500px;
border: 1px solid #444;
}
#box ul li{width: 100%;position: relative;}
#box ul li p{font: 12px/28px "微軟雅黑";}
#box ul li .p2{position: absolute;top:0;left: 100px;color: #444;}
#box ul li .p3{width:0px;height: 15px;background: yellow;border-radius:0px 10px 10px 0px;}
#date{
border-bottom: 1px solid #444;
font: 14px/24px "微軟雅黑";
}
</style>
</head>
<body>
<div id="box">
<div id="date">
<p class="p1">起始時間: <span></span></p>
<p class="p2">起始時間: <span></span></p>
</div>
<ul>
<li class="L1">
<p class="p1"></p>
<p class="p2"><span class="sp1"></span></p>
<p class="p3"></p>
</li>
<li class="L2">
<p class="p1"></p>
<p class="p2"><span class="sp1"></span></p>
<p class="p3"></p>
</li>
<li class="L3">
<p class="p1"></p>
<p class="p2"><span class="sp1"></span></p>
<p class="p3"></p>
</li>
<li class="L4">
<p class="p1"></p>
<p class="p2"><span class="sp1"></span></p>
<p class="p3"></p>
</li>
<li class="L5">
<p class="p1"></p>
<p class="p2"><span class="sp1"></span></p>
<p class="p3"></p>
</li>
<li class="L6">
<p class="p1"></p>
<p class="p2"><span class="sp1"></span></p>
<p class="p3"></p>
</li>
<li class="L7">
<p class="p1"></p>
<p class="p2"><span class="sp1"></span></p>
<p class="p3"></p>
</li>
<li class="L8">
<p class="p1"></p>
<p class="p2"><span class="sp1"></span></p>
<p class="p3"></p>
</li>
</ul>
</div>
<input type="button"value="查看" id="btn">
</body>
<script src="//cdn.bootcss.com/jquery/3.0.0-rc1/jquery.min.js"></script>
<script src="//cdn.bootcss.com/jquery-easing/1.3/jquery.easing.min.js"></script>
<script>
$(function () {
var xz=function(a){
a+="";
if(a.length==1){
return "0"+a;
}
else{
return a;
}
};
//時間
var oData=new Date();
var fullYear=oData.getFullYear();
var month=oData.getMonth()+1;
var day=oData.getDate();
var hours=oData.getHours();
var Minutes=oData.getMinutes();
$("#date p span").html(fullYear+"-"+xz(month)+"-"+xz(day)+" "+xz(hours)+":"+xz(Minutes));
// $("#date").find("p")[1].html(fullYear+"-"+month+"-"+day+" "+hours+"-"+Minutes);
var oArrMax=function (tmp) {
var max = tmp[0];
for(var i=1;i<tmp.length;i++){
if(max<tmp[i])max=tmp[i];
}
return max;
}
var getStyle=function ( obj , attr ){
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
};
var getRandomColor = function(){
return '#' +
(function(color){
return (color += '0123456789abcdef'[Math.floor(Math.random()*16)])
&& (color.length == 6) ? color : arguments.callee(color);
})('');
}
var oSfe=function (obj,oJson,max,cv,time){
var oName=[];
var oArr=[];
for(key in oJson){
oName.push(key);
oArr.push(oJson[key]);
}
if( max=="max")max=oArrMax(oArr);
var oWidthMax=parseInt(getStyle(obj,"width"));
$("#box ul li").each(function(i){
$(this).find(".p3").css({background:getRandomColor()});
$(this).find(".p3").animate({width:[oArr[i]/max*oWidthMax+"px",cv]},time);
$(this).find(".p2").find(".sp1").html(oArr[i]);
$(this).find(".p1").html(oName[i]);
})
}
var oJson={
張三:300,
李四:200,
王五:150,
馬六:60,
vbn:300,
rty:200,
bmh:150,
fby:60
}
/*
第一個參數:圖表對象
第二個參數:圖表數據
第三個參數:可以是oJson中的最大值(傳入字符串”max“)或指定數字大小
第四個參數:cv曲線
第五個參數:動畫時間(數字)
*/
oSfe($("#box")[0],oJson,"max","easeOutBounce",1000);
//ajax交互
/*$("#btn").click(function () {
var oAjax=$.ajax({
type:"get",
dataType: "json",
url: "js/text.php",
data: data,
success: function (data) {
return data;
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(errorThrown);
}
});
// oSfe($("#box")[0],oAjax,500);
alert(oAjax);
})*/
})
</script>
</html>