zoukankan      html  css  js  c++  java
  • 99乘法表隔行变色

    * {
                margin: 0;
                padding: 0;
            }
    
            span {
                display: inline-block;
                padding: 5px 8px;
            }
            li.bg0{
                background: lightgoldenrodyellow;
            }
            li.bg1{
                background: lightpink;
            }
            li.bg2{
                background: lightcyan;
            }
            li.bg3{
                background: linen;
            }
            li.changeBg{
                background: darkmagenta;
                color: white;
            }
    var oUl = document.createElement("ul");
        var oLi = oUl.getElementsByTagName("li");
        var str = '';
        var oldBg = null;
        for (var i = 1; i <= 9; i++) {
            str += '<li>';
            for (var j = 1; j <= i; j++) {
                str += '<span>' + (j + '*' + i + '=' + j * i) + '</span>';
            }
            str += '</li>';
        }
        oUl.innerHTML=str;
        document.body.appendChild(oUl);
        for(var i=0;i<oLi.length;i++){
            oLi[i].className='bg'+i%4;
            oLi[i].onmouseover=function(){
                oldBg=this.className;
                this.className='changeBg';
            };
            oLi[i].onmouseout=function(){
                this.className=oldBg;
            }
        }
  • 相关阅读:
    URL
    B/S架构
    SQL查询语句
    SQL-Delete语句
    SQL运算符
    SQL结构查询语言
    SQL数据库数据类型详解
    标准文档流
    CSS
    字体样式
  • 原文地址:https://www.cnblogs.com/xuemingyao/p/5757206.html
Copyright © 2011-2022 走看看