Сегодня я написал еще один крутой пример: система звездного рейтинга (может настроить количество звезд и отображать информацию)
sufustar.star (); Использует значение по умолчанию 5 звезд, информация по умолчанию
var msg = [......]; sufustar.star (10, msg); Количество пользовательских звезд составляет 10, информация отображения, ссылочное значение формата MSG, количество звезд должно соответствовать количеству звезд;
Реализация некоторых примеров самостоятельно имеет преимущество, которое может повысить ваше мастерство в применении различных точек знаний, а также проверить ваши собственные слабости! После обнаружения немедленно найдите документацию API и восполняйте это!
Я не знаю, слишком ли я глуп, но этот пример был написан целый день!
Давайте не будем говорить о чушь, давайте поговорим о моментах знаний, связанных с этим примером:
1. Используйте границу CSS, чтобы нарисовать треугольник и использовать, чтобы добавить его в другие элементы;
2. Узнайте, как использовать CSS для поиска элементов;
3. Агент для обучения событий;
4. Как оптимизировать производительность;
5. Применение метода соответствия строкового объекта и применение регулярных выражений;
6. Регистрация событий и обработки событий требует IE-совместимых методов написания;
7. Узнайте, как использовать '||' установить значения по умолчанию для переменных;
8. Упростите код: выберите код, который можно повторить, и напишите его в функцию отдельно;
Ниже приведен полный код с комментариями. Если вы не понимаете, пожалуйста, проверьте документ. С моим текущим уровнем я могу написать только так. Если у вас есть хорошие предложения, пожалуйста, не стесняйтесь указывать это!
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> </title> <style> *{margin: 0; Заполнение: 0; } #star {position: Absolute; слева: 0; Справа: 0; Верх: 30px; Внизу: 0; Порность: Авто; Ширина: 80%; размер шрифта: 12px; } #star-div {margin: 5px; размер шрифта: 0; } #star-div a {display: inline-block; Ширина: 21px; Высота: 21px; Предпосылки: URL (http://files.cnblogs.com/files/susufufu/star0.gif) no-repeat; } #star-div .on {founale: url (http://files.cnblogs.com/files/susufufu/star1.gif) no-repeat; } #star-info {position: Absolute; Верх: 55px; Слева: -30px; дисплей: нет; Ширина: 155px; Высота: 50px; Заполнение: 2px; высота линии: 17px; граница радий: 8px; фоновый цвет: золото; z-index: 5; } #star-info: до {content: ''; Пограничный подвод: 10px твердое золото; Слево с границы: солидный RGBA 10PX (0,0,0,0); Право границы: 10PX SOLID RGBA (0,0,0,0); позиция: абсолютно; Слева: 35px; Верх: -10px; } #star-span {line-hight: 14px} #star-info strong, #star-span strong {color: red; } </style> <script> window.onload = function () {var sufustar = function () {// функция инструментов функция gbyid (id) {return document.getElementById (id);} функция addEvent (elem, type, func) {// совместимо с ie if if (elem.addeventener) {elem.addellester (elem.addeventener) {elem.addlister (elem. if (elem.attachevent) {elem.attachevent ('on'+type, func)}} function getIndex (event) {// Совместимо с IE var e = Event || window.event; var t = e.target || E.srcelement; if (t.tagname.tolowercase () === 'a') {return parseint (t.innerhtml); }} функция 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=-1^. } function appenstar (elem, nums) {var fragment = document.createdocumentFragment (); // Чтобы улучшить производительность, поскольку DocumentFragment используется для добавления за один раз, страница будет перенесена только один раз для (var i = 0; i <nums; i ++) {var a = document.createElement ('a'); a.innerhtml = i+1; a.href = "javascript:;"; // поведение по умолчанию блокировки браузера нажмите на ссылку Fragment.appendchild (a); } elem.appendchild (frag); } // Звезда функции тела (num, mymsg) {var n = num || 5; // Когда num имеет значение, возьмите его значение, и если нет значения, возьмите значение по умолчанию 5; var clickstar = currentStar = 0; // ClickStar сохраняет статус клика VAR MSG = MYMSG || [«Очень недоволен | Это очень плохо, серьезно противоречит описанию продавца, очень недовольным», «недовольный | частично поврежден, не согласовывающе удовлетворен »,« очень удовлетворено | качество очень хорошее, совершенно согласуется с описанием продавца, очень довольным »]; var starcontainer = gbyid ('star-div'); Appenstar (Starcontainer, N); addEvent (StarContainer, «MouseOver», Over); // Использование прокси -режима события (прокси -событие через родительский элемент <a> тег) addevent (starcontainer, 'mouseout', out); addEvent (starcontainer, 'click', click); Функция Over (event) {if (getIndex (event)) {// Если getIndex (event) не может получить значение, это означает, что целью текущего события запуска не является <a> Tag var index = getIndex (event); изменение (индекс); ShowInfo (Index, MSG); }} function out (event) {change (); // Установите счет, чтобы нажать Status ClickStar GBYID ('star-info'). Style.display = 'none'} function click (event) {if (getIndex (event)) {var index = getIndex (event); clickstar = index; // Сохранить статус клика 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]; }} изменение функции (index) {currentStar = index || clickstar; for (var i = 0; i <n; i ++) {starcontainer.children [i] .classname = i <currentStar? 'on': ''}}} return {star: star}} (); // () Здесь означает, что функция выполняется немедленно, так что переменная Sufustar может вызвать возвратное значение звезды анонимной функции // Вызов. } </script> </head> <body> <div id = "star"> <pan> Нажмите на звезды, чтобы забить: </span> <div id = "star-div"> </div> <span = "Star-span"> </span> <p id = "star-info"> </p> </div> </body> </html>Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.