这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要 weidajiaxiangxi 介绍了很酷的星级评分系统原生 JS 实现,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
今天我又写了个很酷的实例:星级评分系统(可自定义星星个数、显示信息) sufuStar.star(); 使用默认值 5 个星星,默认信息 var msg = [........]; sufuStar.star(10,msg); 自定义星星个数为 10、显示信息 msg 格式参考默认值,条数必须和星星个数一致;
自己实现一些实例,有个好处,能增加应用各知识点的熟练度,还能检验出自己的薄弱项!一经发现,立即翻 API 文档恶补!
不知道是不是我太笨,这个实例居然写了整整一天!
不废话了,先说下这个实例涉及的知识点: 1. 用 CSS 的 border 来画个三角形,并用 before 来把它加到其它元素上; 2. 学习如何用 CSS 来定位元素; 3. 学习事件的代理; 4. 如何优化性能; 5.String 对象的 match 方法的应用,正则表达式的应用; 6. 注册事件与事件处理,需要兼容 IE 的写法; 7. 学习如何利用'||'给变量设置默认值; 8. 简化代码:将可能要重复写的代码拿出来,单独写成一个函数;
下面是带注释的完整代码,碰到不懂得就查文档吧,以我目前的水平只能写成这样了,若有好的建议,欢迎前辈指出!
- <!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() {
- //工具函数
- function gbyId(id) {
- return document.getElementById(id);
- }
- function addEvent(elem, type, func) { //兼容IE
- if (elem.addEventListener) {
- elem.addEventListener(type, func, false)
- } else 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);
- }
- }
- function showInfo(index, msg) {
- var info = gbyId('star-info');
- info.style.display = 'block';
- info.style.left = index * 21 - 51 + 'px';
- info.innerHTML = "<strong> " + index + '分 ' + msg[index - 1].match(/(.+)\|/)[1] + '<br />' + '</strong>' + msg[index - 1].match(/\|(.+)/)[1];
- }
- function appenStar(elem, nums) {
- var frag = document.createDocumentFragment(); //为了提高性能,因使用DocumentFragment一次性append,这样页面只重新渲染一次
- for (var i = 0; i < nums; i++) {
- var a = document.createElement('a');
- a.innerHTML = i + 1;
- a.href = "javascript:;"; //阻止浏览器的点击链接的默认行为
- frag.appendChild(a);
- }
- elem.appendChild(frag);
- }
- //主体函数
- function star(num, myMsg) {
- var n = num || 5; //当num有值则取其值,无值则取默认值5;
- var clickStar = curentStar = 0; //clickStar保存点击状态
- var msg = myMsg || ["很不满意|差得太离谱,与卖家描述的严重不符,非常不满", "不满意|部分有破损,与卖家描述的不符,不满意", "一般|质量一般,没有卖家描述的那么好", "满意|质量不错,与卖家描述的基本一致,还是挺满意的", "非常满意|质量非常好,与卖家描述的完全一致,非常满意"];
- var starContainer = gbyId('star-div');
- appenStar(starContainer, n);
- addEvent(starContainer, 'mouseover', over); //采用事件代理模式(通过<a>标签的父元素starContainer来代理事件)
- addEvent(starContainer, 'mouseout', out);
- addEvent(starContainer, 'click', click);
- function over(event) {
- if (getIndex(event)) { //若getIndex(event)取不到值,说明当前触发事件的目标不是<a>标签
- var index = getIndex(event);
- change(index);
- showInfo(index, msg);
- }
- }
- function out(event) {
- change(); //将评分设为已点击状态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 + '分 ' + msg[index - 1].match(/(.+)\|/)[1] + '</strong>' + '<br />' + msg[index - 1].match(/\|(.+)/)[1];
- }
- }
- function change(index) {
- curentStar = index || clickStar;
- for (var i = 0; i < n; i++) {
- starContainer.children[i].className = i < curentStar ? 'on': ''
- }
- }
- }
- return {
- star: star
- }
- } (); //这里的()表示函数立即执行,这样变量sufuStar才能调用匿名函数的返回值star
- //调用执行: sufuStar.star(num,myMsg),参数可为空,参数num,myMsg将设为默认值
- sufuStar.star();
- }
- </script>
- </head>
- <body>
- <div id="star">
- <span>
- 点击星星打分:
- </span>
- <div id="star-div">
- </div>
- <span id="star-span">
- </span>
- <p id="star-info">
- </p>
- </div>
- </body>
- </html>
来源: http://www.phperz.com/article/17/0520/332321.html