javascript - 随机数添加类
巴扎黑
巴扎黑 2017-04-11 09:10:01
[JavaScript讨论组]


  js代码中,有??的地方,我利用随机数,可以改变内容,但是却无法添加类?请问为什么?
    *html:
    

  • 1月节日

    元旦节:1月1日到3日放假3天

*css: #myCalendar { width: 240px; margin: 10px auto; padding: 10px 0 10px 10px; background-color: #CCCCCC; } #myCalendar .myDate li { width: 28px; height: 28px; line-height: 14px; text-align: center; background-color: #424242; color: #fff; margin: 0 10px 10px 0; border: solid 1px #000; padding: 10px; cursor: pointer; } #myCalendar ul p span { display: block; margin-bottom: 3px; } #myCalendar ul p span:nth-child(1) { font-size: 16px; font-weight: bold; } #myCalendar .myFestival { width: 218px; padding: 5px; border: solid 1px #fff; background-color: #F1F1F1; color: #666666; } #myCalendar .myFestival li p:nth-child(1) { font: bold 14px/20px "微软雅黑"; margin-bottom: 5px; } #myCalendar .myFestival span { margin-right: 5px; } #myCalendar .myDate li.current:hover { background-color: #fff; color: #FF6699; } *common.css * { margin: 0; padding: 0; list-style: none; } /* KISSY CSS Reset 理念:1. reset 的目的不是清除浏览器的默认样式,这仅是部分工作。清除和重置是紧密不可分的。 2. reset 的目的不是让默认样式在所有浏览器下一致,而是减少默认样式有可能带来的问题。 3. reset 期望提供一套普适通用的基础样式。但没有银弹,推荐根据具体需求,裁剪和修改后再使用。 特色:1. 适应中文;2. 基于最新主流浏览器。 */ /** 清除内外边距 **/ body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,/* structural elements 结构元素 */ dl,dt,dd,ul,ol,li,/* list elements 列表元素 */ pre,/* text formatting elements 文本格式元素 */ form,fieldset,legend,button,input,textarea,/* form elements 表单元素 */ th,td/* table elements 表格元素 */, span,img,a{ margin:0; padding:0; } /** 设置默认字体 **/ body,button,input,select,textarea/* for ie */{ font-family:微软雅黑; font-size:12px; background-color: white; } h1,h2,h3,h4,h5,h6{ font-size:100%; } address,cite,dfn,em,var{font-style:normal; } /* 将斜体扶正 */ code,kbd,pre,samp{font-family:couriernew,courier,monospace; } /* 统一等宽字体 */ small{font-size:12px; } /* 小于 12px 的中文很难阅读,让 small 正常化 */ /** 重置列表元素 **/ ul,ol{list-style:none; } /** 重置文本格式元素 **/ a{text-decoration:none; } /*a:hover {color: ;}*/ a:hover{text-decoration:none; } /*3px问题*/ img{vertical-align:middle;} /** 重置表单元素 **/ legend{color:#000; } /* for ie6 */ fieldset,img{border:0; } /* img 搭车:让链接里的 img 无边框 */ /* 使得表单元素在 ie 下能继承字体大小 */ button,input,select,textarea{font-size:100%; } /* 使得表单元素在 ie 下能继承字体大小 */ /* 注:optgroup 无法扶正 */ /** 重置表格元素 **/ table{border-collapse:collapse; border-spacing:0; } .clear{clear: both;} /*清除浮动*/ /*浮动一*/ .clear{clear: both;} /*浮动二*/ .clear_by_overflow{ overflow: hidden; } /*浮动三*/ .clear_by_after{ content: ""; height: 0; display: block; clear: both; } .left_float{ float: left; } .right_float{ float: right; } /*浮动四*/ .children_left_float:after{ content:""; clear: both; display: block; height: 0; } .children_left_float>p, .children_left_float>ul, .children_left_float>li, .children_left_float>dl, .children_left_float>dt, .children_left_float>dd, .children_left_float>span, .children_left_float>p, .children_left_float>img, .children_left_float>video, .children_left_float>h3, .children_left_float>a{ float: left; } *.js: function showMyCalendar() { var arr = [ "元旦节:1月1日到3日放假3天", "春节:2月2日到8日放假7天", "妇女节:3月8日妇女节", "清明节:4月3日到5日放假3天", "劳动节:4月30日到5月2日放假3天", "端午节:6月4日到6日放假3天", "小暑:7月7日小暑。不放假", "七夕节:8月6日七夕节。不放假", "中秋节:9月10日到12日放假3天", "国庆节:10月1日到7日放假7天", "立冬:11月8日立冬。不放假", "艾滋病日:12月2日
废除奴隶制国际日:12月2日" ]; var dateChnArr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]; var dateEnArr = ["JAN", "FER", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"]; var myCalendar = document.getElementById("myCalendar"); var myUl = myCalendar.getElementsByTagName("ul"); var myDateLi = myUl[0].getElementsByTagName("li"); var myFesLi = myUl[1].getElementsByTagName("li"); var myFesp = myFesLi[0].getElementsByTagName("p"); var myFesSpan = myFesp[0].getElementsByTagName("span"); var str = ""; var roundNum = Math.floor(Math.random() * 11); //动态生成li加入 for(var i = 0; i < 12; i++) { str += "
  • " + dateChnArr[i] + "" + dateEnArr[i] + "

  • "; } myUl[0].innerHTML = str; //刷新时随机一个li,添加current类 //myDateLi[roundNum].style.background = "red"; //随机数,添加样式可以 addClass(myDateLi[0], "current"); //随机数,添加类不可以??????? myFesSpan[0].innerHTML = roundNum + 1; myFesp[1].innerHTML = arr[roundNum]; //鼠标事件,变化内容 for(var i = 0; i < myDateLi.length; i++) { myDateLi[i].index = i; addEvent(myDateLi[i], "mouseover", function() { myFesSpan[0].innerHTML = this.index + 1; myFesp[1].innerHTML = arr[this.index]; for(var i in arr) { if(i * 1 == i) { removeClass(myDateLi[i], "current"); } } addClass(this, "current"); }); } } *common.js //事件函数 function addEvent(obj, type, fn) { if(obj.addEventListener) { return obj.addEventListener(type, fn); } else if(obj.attachEvent) { return obj.attachEvent("on" + type, fn); } } /* 添加、删除类 * */ //判断类是否存在 function hasClass(element, className) { return element.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)')); } //添加类 function addClass(element, className) { if(!hasClass(element, className)) { element.className += " " + className; } } //删除类 function removeClass(element, className) { if(hasClass(element, className)) { element.className = element.className.replace( new RegExp('(\\s|^)' + className + '(\\s|$)'), ' '); } } //返回属性 function changeEleStyle(ele,attr,value){ ele.style[attr]=value; }
    巴扎黑
    巴扎黑

    全部回复(1)
    ringa_lee
    //添加类
    function addClass(element, className) {
        if(!hasClass(element, className)) {
            element.className += " " + className;//这个空格去掉
        }
    }
    
    //删除类
    function removeClass(element, className) {
        if(hasClass(element, className)) {
            element.className = element.className.replace(
                new RegExp('(\\s|^)' + className + '(\\s|$)'), ' '//这里空格);
        }
    }
    
    //添加类
    function addClass(element, className) {
        if (!hasClass(element, className)) {
            element.className += className;
        }
    }
    
    //删除类
    function removeClass(element, className) {
        if (hasClass(element, className)) {
            element.className = element.className.replace(
                new RegExp('(\\s|^)' + className + '(\\s|$)'), '');
        }
    }
    

    事实上你这几个函数都不健壮。找了两个比较全面的给你:

    function addClass(obj, cls) {
        var obj_class = obj.className, //获取 class 内容.
            blank = (obj_class != '') ? ' ' : ''; //判断获取到的 class 是否为空, 如果不为空在前面加个'空格'.
        added = obj_class + blank + cls; //组合原来的 class 和需要添加的 class.
        obj.className = added; //替换原来的 class.
    }
    
    function removeClass(obj, cls) {
        var obj_class = ' ' + obj.className + ' '; //获取 class 内容, 并在首尾各加一个空格. ex) 'abc        bcd' -> ' abc        bcd '
        obj_class = obj_class.replace(/(\s+)/gi, ' '), //将多余的空字符替换成一个空格. ex) ' abc        bcd ' -> ' abc bcd '
            removed = obj_class.replace(' ' + cls + ' ', ' '); //在原来的 class 替换掉首尾加了空格的 class. ex) ' abc bcd ' -> 'bcd '
        removed = removed.replace(/(^\s+)|(\s+$)/g, ''); //去掉首尾空格. ex) 'bcd ' -> 'bcd'
        obj.className = removed; //替换原来的 class.
    }
    
    function hasClass(obj, cls) {
        var obj_class = obj.className, //获取 class 内容.
            obj_class_lst = obj_class.split(/\s+/); //通过split空字符将cls转换成数组.
        x = 0;
        for (x in obj_class_lst) {
            if (obj_class_lst[x] == cls) { //循环数组, 判断是否包含cls
                return true;
            }
        }
        return false;
    }
    热门教程
    更多>
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板
    关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送

    Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号