1.区域模块分解 :
按照空间区域,对复杂的案例效果,分解为几个较简单的模块部分。目的是:更方便的理解案例原理。
2.VCD分解:
view 视觉 HTML+CSS 基本界面模板
controller 控制 Javascript 内容处理、事件处理
Data 数据 data.js 非必须,助于理解
3.onselectstart="return false"
可以直接加在body的行间,用于:如果页面有点选的操作,防止文字被选中。
4.-webkit-font-smoothing: antialiased
css3中用于webkit引擎(如chrome)中设置字体的抗锯齿或者说光滑度的属性。有3个属性:none用于小像素的文本、subpixel-antialiased浏览器默认的、antialiased反锯齿。
5.
把字母统一变成小写toLowerCase()
把字母统一变成大写toUpperCase()
6.
alert里面用\n换行
alert("您好\nhello")
7.localStorage
在客户端存储数据,HTML5 提供了两种在客户端存储数据的新方法:localStorage - 没有时间限制的数据存储,localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。
这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同。
localStorage 与sessionStorage相似。不同之处在于,存储在 localStorage 里面的数据没有过期时间(expiration time),而存储在 sessionStorage 里面的数据会在浏览器会话(browsing session)结束时被清除,即浏览器关闭时。
应该注意的是,无论是 localStorage 还是 sessionStorage 中保存的数据都仅限于该页面的协议。
语法:myStorage=localStorage;
返回值:一个Storage对象
面的代码访问当前域名下的 localStorage对象,并使用Storage.setItem()方法往里面添加一个数据项。
localStorage.setItem('myCat','Tom');
首先在使用localStorage的时候,我们需要判断浏览器是否支持localStorage这个属性:
if(!window.localStorage){
alert("浏览器不支持localstorage");
return false;
}else{
//主逻辑业务
}
//localStorage的写入和读取
if(!window.localStorage){
alert("浏览器不支持localstorage");
return false;
}else{
var storage=window.localStorage;
//localStorage的写入
//写入a字段,方式一
storage["a"]=1;
//写入b字段,方式二
storage.b=2;
//写入c字段,方式三
storage.setItem("c",3);
console.log(typeof storage["a"]);
console.log(typeof storage["b"]);
console.log(typeof storage["c"]);
//localStorage的读取
//第一种方法读取
var a=storage.a;
console.log(a);
//第二种方法读取
var b=storage["b"];
console.log(b);//第三种方法读取
var c=storage.getItem("c");
console.log(c);
}
最后在控制台上面打印出来的结果是:string,刚刚存储进去的是int类型,但是打印出来却是string类型,这个与localStorage本身的特点有关,localStorage只支持string类型的存储。
这里要特别说明一下localStorage的使用也是遵循同源策略的,所以不同的网站直接是不能共用相同的localStorage
这里面是三种对localStorage的读取,其中官方推荐的是getItem\setItem这两种方法对其进行存取。
localStorage的删、改
if(!window.localStorage){
alert("浏览器不支持localstorage");
return false;
}else{
var storage=window.localStorage;
storage["a"]=1;
storage.b=2;
storage.setItem("c",3);
//将a改为4
storage.a=4;
console.log(storage.a);
}
将localStorage的所有内容清除
var storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);
console.log(storage);
storage.clear();
console.log(storage);
将localStorage中的某个键值对删除
var storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);
console.log(storage);
storage.removeItem("a");
console.log(storage.a);
localStorage的键获取,使用key()方法,向其中出入索引即可获取对应的键
var storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);
for(var i=0;i<storage.length;i++){
var key=storage.key(i);
console.log(key);
}
一般我们会将JSON存入localStorage中,但是在localStorage会自动将localStorage转换成为字符串形式,这个时候我们可以使用JSON.stringify()这个方法,来将JSON转换成为JSON字符串.
if(!window.localStorage){
alert("浏览器不支持localstorage");
}else{
var storage=window.localStorage;
var data={
name:'xiecanyong',
sex:'man',
hobby:'program'
};
var d=JSON.stringify(data);
storage.setItem("data",d);
console.log(storage.data);
}
读取之后要将JSON字符串转换成为JSON对象,使用JSON.parse()方法:
var storage=window.localStorage;
var data={
name:'xiecanyong',
sex:'man',
hobby:'program'};
var d=JSON.stringify(data);
storage.setItem("data",d);
//将JSON字符串转换成为JSON对象输出
var json=storage.getItem("data");
var jsonObj=JSON.parse(json);
console.log(typeof jsonObj);
8.HTML标签marquee实现滚动效果
<marquee>要进行滚动的内容</marquee>,可以实现多种滚动效果,无需js控制。
margquee可以移动文字,图片,表格等。
1.滚动方向direction(包括4个值:up、 down、 left和 right)
2.滚动方式behavior(scroll:循环滚动,默认效果; slide:只滚动一次就停止; alternate:来回交替进行滚动)
3.滚动速度scrollamount(滚动速度是设置每次滚动时移动的长度,以像素为单位)
4.滚动延迟scrolldelay(设置滚动的时间间隔,单位是毫秒)
5.滚动循环loop(默认值是-1,滚动会不断的循环下去)
6.滚动范围width、height
7.滚动背景颜色bgcolor
8.空白空间hspace、vspace
<marquee direction="滚动方向" behavior="滚动方式" scrollamount="5" scrolldelay="100" loop="2" width="1000" height="50" bgcolor="#0099FF" hspace="10" vspace="10">··············</marquee>
9.
手机点击浏览网页上的input标签时,会自动弹出软键盘,如何来阻止呢
<input type="text" readonly="readonly"/>