月度归档:2016年07月

九九乘法表

//美化样式
document.body.innerHTML = '<style>body{padding:50px;background:#FFFDF4;font-size:18px;}</style>';

//分析乘法表可以知道:每一行的表达式的数值从左往右依次递增 且 第一个数小于等于第二个数字 最大数都是9

//为了确认第二次循环的范围,第一次循环必须先循环乘号右边的数字

//i代表乘号 右边 的数字
for(var i = 1; i < 10; i++){//第一层循环 确认右侧的数字范围


    //j代表乘号 左边 的数字
    for(var j = 1; j <= i; j++){//第二层循环 确认左侧的数字范围

        if(j <= i){//左边的数字 小于或等于 右边的数字时 才输出打印

            if(i*j < 10 && j >= 2){//美化  多添加一个空格 显得工整一点
               
                document.write(j +"×"+ i +" = "+ (i*j) +" &nbsp&nbsp&nbsp&nbsp");

            }else{

                document.write(j +"×"+ i +" = "+ (i*j) +" &nbsp&nbsp&nbsp");
            }

        }

    }

//每执行完一次  第一层循环 换一次行
document.write("<br /><br />");

}

查看demo:九九乘法表
下载源码:下载源码

仿淘宝动画选项卡

$(function() {
        $('.J_title').hover(function() {

          var self    = $(this),//当前标题
              index   = self.index(),//当前标题的索引
              offset  = index * -300,//内容选项卡的偏移量
              cObj    = $('.tab_body .conve-box').eq(index),//当前内容选项卡
              style   = 'left:' + offset + 'px;transition:left 0.2s linear 0s';//动画样式

          self.addClass('cur').siblings().removeClass('cur');//选中标题操作

          cObj.css('visibility', 'visible').siblings().css('visibility', 'hidden');//切换内容选项卡

          $('.tab_body').attr('style', style);//添加动画

          setTimeout(function() {
           
            //重置动画
            if (cObj.css('visibility') == 'visible') {

              $('.tab_body').attr('style', 'left:' + offset + 'px;transition:none');
            }

          },200)

        })
      })

查看demo仿淘宝动画选项卡
下载demo下载源码