`這裏寫代碼片`<!DOCTYPE html>
<html lang="en">
<head>
<title>elementFromPoint example</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,user-scalable=0" />
<style type="text/css">
.style_1 {
color: #ffffff;
background-color: #005aaa !important;
font-size: 18px;
width: 87.5%;
margin-top: 25px;
margin-left: 6.25%;
display: block;
line-height: 20px;
padding: 12px 0;
font-weight: normal;
text-align: center;
cursor: pointer;
border-radius: 4px;
text-decoration: none;
border: 0 none;
float: left;
}
</style>
<body>
<div><h1>用戶評價<h1></div>
<table style="1px solid #ccc">
<tr>
<td><h5>服務態度和禮儀</h5></td>
<td>
<table id="fuWuTaiDu">
<tr><td><img src='huibai.png'></td><td><img src='huibai.png'></td><td><img src='huibai.png'></td><td><img src='huibai.png'></td><td><img src='huibai.png'></tr></table>
</td>
</tr>
<tr>
<td><h5>專業產品知識</h5></td>
<td>
<table id="ZyChanP">
<tr><td><img src='huibai.png'></td><td><img src='huibai.png'></td><td><img src='huibai.png'></td><td><img src='huibai.png'></td><td><img src='huibai.png'></tr></table>
</td>
</tr>
<tr>
<td><h5>講解生動、易懂</h5></td>
<td>
<table id="JiangJYd">
<tr><td><img src='huibai.png'></td><td><img src='huibai.png'></td><td><img src='huibai.png'></td><td><img src='huibai.png'></td><td><img src='huibai.png'></tr></table>
</td>
</tr>
<tr>
<td><h5>根據您的需求提供解決方案</h5></td>
<td>
<table id="JieJueFF">
<tr><td><img src='huibai.png'></td><td><img src='huibai.png'></td><td><img src='huibai.png'></td><td><img src='huibai.png'></td><td><img src='huibai.png'></tr></table>
</td>
</tr>
</table>
<a class="button style_1 big" id="submitSampleUp">提交</a>
</body>
<script type="text/javascript">
(function(){
var fuwu="";
var zhuanye="";
var jiangjie="";
var xuqiu="";
initEvent1();
initEvent2();
initEvent3();
initEvent4();
function initEvent1() {
var tableWjx = document.getElementById("fuWuTaiDu");
var tds = tableWjx.getElementsByTagName("td");
for (var i = 0; i < tds.length; i++) {
var td = tds[i];
td.onclick = change1;
}
}
function initEvent2() {
var tableWjx = document.getElementById("ZyChanP");
var tds = tableWjx.getElementsByTagName("td");
for (var i = 0; i < tds.length; i++) {
var td = tds[i];
td.onclick = change2;
}
}
function initEvent3() {
var tableWjx = document.getElementById("JiangJYd");
var tds = tableWjx.getElementsByTagName("td");
for (var i = 0; i < tds.length; i++) {
var td = tds[i];
td.onclick = change3;
}
}
function initEvent4() {
var tableWjx = document.getElementById("JieJueFF");
var tds = tableWjx.getElementsByTagName("td");
for (var i = 0; i < tds.length; i++) {
var td = tds[i];
td.onclick = change4;
}
}
function change1() {
var tableWjx = document.getElementById("fuWuTaiDu");
var tds = tableWjx.getElementsByTagName("td");
// var tds = tableWjx.getElementsByTagName("td");
for (var i = 0; i < 5; i++) {
var td = tds[i];
// td.innerText = "☆";
td.innerHTML = "<img src='huibai.png'>";
}
var index = indexof(tds, this);
fuwu=index+1;
console.log(index+1);
for (var i = 0; i < index + 1; i++) {
var td = tds[i];
td.innerHTML = "<img src='huangjin.png'>";
}
}
function change2(its) {
var tableWjx = document.getElementById("ZyChanP");
var tds = tableWjx.getElementsByTagName("td");
for (var i = 0; i < 5; i++) {
var td = tds[i];
// td.innerText = "☆";
td.innerHTML = "<img src='huibai.png'>";
}
var index = indexof(tds, this);
zhuanye=index+1;
console.log(index+1);
for (var i = 0; i < index + 1; i++) {
var td = tds[i];
td.innerHTML = "<img src='huangjin.png'>";
}
}
function change3(its) {
var tableWjx = document.getElementById("JiangJYd");
var tds = tableWjx.getElementsByTagName("td");
for (var i = 0; i < 5; i++) {
var td = tds[i];
// td.innerText = "☆";
td.innerHTML = "<img src='huibai.png'>";
}
var index = indexof(tds, this);
jiangjie=index+1;
console.log(index+1);
for (var i = 0; i < index + 1; i++) {
var td = tds[i];
td.innerHTML = "<img src='huangjin.png'>";
}
}
function change4(its) {
var tableWjx = document.getElementById("JieJueFF");
var tds = tableWjx.getElementsByTagName("td");
for (var i = 0; i < 5; i++) {
var td = tds[i];
// td.innerText = "☆";
td.innerHTML = "<img src='huibai.png'>";
}
var index = indexof(tds, this);
xuqiu=index+1;
console.log(index+1);
for (var i = 0; i < index + 1; i++) {
var td = tds[i];
td.innerHTML = "<img src='huangjin.png'>";
}
}
function indexof(arr, ele) {
for (var i = 0; i < arr.length; i++) {
if (arr[i] == ele) {
return i;
}
}
return -1;
}
document.getElementById("submitSampleUp").onclick=function(){
if(fuwu=="" || zhuanye=="" || jiangjie=="" || xuqiu==""){
alert("請評價完整");
return;
}
console.log(fuwu+"-"+zhuanye+"-"+jiangjie+"-"+xuqiu);
alert("評價成功");
}
})()
</script>
</script>
</html>
實現效果圖
(https://img-blog.csdn.net/20160426153718354)
html文章需要的圖片
js實現五星評價
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
【JavaScript&JQuery】原生API實現li標籤隨機排列
最近在給我母后做一個項目，需要到隨機排列li元素，看了網上好多插件還有好多源碼，感覺有點兒複雜，而且和我項目並不是很友好，不方便嫁接過來，於是就自己寫了一個方法，看上去還不錯，就放出來分享一下。 內容