Today I wrote another cool example: star rating system (can customize the number of stars and display information)
sufuStar.star();
Use the default value of 5 stars, default information
var msg = [......];
sufuStar.star(10,msg);
The number of custom stars is 10, and the display information is referenced to the default value of msg format. The number of stars must be consistent with the number of stars;
Implementing some examples by yourself has an advantage, which can increase your proficiency in applying various knowledge points and also test your own weaknesses! Once discovered, immediately search the API documentation and make up for it!
I don’t know if I’m too stupid, but this example was written for a whole day!
Let’s not talk nonsense, let’s talk about the knowledge points involved in this example:
1. Use CSS border to draw a triangle and use before to add it to other elements;
2. Learn how to use CSS to locate elements;
3. Agent for learning events;
4. How to optimize performance;
5. Application of match method of String object and application of regular expressions;
6. Registering events and event handling requires IE-compatible writing methods;
7. Learn how to use '||' to set default values for variables;
8. Simplify the code: take out the code that may be repeated and write it into a function separately;
Below is the complete code with comments. If you don’t understand, please check the document. With my current level, I can only write it like this. If you have any good suggestions, please feel free to point it out!
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } #star{ position: absolute; left: 0; right: 0; top: 30px; bottom: 0; margin: auto; width: 80%; font-size: 12px; } #star-div{ margin:5px; font-size: 0; } #star-div a{ display: inline-block; width: 21px; height: 21px; background: url(http://files.cnblogs.com/files/susufufu/star0.gif) no-repeat; } #star-div .on{ background: url(http://files.cnblogs.com/files/susufufu/star1.gif) no-repeat; } #star-info{ position: absolute; top: 55px; left: -30px; display: none; width: 155px; height: 50px; padding: 2px; line-height: 17px; border-radius: 8px; background-color: gold; z-index: 5; } #star-info:before{ content: ''; border-bottom: 10px solid gold; border-left: 10px solid rgba(0,0,0,0); border-right: 10px solid rgba(0,0,0,0); position: absolute; left: 35px; top: -10px; } #star-span{line-height: 14px} #star-info strong,#star-span strong{ color: red; } </style> <script> window.onload = function(){ var sufuStar = function (){ //Tool function function gbyId(id){return document.getElementById(id);} function addEvent(elem,type,func){ //Compatible with IE if(elem.addEventListener){ elem.addEventListener(type,func,false) }else if(elem.attachEvent){ elem.attachEvent('on'+type,func) } } function getIndex(event) { //Compatible with IE var e = event || window.event; var t = e.target || e.srcElement; if (t.tagName.toLowerCase() === 'a') { return parseInt(t.innerHTML); } } function showInfo(index,msg){ var info = gbyId('star-info'); info.style.display = 'block'; info.style.left = index*21-51+'px'; info.innerHTML = "<strong> "+index+' points'+msg[index-1].match(/(.+)/|/)[1]+'<br />'+'</strong>'+msg[index-1].match(//|(.+)/)[1]; } function appenStar(elem,nums){ var fragment = document.createDocumentFragment(); //In order to improve performance, because DocumentFragment is used to append at one time, the page will only be rerendered once for(var i = 0;i<nums;i++){ var a =document.createElement('a'); a.innerHTML = i+1; a.href = "javascript:;"; //The default behavior of blocking browser click link fragment.appendChild(a); } elem.appendChild(frag); } //The body function function star(num,myMsg){ var n = num||5; //When num has a value, take its value, and if there is no value, take the default value 5; var clickStar=currentStar=0; //clickStar saves click status var msg = myMsg||[ "Very dissatisfied|It is too bad, seriously inconsistent with the seller's description, very dissatisfied", "Dissatisfied|partially damaged, inconsistent with the seller's description, not satisfied", "General|quality is average, not as good as the seller's description", "Satisfied|quality is good, basically consistent with the seller's description, quite satisfied", "very satisfied|quality is very good, completely consistent with the seller's description, very satisfied" ]; var starContainer = gbyId('star-div'); appenStar(starContainer,n); addEvent(starContainer,'mouseover',over); //Use event proxy mode (proxy event through the parent element of the <a> tag) addEvent(starContainer,'mouseout',out); addEvent(starContainer,'click',click); function over(event){ if(getIndex(event)){ //If getIndex(event) cannot get the value, it means that the target of the current triggering event is not <a> tag var index = getIndex(event); change(index); showInfo(index,msg); } } function out(event){ change(); //Set the score to clicked status clickStar gbyId('star-info').style.display = 'none' } function click(event) { if (getIndex(event)) { var index = getIndex(event); clickStar = index; //Save the click status gbyId('star-info').style.display = 'none'; gbyId('star-span').innerHTML = "<strong>" + index + 'point' + msg[index - 1].match(/(.+)/|/)[1] + '</strong>'+'<br />'+ msg[index - 1].match(//|(.+)/)[1]; } } function change(index){ currentStar = index||clickStar; for(var i=0;i<n;i++){ starContainer.children[i].className = i<currentStar ? 'on' : '' } } } return { star:star } }(); //The () here means that the function is executed immediately, so that the variable sufuStar can call the return value of the anonymous function star //Call execution: sufuStar.star(num,myMsg), the parameter can be empty, the parameter num, myMsg will be set to the default value sufuStar.star(); } </script></head><body><div id="star"> <span>Click on the stars to score:</span> <div id="star-div"> </div> <span id="star-span"></span> <p id="star-info"> </p></div></body></html>The above simple example of the native JS implementation-star rating system is all the content I have shared with you. I hope you can give you a reference and I hope you can support Wulin.com more.