附加别人的博客: https://www.cnblogs.com/kyles/p/5239182.html
还有一个很实用的网站: https://developer.mozilla.org/zh-CN/
取消 input focus 的默认边框 outline: none;
给 Ul 加上 white-space:nowrap; 可以使其不换行
滚动条: overflow-x: scroll overflow-y: scroll 前提是长宽固定
setTimeout() 的用法
- var timeId= setTimeout(function,2000);
- clearTimeout(timeId);
获取数组元素索引
- var arr=[1,2,3,4]
- arr.indexOf(2);// 返回 1
- 命名规范
index.CSS: 一般用于首页建立样式
head.CSS: 头部样式, 当多个页面头部设计风格相同时使用.
base.CSS: 共用样式.
style.CSS: 独立页面所使用的样式文件.
global.CSS: 页面样式基础, 全局公用样式, 页面中必须包含.
layout.CSS: 布局, 版面样式, 公用类型较多时使用, 一般用在首页级页面和产品类页面中
module.CSS: 模块, 用于产品类页, 也可与其它样式配合使用.
master.CSS: 主要的样式表
columns.CSS: 专栏样式
themes.CSS: 主体样式
forms.CSS: 表单样式
mend.CSS: 补丁, 基于以上样式进行的私有化修补.
View Code
页面结构命名:
page: 代表整个页面, 用于最外层.
wrap: 外套, 将所有元素包在一起的一个外围包, 用于最外层
wrapper: 页面外围控制整体布局宽度, 用于最外层
container: 一个整体容器, 用于最外层
head,header: 页头区域, 用于头部
nav: 导航条
content: 内容, 网站中最重要的内容区域, 用于网页中部主体
main: 网站中的主要区域 (表示最重要的一块位置), 用于中部主体内容
column: 栏目
sidebar: 侧栏
foot,footer: 页尾, 页脚. 网站一些附加信息放置区域,(或命名为 copyright) 用于底部
View Code
导航命名:
nav, navbar, navigation, nav-wrapper: 导航条或导航包, 代表横向导航
topnav: 顶部导航
mainbav: 主导航
subnav: 子导航
sidebar: 边导航
leftsidebar 或 sidebar_a: 左导航
rightsidebar 或 sidebar_b: 右导航
title: 标题
summary: 摘要
menu: 菜单, 区域包含一般的链接和菜单
submenu: 子菜单
drop: 下拉
dorpmenu: 下拉菜单
links: 链接菜单
View Code
功能命名:
logo: 标记网站 logo 标志
banner: 标语, 广告条, 顶部广告条
login: 登陆,(例如登录表单: form-login)
loginbar: 登录条
register: 注册
tool, toolbar: 工具条
search: 搜索
searchbar: 搜索条
searchlnput: 搜索输入框
shop: 功能区, 表示现在的
icon: 小图标
label: 商标
homepage: 首页
subpage: 二级页面子页面
hot: 热门热点
list: 文章列表,(例如: 新闻列表: list-news)
scroll: 滚动
tab: 标签
sitemap: 网站地图
msg 或 message: 提示信息
current: 当前的
joinus: 加入
status: 状态
btn: 按钮,(例如: 搜索按钮可写成: btn-search)
tips: 小技巧
note: 注释
guild: 指南
arr, arrow: 标记箭头
service: 服务
breadcrumb:(即页面所处位置导航提示)
download: 下载
vote: 投票
siteinfo: 网站信息
partner: 合作伙伴
link, friendlink: 友情链接
copyright: 版权信息
siteinfoCredits: 信誉
siteinfoLegal: 法律信息
View Code
也可以参考: http://nec.netease.com/ (网易 NEC, 作为基础不错)
功能性
- 数字转大写
- var chnNumChar = ["零", "一", "二", "三", "四", "五", "六", "七", "八", "九"];
- var chnUnitSection = [""," 万 "," 亿 "," 万亿 "," 亿亿 "];
- var chnUnitChar = [""," 十 "," 百 "," 千 "];
- var numToChn = function (num) {
- var index = num.toString().indexOf(".");
- if (index != -1) {
- var str = num.toString().slice(index);
- var a = "点";
- for (var i = 1; i <str.length; i++) {
- a += chnNumChar[parseInt(str[i])];
- }
- return a;
- } else {
- return;
- }
- }
- function sectionToChinese(section) {
- var str = '', chnstr ='', zero = false, count = 0; //zero 为是否进行补零, 第一次进行取余由于为个位数, 默认不补零
- while (section> 0) {
- var v = section % 10; // 对数字取余 10, 得到的数即为个位数
- if (v == 0) { // 如果数字为零, 则对字符串进行补零
- if (zero) {
- zero = false; // 如果遇到连续多次取余都是 0, 那么只需补一个零即可
- chnstr = chnNumChar[v] + chnstr;
- }
- } else {
- zero = true; // 第一次取余之后, 如果再次取余为零, 则需要补零
- str = chnNumChar[v];
- str += chnUnitChar[count];
- chnstr = str + chnstr;
- }
- count++;
- section = Math.floor(section / 10);
- }
- return chnstr;
- }
- function TransformToChinese(num) {
- var a = numToChn(num);
- num = Math.floor(num);
- var unitPos = 0;
- var strIns = '', chnStr ='';
- var needZero = false;
- if (num === 0) {
- return chnNumChar[0];
- }
- while (num> 0) {
- var section = num % 10000;
- if (needZero) {
- chnStr = chnNumChar[0] + chnStr;
- }
- strIns = sectionToChinese(section);
- strIns += (section !== 0) ? chnUnitSection[unitPos] : chnUnitSection[0];
- chnStr = strIns + chnStr;
- needZero = (section <1000) && (section> 0);
- num = Math.floor(num / 10000);
- unitPos++;
- }
- if (a == null) {
- a = "";
- }
- // var result =
- return chnStr + a;
- }
- View Code
- 手动抛出异常
throw new Error(erroMsg);
- 字符串替换 (C#format 同样功能)
- String.prototype.format = function (args) {
- if (arguments.length> 0) {
- var result = this;
- if (arguments.length == 1 && _typeof(args) == "object") {
- for (var key in args) {
- var reg = new RegExp("({" + key + "})", "g");
- result = result.replace(reg, args[key]);
- }
- } else {
- for (var i = 0; i <arguments.length; i++) {
- if (arguments[i] == undefined) {
- return "";
- } else {
- var reg = new RegExp("({[" + i + "]})", "g");
- result = result.replace(reg, arguments[i]);
- }
- }
- }
- return result;
- } else {
- return this;
- }
- };
- View Code
- 日期格式化
- Date.prototype.format = function (format) {
- var o = {
- "M+": this.getMonth() + 1,
- //month
- "d+": this.getDate(),
- //day
- "h+": this.getHours(),
- //hour
- "m+": this.getMinutes(),
- //minute
- "s+": this.getSeconds(),
- //second
- "q+": Math.floor((this.getMonth() + 3) / 3),
- //quarter
- "S": this.getMilliseconds() //millisecond
- };
- if (/(y+)/.test(format)) format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
- for (var k in o) {
- if (new RegExp("(" + k + ")").test(format)) format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
- }
- return format;
- };
- View Code
- 获取当前日期
- function getyyyyMMdd() {
- var d = new Date();
- var curr_date = d.getDate();
- var curr_month = d.getMonth() + 1;
- var curr_year = d.getFullYear();
- String(curr_month).length < 2 ? curr_month = "0" + curr_month : curr_month;
- String(curr_date).length < 2 ? curr_date = "0" + curr_date : curr_date;
- var yyyyMMdd = curr_year + "/" + curr_month + "/" + curr_date;
- return yyyyMMdd;
- }
- View Code
- 截断字符串
- function cutString(str, len) {
- //length 属性读出来的汉字长度为 1
- if (str.length * 2 <= len) {
- return str;
- }
- var strlen = 0;
- var s = "";
- for (var i = 0; i < str.length; i++) {
- s = s + str.charAt(i);
- if (str.charCodeAt(i)> 128) {
- strlen = strlen + 2;
- if (strlen>= len) {
- return s.substring(0, s.length - 1) + "...";
- }
- } else {
- strlen = strlen + 1;
- if (strlen>= len) {
- return s.substring(0, s.length - 2) + "...";
- }
- }
- }
- return s;
- }
- View Code
- 获取 url 参数值
- function getPar(par) {
- // 获取当前 URL
- var local_url = document.location.href; // 获取要取得的 get 参数位置
- var get = local_url.indexOf(par + "=");
- if (get == -1) {
- return false;
- }
- // 截取字符串
- var get_par = local_url.slice(par.length + get + 1); // 判断截取后的字符串是否还有其他 get 参数
- var nextPar = get_par.indexOf("&");
- if (nextPar != -1) {
- get_par = get_par.slice(0, nextPar);
- }
- return get_par;
- }
- View Code
来源: http://www.bubuko.com/infodetail-3068840.html