<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title>
<style> * { margin: 0; padding: 0; }
#d1 { width: 200px; height: 29px; /* border: 1px solid #ccc; */ margin-top: 50px; margin-left: 100px; overflow: hidden;
}
#inp { width: 200px; margin-left: 100px; margin-top: 5px; border: 0; }
#d2 { width: 27px; height: 29px; float: left; background: url(./star.gif); background-repeat: no-repeat; background-position-y: 0px; transition: all 0s;
}
#d3 { width: 27px; height: 29px; float: left; background: url(./star.gif); background-repeat: no-repeat; background-position-y: 0px;
}
#d4 { width: 27px; height: 29px; float: left; background: url(./star.gif); background-repeat: no-repeat; background-position-y: 0px;
}
#d5 { width: 27px; height: 29px; float: left; background: url(./star.gif); background-repeat: no-repeat; background-position-y: 0px;  
}
#d6 { width: 27px; height: 29px; float: left; background: url(./star.gif); background-repeat: no-repeat; background-position-y: 0px;
} </style> <script src="./common.js"></script> <script> window.onload = function () { var d2 = document.querySelector("#d2"); var d3 = document.querySelector("#d3"); var d4 = document.querySelector("#d4"); var d5 = document.querySelector("#d5"); var d6 = document.querySelector("#d6"); var inp = document.querySelector("#inp"); // console.log(d2, d3, d4, d5, d6);
d2.onmouseover = function () { startMove(d2, { "background-position-y": -29 }); inp.value = "差评"; }
d3.onmouseover = function () { startMove(d2, { "background-position-y": -29 }); startMove(d3, { "background-position-y": -29 }); inp.value = "一般"; } d4.onmouseover = function () { startMove(d2, { "background-position-y": -29 }); startMove(d3, { "background-position-y": -29 }); startMove(d4, { "background-position-y": -29 }); inp.value = "良好"; } d5.onmouseover = function () { startMove(d2, { "background-position-y": -29 }); startMove(d3, { "background-position-y": -29 }); startMove(d4, { "background-position-y": -29 }); startMove(d5, { "background-position-y": -29 }); inp.value = "满意"; } d6.onmouseover = function () { startMove(d2, { "background-position-y": -29 }); startMove(d3, { "background-position-y": -29 }); startMove(d4, { "background-position-y": -29 }); startMove(d5, { "background-position-y": -29 }); startMove(d6, { "background-position-y": -29 }); inp.value = "非常满意"; }
// d6.onmouseout = function () { startMove(d6, { "background-position-y": 0 }); inp.value = "满意"; }
d5.onmouseout = function () { startMove(d6, { "background-position-y": 0 }); startMove(d5, { "background-position-y": 0 }); inp.value = "良好"; } d4.onmouseout = function () { startMove(d6, { "background-position-y": 0 }); startMove(d5, { "background-position-y": 0 }); startMove(d4, { "background-position-y": 0 }); inp.value = "一般"; } d3.onmouseout = function () { startMove(d6, { "background-position-y": 0 }); startMove(d5, { "background-position-y": 0 }); startMove(d4, { "background-position-y": 0 }); startMove(d3, { "background-position-y": 0 }); inp.value = "差评";
} d2.onmouseout = function () { startMove(d6, { "background-position-y": 0 }); startMove(d5, { "background-position-y": 0 }); startMove(d4, { "background-position-y": 0 }); startMove(d3, { "background-position-y": 0 }); startMove(d2, { "background-position-y": 0 }); inp.value = ""; } } </script> </head>
<body> <div id="d1"> <div id="d2"></div> <div id="d3"></div> <div id="d4"></div> <div id="d5"></div> <div id="d6"></div> </div> <input type="text" id="inp">
</body>
</html>
扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄