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>

效果图展示：

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

解析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("https://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>

原文地址：

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() 方法则是从字符串的结尾开始检索子串。

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();

    }

web 电子商务网站开发笔记整理的更多相关文章

运维开发笔记整理-URL配置
运维开发笔记整理-URL配置作者:尹正杰版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.URL路由对于高质量的Web应用来说,使用简洁,优雅的URL的路由是一个非常值得重视的细节.Dja ...
运维开发笔记整理-Django模型语法
运维开发笔记整理-Django模型语法作者:尹正杰版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.模型基本概念 1>.什么是模型模型是你的数据唯一的,权威的信息源.它包含你所存储数 ...
运维开发笔记整理-django日志配置
运维开发笔记整理-django日志配置作者:尹正杰版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.Django日志 Django使用python内建的logging模块打印日志,Pytho ...
运维开发笔记整理-基于类的视图（CBV）
运维开发笔记整理-基于类的视图(CBV) 作者:尹正杰版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.FBV与CBV 1>.什么是FBV FBC(function base views ...
运维开发笔记整理-创建django用户
运维开发笔记整理-创建django用户作者:尹正杰版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.创建普通用户 C:\Users\yinzhengjie\softwares\Pycharm ...
运维开发笔记整理-QueryDict对象
运维开发笔记整理-QueryDict对象作者:尹正杰版权声明:原创作品,谢绝转载!否则将追究法律责任. 客户端发送数据请求有很多种,相信运维人员已经很清楚了,如果不太清楚的话可以参考我之前的学习笔 ...
运维开发笔记整理-template的使用
运维开发笔记整理-Django的template的使用作者:尹正杰版权声明:原创作品,谢绝转载!否则将追究法律责任. 在上一篇博客中我们学习了HttpResponse 和JsonResponse方 ...
运维开发笔记整理-JsonResponse对象
运维开发笔记整理-JsonResponse对象作者:尹正杰版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.使用HttpResponse发送json格式的数据 1>.HttpRespo ...
运维开发笔记整理-Request对象与Response对象
运维开发笔记整理-Request对象与HttpResponse对象作者:尹正杰版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.request对象 1>.什么是request 首先,我 ...

随机推荐

Ubuntu下配置Scheme开发环境
MIT-Scheme环境 http://www.gnu.org/software/mit-scheme/ 在官网下载安装包,编译安装即可,期间会提示找不到m4这个库,安装即可 Scheme自带的交互环 ...
CentOS+Nginx一步一步开始配置负载均衡
Nginx负载均衡的理解 http://www.linuxdiyf.com/linux/10205.html Nginx是一个轻量级的.高性能的WebServer,他主要可以干下面两件事: 作为htt ...
[POJ1477]Box of Bricks
Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 19503 Accepted: 7871 Description Litt ...
SQL Server2008 程序设计汇总 GROUP BY，WITH ROLLUP，WITH CUBE，GROUPING SETS(..)
--SQL Server2008 程序设计汇总 GROUP BY ,WITH ROLLUP WITH CUBE GROUPING SET(..) /*********************** ...
Azure 虚拟机常见问题-上
在 Azure 虚拟机上可以运行什么? 所有订户均可在 Azure 虚拟机上运行服务器软件.此外,MSDN 订户还可以访问由 Azure 提供的特定 Windows 客户端映像. 就服务器软件来说,你 ...
冒泡算法（C++模板实现）
冒泡排序从整体上看,冒泡排序是一种稳定排序,即排序完成后,原本序列中的键值相等的元素相对位置不会发生改变.算法的时间复杂度是O(n2),空间复杂度为O(1),即这是一个"就地算法" ...
ios开发 UITableViewController
iOS中显示数据列表最常用的一个控件,支持垂直滚动 UITableView的两种内置样式UITableViewStylePlain UITableViewStyleGrouped 数据源(data ...
SDWebImage 图片加载和缓存
SDWebImage托管在github上.https://github.com/rs/SDWebImage 这个类库提供一个UIImageView类别以支持加载来自网络的远程图片.具有缓存管理.异步下 ...
makeKeyAndVisible的功能
makeKeyAndVisible的作用 [self.window makeKeyAndVisible] 由于iPhone是单窗口程序,所以也就只有这么一个Window对象,而且是UIWindow,不 ...
Moq4在.NET3.5和.NET4版本之间的差异
博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:Moq4在.NET3.5和.NET4版本之间的差异.

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

web 电子商务网站开发笔记整理的更多相关文章

随机推荐

热门专题