帮助了 AmazingCounters.com 位小伙伴

web 电子商务网站开发笔记整理 

js只保留整数，向上取整，四舍五入，向下取整等函数
来源：ab蓝学网整理     时间：2014-07-09    点击：30131
简介:WEB前端|1.丢弃小数部分,保留整数部分parseInt(5/2)2.向上取整,有小数就整数部分加1Math.ceil(5/2)3,四舍五入.Math.round(5/2
1.丢弃小数部分,保留整数部分
parseInt(5/2)
2.向上取整,有小数就整数部分加1
Math.ceil(5/2)
3,四舍五入.
Math.round(5/2)
4,向下取整
Math.floor(5/2)

 

 

 

0 html 表格对角线怎么

实现？有图才有真像！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>用div+css模拟表格对角线</title>
    <style type="text/css">
        *{padding:0;margin:0;}
        caption{font-size:14px;font-weight:bold;}
        table{ border-collapse:collapse;border:1px #525152 solid;width:50%;margin:0 auto;margin-top:100px;}
        th,td{border:1px #525152 solid;text-align:center;font-size:12px;line-height:30px;background:#C6C7C6;}
        th{background:#D6D3D6;}
        /*模拟对角线*/
        .out{
            border-top:162px #D6D3D6 solid;/*上边框宽度等于表格第一行行高*/
            width:0px;/*让容器宽度为0*/
            height:0px;/*让容器高度为0*/
            border-left:140px #BDBABD solid;/*左边框宽度等于表格第一行第一格宽度*/
            position:relative;/*让里面的两个子容器绝对定位*/
        }
        b{font-style:normal;display:block;position:absolute;top:-40px;left:-40px;width:35px;}
        em{font-style:normal;display:block;position:absolute;top:-25px;left:-70px;width:55px;}
        .t1{background:#BDBABD;}
    </style>
</head>
<body>
<table>
    <caption>用div+css模拟表格对角线</caption>
    <tr>
        <th style="width:140px;">
            <div class="out">
                <b>类别</b>
                <em>姓名</em>
            </div>
        </th>
        <th>年级</th>
        <th>班级</th>
        <th>成绩</th>
        <th>班级均分</th>
    </tr>
    <tr>
        <td class="t1">张三</td>
        <td>三</td>
        <td>2</td>
        <td>62</td>
        <td>61</td>
    </tr>
    <tr>
        <td class="t1">李四</td>
        <td>三</td>
        <td>1</td>
        <td>48</td>
        <td>67</td>
    </tr>
    <tr>
        <td class="t1">王五</td>
        <td>三</td>
        <td>5</td>
        <td>79</td>
        <td>63</td>
    </tr>
    <tr>
        <td class="t1">赵六</td>
        <td>三</td>
        <td>4</td>
        <td>89</td>
        <td>66</td>
    </tr>
</table>
</body>
</html>
View Code

效果图展示：

  1. input type="checkbox" 怎么对齐？
  2. 小图标 或者说是雪碧图 怎么取背景图片？
  3. html 三列布局 如何排版更好？
  4. 要用绝对定位，请先使用相对定位？
  5. 用div做背景 怎么设置 背景图片的透明度？
  6. html 文字开头空两格 怎么控制？
  7. 写自己的代码 整理好他们的命名规范 并写好注释，你不是一个人在战斗！

 解析2：

9.如何实现下面这个价格被划掉的效果？

解9：两种标签可以实现

<s class="monery_span">￥3780.0</s>

<style>
.monery_span {
    font-family: "微软雅黑";
    font-size: 16px;
    font-weight: bold;
    color: #D20200;
}

</style>

                               

<del class="sort-cot-list">¥60</del>

<style>
    .sort-cot-list {
    color: #5F5F5F;
}
</style>

 解1 效果图就参考解析2吧！(哎，做数学题习惯了，感觉这个格式像在解方程，嘿嘿。。。)

<style type="text/css">
body{font-size:12px; font-family:Tahoma;}
.checkbox{vertical-align:middle; margin-top:0;}
</style>

<body>
<input class="checkbox" type="checkbox" />复选框
</body>

想了解更多详细可以参考鑫仔(希望博主不要介意这么称呼他，博主的文章每每读之都有收获，表示真心感谢！)的博客：checkbox复选框的一些深入研究与理解

 

解3：效果图如下

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        /*CSS源代码*/

        .wrap {
            overflow: hidden;
            border: 1px solid #ddd;
        }

        .wrap .pannel {
            padding: 10px;
            height: 300px;
            color: #fff;
        }

        .wrap .left {
            float: left;
            width: 170px;
            background-color: #39f;
        }

        .wrap .right {
            float: right;
            width: 220px;
            background-color: #f50;
        }

        .wrap .center {
            margin: 0 250px 0 200px;
            background-color: #ccc;
        }

    </style>
</head>
<body>
<!-- HTML代码片段中请勿添加<body>标签 //-->

<div class="wrap">
    <div class="pannel left">Left</div>
    <div class="pannel right">Right</div>
    <div class="pannel center">Center</div>
</div>
</body>
</html>

可以参考：http://www.seejs.com/%e5%89%8d%e7%ab%af%e5%85%a5%e9%97%a8

 

10.关于图文排版，一张图片和一行文字怎么一行显示的问题？

 

11. 返回顶部效果的实现，先看效果图

复制代码 代码如下:
<a id="go2top" class="go2top" href="#header"><span class="go2top-inner"></span></a>
<script type="text/javascript">
$(function(){
    $('#go2top').click(function(){
        $("html,body").animate({scrollTop:0},200);
        return false;
    });
    $(window).scroll(function(){
        var obj=$('#go2top');
        if(obj.offset().top>900){
            obj.show();
        }else{
            obj.hide();
        }
    });
});
</script>
CSS定义
复制代码 代码如下:
.go2top {
    background: url("//images0.cnblogs.com/blog/84698/201303/28125209-67653841b1114531a2a1e6db63315d63.png") no-repeat scroll left top transparent;
    bottom: 65px;
    color: #444444;
    display: none;
    height: 50px;
    margin-left: 510px;
    position: fixed;
    right: 160px;
    text-align: center;
    width: 50px;
}
.go2top:hover {
    background-position: -50px top;
}
试试看，是不是有了返回顶部了，非常方便实用的功能，希望大家能够喜欢。

原文地址出处：使用jQuery实现返回顶部()

 

12.Jquery实现购物车物品数量的加减特效2016-01-28

$(function () {
    //获得文本框对象
    var t = $("#text_box");
    //数量增加操作
    $("#add").click(function () {
        if (parseInt(t.val()) < 99) {
            t.val(parseInt(t.val()) + 1);
            // $('#add').attr('disabled',true);
        }
    });
    //数量减少操作
    $("#min").click(function () {
        if (parseInt(t.val()) > 1) {
            // $('#min').attr('disabled',true);
            t.val(parseInt(t.val()) - 1);
        }
    });

});
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery实现购物车物品数量的加减</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$(function(){
    var t = $("#text_box");
    $("#add").click(function(){        
        t.val(parseInt(t.val())+1)
        setTotal();
    })
    $("#min").click(function(){
        t.val(parseInt(t.val())-1)
        setTotal();
    })
    function setTotal(){
        $("#total").html((parseInt(t.val())*3.95).toFixed(2));
    }
    setTotal();
})
</script>
</head>
<body>
<p>单价：3.95</p>
<input id="min" name="" type="button" value="-" />
<input id="text_box" name="" type="text" value="4" />
<input id="add" name="" type="button" value="+" />
<p>总价：<label id="total"></label></p>
</body>
</html>
View Code

原文地址：

no1，jQuery实现购物车物品数量的加减

 

no3,jquery禁用a标签,jquery禁用按钮click点击()

 

13.文字溢出隐藏与超长标题自动省略号

 

14:日期空件 http://www.jq22.com/jquery-info5596

 

15.JS判断字符串包含的方法

1. 例子：

var tempStr = "tempText" ;
var bool = tempStr.indexOf("Texxt");
//返回大于等于0的整数值，若不包含"Text"则返回"-1。
if(bool>0){
document.write("包含字符串");
}else{
document.write("不包含字符串");
}
2. indexOf用法：
1
strObj.indexOf(subString[, startIndex])
JavaScript中indexOf函数方法返回一个整数值，指出 String 对象内子字符串的开始位置。如果没有找到子字符串， 则返回 -1。如果 startindex 是负数，则 startindex 被当作零。如果它比最大的字符位置索引还大，则它被当作最大的可能索引。
参数：
strObj ： 必选项，String 对象或文字。 
subString ：必选项，要在 String 对象中查找的子字符串。 
starIndex ：可选项，该整数值指出在 String 对象内开始查找的索引。如果省略，则从字符串的开始处查找；
如果 startindex 是负数，则 startindex 被当作零。如果它比最大的字符位置索引还大，则它被当作最大的可能索引。
3. 与lastIndexOf的区别：
lastIndexOf() 方法则是从字符串的结尾开始检索子串。
View Code

 

16.如何让JS函数只执行一次？

var flag = "true";
function onlyOne() {
    if(flag) {
        "这里是要执行的代码";
    }
    flag = "false";
}

 

 17.优化if  else多层嵌套

//method1
     if (color) {
         if (color === 'black') {
             printBlackBackground();
         } else if (color === 'red') {
             printRedBackground();
         } else if (color === 'blue') {
             printBlueBackground();
         } else if (color === 'green') {
             printGreenBackground();
         } else {
             printYellowBackground();
         }
     }
     
 //method2
     switch(color) {
         case 'black':
             printBlackBackground();
             break;
         case 'red':
             printRedBackground();
             break;
         case 'blue':
             printBlueBackground();
             break;
         case 'green':
             printGreenBackground();
             break;
         default:
             printYellowBackground();
     }
     
 //method3
     switch(true) {
         case (typeof color === 'string' && color === 'black'):
             printBlackBackground();
             break;
         case (typeof color === 'string' && color === 'red'):
             printRedBackground();
             break;
         case (typeof color === 'string' && color === 'blue'):
             printBlueBackground();
             break;
         case (typeof color === 'string' && color === 'green'):
             printGreenBackground();
             break;
         case (typeof color === 'string' && color === 'yellow'):
             printYellowBackground();
             break;
     }
     
 //method4
     var colorObj = {
         'black': printBlackBackground,
         'red': printRedBackground,
         'blue': printBlueBackground,
         'green': printGreenBackground,
         'yellow': printYellowBackground
     };
     if (color in colorObj) {
       colorObj[color]();
     }

 18:导航栏 添加斜线怎么弄呢？

<!-- 导航栏begin -->
    <div class="header_right fr">
    <a href="#" class="link">Home</a>
    <a href="#" class="link">About</a>
    <a href="#" class="link">Features</a>
    <a href="#" class="link">Blog</a>
    <a href="#" class="link">Shop</a>
    <div class="alarm fr">
    <img src="./images/alarm.png" alt="alarm" /></images><i class="alarm_number">2</i>
    </div>
    </div>
 <!-- 导航栏end -->
.link:before{content: "/";margin:0 24px;color: grey;}
.link:first-child:before{display:none;}

 

 

 

ul {
  list-style: none;
  display: flex;
  overflow: hidden;
}

li {
  display: flex;
  align-items: center;
  width: 100px;
  height: 30px;
  background-color: #f1f5f9;
}

li:not(:first-child):before {
  content: '';
  display: block;
  transform: skew(-10deg);
  height: 100%;
  width: 10px;
  background: #000;
  box-shadow: -2px 0 3px rgba(0, 0, 0, .5);
  margin-left: -5px;
}

li:nth-child(2),
li:nth-child(2):before {
  background: red;
}

li:nth-child(3),
li:nth-child(3):before {
  background: green;
}

li:nth-child(4),
li:nth-child(4):before {
  background: yellow;
}







<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

 

 demo下载地址：http://download.csdn.net/download/u012922417/10202878

 

 

完整demo展示

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <style>
        .header_right{width:1200px;background: #050506;color: #ffffff;height: 50px;line-height: 50px;margin: 0 auto;}
        .fr a{color: #ffffff;display: block;float: left;}
        a{
            text-decoration:none;
        }
        或者把这个属性分别加到a标签下，
        a:link{
            text-decoration:none;
        }
        a:visited{
            text-decoration:none;
        }
        a:hover{
            text-decoration:none;
        }
        a:active{
            text-decoration:none;
        }
        .link:before{content: "/";margin:0 24px;color: grey;}
        .link:first-child:before{display:none;}
    </style>
</head>
<body>
<!-- 导航栏begin -->
<div class="header_right fr">
    <a href="#" class="link">Home</a>
    <a href="#" class="link">About</a>
    <a href="#" class="link">Features</a>
    <a href="#" class="link">Blog</a>
    <a href="#" class="link">Shop</a>
    <div class="alarm fr">
        <img src="./images/alarm.png" alt="alarm" /></images><i class="alarm_number">2</i>
    </div>
</div>
<!-- 导航栏end -->
</body>
</html>

参考地址：http://www.cnblogs.com/wzls/p/5259801.html

 

 

19.在html中控制自动换行

其实只要在表格控制中添加一句
<td style="word-break:break-all">就搞定了。
其中可能对英文换行可能会分开一个单词问题：解决如下：
语法： 
word-break : normal | break-all | keep-all 
参数： 

normal : 　依照亚洲语言和非亚洲语言的文本规则，允许在字内换行 
break-all : 　该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本 
keep-all : 　与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本 
<br>是软回车，就是换行后还是紧接着上一行，没有</br> 
<p>是段落标签，由于例如居中、缩进等标签都是以段落为单位的，所以它可比<br>有更多作用，但每次换行都会多空一行，有</p> 

除此之外，例如表格、表单、水平线等都是强制换行，就是紧接着的标签前无论有没有换行标签，都强制换行。
<html>
<head>
<title></title>
<meta content='text/html; charset=gb2312' http-equiv='Content-Type'>
</head>
<body bgcolor=#f5f5ff>
<pre>
<font size=2 face=宋体>
<table width="100%"　border="0" cellspacing="0" cellpadding="0" style="TABLE-LAYOUT: fixed; WORD-BREAK: break-all">
<tr>
<td style="WORD-BREAK: break-all; WORD-WRAP: break-word">
文本正文
</td>
</tr>
</table>
</pre>
</FONT>
</body>
</html>

 20各位大神，怎么让背景自适应屏幕大小：这个问题比较容易遇到，不过每次处理了没有记录现在补充一下

background-size:cover;// 背景图片覆盖模式加载 lz比较常用

background-size:60px 60px //图片大小设置 一些特定的图片大小通过这个参数设置

 可以参考这个：http://www.w3school.com.cn/tiy/c.asp?f=css_background-size&p=8

/*
**js把毫秒转换为 xx小时xx分钟xx秒的通用方法
*msd为一个毫秒数参数
 */
function MillisecondToDate(msd) {
    var s = parseFloat(msd) /1000;//s
    var ss=s%60;//得到秒数
    var mm=Math.floor(s/60);//得到分钟数
//组装为20:30格式
    return (mm<10?"0"+mm:mm) +":"+ (ss<10?"0"+ss:ss);

}

 2016-04-27

 

<div id="mydiv"> 
<li><a href="#" onclick="loadMyClass('2016',1)">2016学年下学期</a></li><!-- 移除了-->

 <li><a href="#" onclick="loadMyClass('2016',1)">2016学年上学期</a></li>
 <li><a href="#" onclick="loadMyClass('2015',2)">2015学年下学期</a></li> 
<li><a href="#" onclick="loadMyClass('2016',1)">2016学年上学期</a></li><!-- 移除了-->





</div>


if(semesterArr[0].endType==1){//去掉首部
        $("#mydiv li").eq(0).remove();
     }
    if(semesterArr[0].startType==2){//去掉尾部
        $("#mydiv li").last().remove();
    }




 







        

            posted on 
2016-01-21 15:36 
云的旋律 
阅读(713) 
评论(1) 
编辑 
收藏 
举报

        

    











    
    

    
    

    

        

    

        

            
                
                
            
        

    

    

    

    





	






	
		
		

导航




		

		

		

                    
	


			
			
			
			
			 

	



    

        前端攻城狮分享群