Hoy escribí otro ejemplo genial: el sistema de calificación de estrellas (puede personalizar el número de estrellas y la información de visualización)
sufustar.star (); utiliza el valor predeterminado de 5 estrellas, información predeterminada
var msg = [......]; Sufustar.star (10, MSG); El número de estrellas personalizadas es 10, información de visualización, valor predeterminado de referencia de formato MSG, el número de estrellas debe ser consistente con el número de estrellas;
Implementar algunos ejemplos por sí mismo tiene una ventaja, lo que puede aumentar su competencia en la aplicación de varios puntos de conocimiento y también probar sus propias debilidades. Una vez descubierto, ¡busque inmediatamente la documentación de la API y compensarla!
No sé si soy demasiado estúpido, ¡pero este ejemplo fue escrito durante todo un día!
No hablemos de tonterías, hablemos sobre los puntos de conocimiento involucrados en este ejemplo:
1. Use el borde CSS para dibujar un triángulo y usar antes para agregarlo a otros elementos;
2. Aprenda a usar CSS para localizar elementos;
3. Agente para eventos de aprendizaje;
4. Cómo optimizar el rendimiento;
5. Aplicación del método de coincidencia de objeto de cadena y aplicación de expresiones regulares;
6. El registro de eventos y el manejo de eventos requiere métodos de escritura compatibles con IE;
7. Aprenda a usar '||' para establecer valores predeterminados para variables;
8. Simplifique el código: Saque el código que puede repetirse y escribirlo en una función por separado;
A continuación se muestra el código completo con comentarios. Si no lo entiende, consulte el documento. Con mi nivel actual, solo puedo escribirlo así. Si tiene buenas sugerencias, ¡no dude en señalarlo!
<! DocType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> </title> <style> *{margin: 0; relleno: 0; } #star {posición: absoluto; Izquierda: 0; Derecha: 0; arriba: 30px; Abajo: 0; margen: auto; Ancho: 80%; tamaño de fuente: 12px; } #Star-Div {margen: 5px; tamaño de fuente: 0; } #Star-Div A {Display: Inline-Block; Ancho: 21px; Altura: 21px; Antecedentes: 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-depheat; } #Star-Info {posición: Absolute; Arriba: 55px; Izquierda: -30px; Pantalla: ninguno; Ancho: 155px; Altura: 50px; relleno: 2px; Línea de altura: 17px; Border-Radius: 8px; Color de fondo: oro; índice z: 5; } #Star-Info: antes {content: ''; Border-Bottom: 10px de oro sólido; Border-izquierda: 10px RGBA sólido (0,0,0,0); Border-Right: 10px RGBA sólido (0,0,0,0); Posición: Absoluto; Izquierda: 35px; arriba: -10px; } #star-span {line-height: 14px} #Star-Info Strong, #Star-Span Strong {color: rojo; } </style> <script> window.onload = function () {var sufustar = function () {// herramienta function function gbyid (id) {return document.getElementById (id);} function addEvent (elem, type, func) {// compatible con IE if (elem.addeventListener) {Elem.addeventListener (type, type, type, False) if (elem.attachevent) {elem.attachevent ('on'+type, func)}} function getIndex (event) {// compatible con IE var e = evento || Window.event; var t = e.target || E.Sracelement; if (t.tagname.tolowercase () === 'a') {return parseInt (t.innerhtml); }} función showInfo (index, msg) {var info = gbyid ('star-info'); info.style.display = 'bloque'; info.style.left = índice*21-51+'px'; info.innerhtml = "<strong>"+índice+'puntos'+msg [index-1] .match (/(.+)/ |/) [1]+'<br />'''+'</strong>' +msgche-1font>.match(//|(.+)/)=1]; } función appenstar (elem, nums) {var fragment = document.ceateDocumentFragment (); // Para mejorar el rendimiento, porque DocumentFragment se usa para agregar a la vez, la página solo se volverá a reproducir una vez para (var i = 0; i <nums; i ++) {var a = document.createElement ('a'); a.innerhtml = i+1; a.href = "javascript :;"; // El comportamiento predeterminado del navegador de bloqueo Haga clic en fragmento de enlace.appendChild (a); } Elem.appendChild (frag); } // La función del cuerpo Función Star (num, mymsg) {var n = num || 5; // Cuando NUM tiene un valor, tome su valor, y si no hay valor, tome el valor predeterminado 5; var clickstar = currentstar = 0; // clickstar guarda el estado de clic var msg = mymsg || ["muy insatisfecho | Es una lástima, seriamente inconsistente con la descripción del vendedor, muy insatisfecho", "insatisfecho | parcialmente dañado, inconsistente con la descripción del vendedor, no satisfecho", la calidad de la calidad es promedio, no tan buena como la descripción del vellador ", satisfecho. Satisfecha es buena, es buena, la calidad es buena, la calidad, la calidad, la base, es la descripción del Sellador, es muy satisfecha, la calidad, la calidad, la calidad es muy buena. satisfecho "," muy satisfecho | La calidad es muy buena, completamente consistente con la descripción del vendedor, muy satisfecha "]; var starContainer = GBYID ('Star-Div'); Appenstar (StarContainer, N); addEvent (StarContainer, 'Mouseover', Over); // use el modo proxy de eventos (evento proxy a través del elemento principal de la etiqueta <a>) addEvent (starContainer, 'mouseOut', out); addEvent (starContainer, 'hacer clic', hacer clic); function over (event) {if (getIndex (event)) {// if getIndex (evento) no puede obtener el valor, significa que el objetivo del evento de activación actual no es <a> tag var index = getIndex (evento); cambio (índice); showInfo (índice, msg); }} function out (event) {Change (); // Establezca la puntuación en el estado haciendo clic clickstar gbyid ('star-info'). Style.display = 'none'} Función Click (Event) {if (getIndex (event)) {var index = getIndex (event); clickstar = index; // Guardar el estado de clic gbyid ('star-info'). Style.display = 'none'; gbyid ('star -span'). innerhtml = "<strong>" + index + 'punto' + msg [index - 1] .match (/(.+)/ |/) [1] + '</strong>' + '<br />' + msg [index - 1] .match (// | (. +)/) [1]; }} cambio de función (index) {currentstar = index || clickstar; para (var i = 0; i <n; i ++) {starContainer.children [i] .classname = i <currentstar? 'on': ''}}} return {star: star}} (); // el () aquí significa que la función se ejecuta de inmediato, de modo que la variable sufustar puede llamar al valor de retorno de la función anónima estrella // ejecución de llamadas: sufustar.star (num, mymsg), el parámetro puede estar vacío, el parámetro num, mymsg se establecerá en el valor predeterminado sufustar.star (); } </script> </head> <body> <div id = "Star"> <span> Haga clic en las estrellas para obtener: </span> <div ID = "Star-Div"> </div> <span id = "Star-span"> </span> <p id = "Star-Info"> </p> </div> </body> </html>Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.