星星评价

浏览:304 发布日期:2018/01/12 分类:功能实现 关键字: javascript thinphp5 星星评价特效
thinphp5 javascript 实现星星评价特效
html 页面

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
span {font-size: 50px;}
</style>
<script>
window.onload = function (){
var oP = document.getElementsByTagName("p")[0];
var oSpan = document.getElementsByTagName("span")[0];
var aImg = oP.getElementsByTagName("img");
var arr = ['差','较差','一般','推荐','力荐'];

/*
* __STATIC__/home/img_test/day8/starty.png 黄色背景星星图
* __STATIC__/home/img_test/day8/start1.png 灰色背景星星图
* */
var off = true;
for(var i=0;i<aImg.length;i++){
aImg[i].index = i;
aImg[i].onmouseover = function (){
for(var i=0;i<aImg.length;i++){
if(i<=this.index){
aImg[i].src = "__STATIC__/home/img_test/day8/starty.png";
}else if(i>this.index){
aImg[i].src = "__STATIC__/home/img_test/day8/start1.png";
}
}
oSpan.innerHTML = arr[this.index%(arr.length)];
}
aImg[i].onmouseout = function (){
if(off) {
for (var j = 0; j <= this.index; j++) {
aImg[j].src = "__STATIC__/home/img_test/day8/start1.png";
}
oSpan.innerHTML = "";
}else{
off = true;
}
}
aImg[i].onclick = function (){
for(var j=0;j<=this.index;j++){
aImg[j].src = "__STATIC__/home/img_test/day8/starty.png";
}
off = false;
}
}
}
</script>
</head>
<body>
<p>*总体评价:  
<img src="__STATIC__/home/img_test/day8/start1.png">
<img src="__STATIC__/home/img_test/day8/start1.png">
<img src="__STATIC__/home/img_test/day8/start1.png">
<img src="__STATIC__/home/img_test/day8/start1.png">
<img src="__STATIC__/home/img_test/day8/start1.png">
<span></span>
</p>
</body>
</html>

控制器 :
public function home_work1(){
return view("home_work1");
}
评论( 相关
后面还有条评论,点击查看>>