Hoje escrevi outro exemplo interessante: sistema de classificação em estrelas (pode personalizar o número de estrelas e exibir informações)
sufustar.star (); usa o valor padrão de 5 estrelas, informações padrão
var msg = [......]; sufustar.star (10, msg); O número de estrelas personalizadas é 10, informações de exibição, valor padrão de referência de formato de msg, o número de estrelas deve ser consistente com o número de estrelas;
A implementação de alguns exemplos por si mesmo tem uma vantagem, o que pode aumentar sua proficiência na aplicação de vários pontos de conhecimento e também testar suas próprias fraquezas! Uma vez descoberto, procure imediatamente a documentação da API e compense!
Não sei se sou muito estúpido, mas este exemplo foi escrito por um dia inteiro!
Não vamos falar bobagens, vamos falar sobre os pontos de conhecimento envolvidos neste exemplo:
1. Use a borda CSS para desenhar um triângulo e usar antes para adicioná -lo a outros elementos;
2. Aprenda a usar o CSS para localizar elementos;
3. Agente para eventos de aprendizagem;
4. Como otimizar o desempenho;
5. Aplicação do método de correspondência do objeto de sequência e aplicação de expressões regulares;
6. Registrar eventos e manuseio de eventos requer métodos de escrita compatíveis com o IE;
7. Aprenda a usar '||' para definir valores padrão para variáveis;
8. Simplifique o código: retire o código que pode ser repetido e escrevê -lo em uma função separadamente;
Abaixo está o código completo com comentários. Se você não entende, verifique o documento. Com meu nível atual, só posso escrever assim. Se você tiver boas sugestões, sinta -se à vontade para apontar!
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> </title> <style> *{margin: 0; preenchimento: 0; } #Star {Position: Absolute; Esquerda: 0; Direita: 0; TOP: 30px; Inferior: 0; margem: automático; largura: 80%; tamanho de fonte: 12px; } #Star-Div {margem: 5px; tamanho de fonte: 0; } #star-div um {display: inline-block; Largura: 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/susufufufu/star1.gif) no-repeat; } #star-info {posição: absoluto; topo: 55px; Esquerda: -30px; Exibir: Nenhum; Largura: 155px; Altura: 50px; preenchimento: 2px; altura de linha: 17px; Radio de fronteira: 8px; Background-Color: ouro; Index z: 5; } #star-info: antes {content: ''; Bottom de fronteira: 10px de ouro sólido; Interação da borda: 10px RGBA sólido (0,0,0,0); Fronteira: 10px RGBA sólido (0,0,0,0); Posição: Absoluto; Esquerda: 35px; topo: -10px; } #star-span {altura de linha: 14px} #star-info forte, #star-span forte {color: vermelho; } </style> <cript> window.onload = function () {var sufustar = function () {// função da ferramenta função gbyid (id) {return document.getElementById (id);} função addEvent (elem, tipo, func) {// complibível com iEd if (eMEM.ADDEVENTLEMEN) {ELMEVEN) {ELEMD.EV.Em.AtDEMEN, ELEMD.Em.AdDeVent.Em) {Func) {// Compatible) (eLem) (eLem) (eLem)) if (elem.attachevent) {elem.attachevent ('on'+type, func)}} função getIndex (event) {// compatível com ie var e = evento || Window.Event; var t = e.Target || E.Srcelement; if (t.TagName.TolowerCase () === 'A') {return parseint (t.innerhtml); }} função showInfo (index, msg) {var info = gbyid ('star-info'); info.style.display = 'bloco'; info.style.left = índice*21-51+'px'; info.innerhtml = "<strong>"+index+'pontos'+msg [index-1] .match (/(.+)/ |/) [1]+'<r />'+'</strong>'+msg[index-1 ].match(//|(.+./) } função appensstar (elem, nums) {var fragment = document.createCumentFragment (); // Para melhorar o desempenho, porque o DocumentFragment é usado para anexar uma vez, a página será renderizada apenas uma vez para (var i = 0; i <nums; i ++) {var a = document.createElement ('a'); a.innerhtml = i+1; A.Href = "JavaScript :;"; // o comportamento padrão do bloqueio do navegador clique em Link Fragment.appendChild (a); } elem.appendChild (frag); } // A estrela da função da função do corpo (num, mymsg) {var n = num || 5; // Quando o NUM tiver um valor, pegue seu valor e, se não houver valor, pegue o valor padrão 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", "Muito satisfeito | A qualidade é muito boa, completamente consistente com a descrição do vendedor, muito satisfeita"]; var starContainer = gbyid ('star-div'); Appenstar (StarContainer, N); addEvent (StarContainer, 'MouseOver', Over); // Use o modo proxy do evento (evento proxy através do elemento pai da tag <a>) addEvent (starContainer, 'mouseout', out); addEvent (StarContainer, 'clique', clique); função sobre (event) {if (getIndex (event)) {// se getIndex (event) não puder obter o valor, isso significa que o alvo do evento de acionamento atual não é <a> tag var index = getIndex (event); alteração (índice); showInfo (índice, msg); }} function out (event) {alteração (); // Defina a pontuação para o status clicado clickstar gbyId ('star-info'). Style.display = 'none'} função clique (event) {if (getIndex (event)) {var index = getIndex (event); clickstar = index; // Salvar o status de clique GbyId ('Star-Info'). Style.display = 'None'; gbyid ('star -span'). innerhtml = "<strong>" + index + 'point' + msg [índice - 1] .match (/(.+)/ |/) [1] + '</strong>' + '<r/>' ' + msg [index - 1] .match (// | (. +)/) [1]; }} função alteração (index) {currentStar = index || clickstar; for (var i = 0; i <n; i ++) {starContainer.Children [i] .className = i <currentStar? 'on': ''}}} retornar {star: star}} (); // O () aqui significa que a função é executada imediatamente, para que a variável sufustar possa chamar o valor de retorno da estrela da função anônima // Execução de chamada: sufustar.star (num, mymsg), o parâmetro pode estar vazio, o parâmetro num, mymsg será definido como o valor padrão sufustar.Star (); } </sCript> </head> <body> <div id = "star"> <pan> clique nas estrelas para pontuar: </span> <div id = "star-div"> </div> <span id = "star-span"> </span> <p id = "star-info"> </p> </div> </body> </html>O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.