H5的使用
标签
<!---<title>网页标题</title>--->
<!---<link rel="shortcut icon" href="img/favicon.ico" type="路径"/>--->网页logo
#<h1>~<h6>
表示从一级标题标签到六级标题标签
#<p>
表示段落标签
#<br/>表示换行标签
#<hr/>表示分隔标签
<!---图片标签：img
src：图片资源
width：宽度（px-像素 %：浏览器的宽度比）
height：高度
alt：图片加载失败后展示的内容
--->
//<img src="图片路径" width="像素/屏幕宽度比例" height="像素/屏幕高度比列" alt="加载失败"/>
无序列表：ul
type：样式（circle-空心圆 disc-实心圆 square-实心方块）
li：项
有序列表：ol
type：样式（1-数字 a-小写字母 A-大写字母 i-小写罗马数字 I-大写罗马数字）
li：项
<ol type="I"> <li>有序1</li> <li>有序2</li> <li>有序3</li> <li>有序4</li> </ol>定义列表：dl
dt：列表标签
dd：列表内容
列表案列 <ul> <li> <h3> 电脑 </h3> <ol> <li>联想</li> <li>华硕</li> <li>戴尔</li> </ol> </li> <li> <h3> 手机 </h3> <ol> <li>华为</li> <li>苹果</li> <li>小米</li> </ol> </li> </ul>超链接标签：a
href：链接地址
target：目标（_self 当前页面 _blank 新增页面）
锚链接：在超链接中通过href="#锚点名"进行的
<!—锚点—>
法制新闻
法制新闻
法制新闻
<h1>国际新闻</h1> <h1>国际新闻</h1> <h1>国际新闻</h1>
娱乐新闻
娱乐新闻
娱乐新闻
table -表格
border=“1” 边框为1
tr-行
th-列(居中加粗)
td-列
rowspan=“2” -占两行
colspan=“2” 占两列
form–表单
H5的新特性：
<form action="#" method="post">
日期选择器：<input type="date"/><br/>
时间选择器：<input type="time"/><br/>
邮箱输入框：<input type="email"/><br/>
数字输入框：<input type="number" value="50" min="10" max="100" step="5"/><br/>
URL输入框： <input type="url" list="url_list"/>
<datalist id="url_list">
<option label="W3School" value="http://www.w3school.com.cn" />
<option label="谷歌" value="http://www.google.com" />
<option label="百度一下" value="http://www.baidu.com" />
</datalist><br/>
<input type="submit" value="提交"/>
</form>
语义化标签
<style type="text/css">
header,nav,article,aside,footer,section{
background-color: #87A442;
text-align: center;
border: black 1px solid;
border-radius:20px;
margin: 10px;
padding: 10px;
}
header{
height: 120px;
}
nav{
height: 50px;
}
article{
width: 40%;
height: 120px;
float: left;
}
aside{
width: 40%;
height: 120px;
float: right;yu
}
footer{
clear: both;
height: 120px;
}
section{
height: 70px;
}
</style>
<header>头部标签 - header</header>
<nav>导航标签 - nav</nav>
<div>
<article>内容标签 - article
<section>块级标签 - section</section>
</article>
<aside>侧边栏标签 - aside</aside>
</div>
<footer> footer</footer>
选择器
1.通配符选择器：
*:通配符选择器
*{
}
2.基本选择器：
-
标签选择器：p{}
-
类选择器：.类名{}
<h1 class="myClass">类选择器</h1> -
id选择器：#id名{} ------注意：项目中的id都是唯一的，不能重复，而类名选择器中类名可以重复
<h2 id="myId"> id选择器 </h2>
3.基本选择器的优先级别：ID > CLASS >标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p{
color: red;
}
.myClass{
color: green;
}
#myId{
color: blue;
}
</style>
</head>
<body>
<p id="myId" class="myClass">段落标签</p>
</body>
</html>
4.群组选择器：
h1,h2,h4{color :red;}
<h1>1</h1>
<h2>2</h2>
<h3>3</h3>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6>
5.派生选择器：
又被称之为：上下文关系选择器
- 后代选择器：ul a{ color: red;}
- 子代选择器：li>a{ color：blue;}
- 相邻兄弟选择器：a+a{color：yellow;}注意：效果作用在后者
<ul>
<li>
<a href="#">超链接1</a>
</li>
<li>
<a href="#">超链接2</a>
</li>
</ul>
<ul>
<li>
<a href="#">超链接3</a>
</li>
<li>
<a href="#">超链接4</a>
</li>
<li>
<a href="#">超链接5</a>
</li>
</ul>
<a href="#">超链接6</a>
<a href="#">超链接7</a>
<a href="#">超链接8</a>
6.属性选择器：
input[type]{color:red;}
input[type] [placeholder]{color: red;}
input[type=‘text’] [name=‘username1’]{color:red;}
<body>
<form action="服务器地址" method="get/post">//method内填获取方法get或者发送方法post
</form>
</body>
7.锚伪类：
作用于：记录各个状态
a:link{color:#FFB6C1;} -----为访问的链接
a:visited{color:#000000;} —已访问的链接
a:hover{color:#00FFFF;}-----鼠标移动到链接上
a:active{color:#B22222;}----选定的链接
8.样式优先级别：
样内样式表 > (内部样式表和外部样式表看加载顺序)
内部样式表:
<style type="text/css">p{color:red;}</style>
外部样式表：
<link rel="stylesheet" type="text/css" href="../css/new_file.css"/>
new_file.css:
p{color:green;}
行内样式表：
<body>
<p style="color:blue;">段落标签</p>
</body>
9.常用样式：
<style type="text/css">
p{
color:white;
font-family:"微软雅黑";
font-size:50px;
font-weight:bolder;/*字体粗细：加粗*/
font-style:italic;/*字体样式：斜体*/
background-color:red;
background-image:url(路径);
letter-spacing:10px;/*字体间隔*/
text-align:center;/*对齐方式*/
border:red 10px solid;/*边框*/
}
a{
text-decoration:none;/*装订线*/
}
</style>
div盒子模型
div的基本属性：
div{
border:1px red solid;
width:200px;
height:200px;
margin:0 auto;/*居中*/
/*设置外边距*/
margin-top:50px;上外边距
margin-left:50px;左外边距
margin-right:50px;右外边距
margin-bottom:50px;下外边距
margin:50px;上下左右外边距
/*设置内边距*/
padding-top:50px;上内边距
padding-left:50px;左内边距
padding-right:50px;右内边距
padding-bottom:50px;下内边距
padding:50px;上下左右内边距
}
2.相对定位：
postion:relative;//相对定位：保留原有位置，针对原有位置进行移动
3.绝对定位：
postion:absolute;
//绝对定位：不保留原有位置，向上找父级标签，查看是否有position的属性，如果没有再向上找，知道找到body标签
4.固定定位：
postion:fixed;//固定定位
top:70%;left:90%;
5.浮动：
float: left;左浮动
float: right;右浮动
css扩展:
<style type="text/css">
#btn{
width:100px;
height:50px;
color:white;
font-weight:bolder;
background-color:orange;
border-radius:10px;边框圆角属性
box-shadow:10px 10px 5px gainsboro;添加按钮阴影 x轴偏移量 y轴偏移量 阴影模糊半径
text-shadow: 5px 5px 5px black;添加文本阴影 x轴偏移量 y轴偏移量 阴影模糊半径
}
body{
background:url(#) center top repeat-x #EAF4FF;
}
</style>
JS核心语法
1.基础弹框打印
<script type="text/javascript">
alert("HelloWorld...1");//弹框
console.log("Helloworld...111");//在控制台中打印数据
</script>
<body>
<script type="text/javascript">
alert("HelloWorld...2");//弹框
console.log("Helloworld...222");//在控制台中打印数据
</script>
</body>
2.变量定义：
var–变量
var v=123;
console.log(v);
v=true;
console.log(v);
v=“abc”;
console.log(v);
3.基本数据类型：
JS的基本数据类型：number、string、boolean、undefined（未定义类x型） 、null
4.基本数据类型的特殊点：
number的特殊点：（Infinity 表示无穷大）
console.log(Infinity+(-Infinity));//NaN:Not a Number
String的特殊点：
Var v1=“12”;
Var v2=“3”;
console.log(v1+v2);//做拼接
console.log(parseInt(v1)+parseInt(v2));//相加
console.log(v1 - v2);//相减
console.log(v1 * v2);
console.log(v1 / v2);
console.log(v1 % v2);
boolean的特殊点：0、" "、undefined、null都表示false
if(null){
console.log("true");
}else{
console.log("false");
}
undefined VS null
var v1;
console.log(typeof v1);//undefined
var v2;
console.log(typeof v2);//object(空对象)
== VS ===
var v1 = 123;
var v2 = "123";
console.log(v1 == v2);//只判断值 ，true
console.log(v1 === v2);//false： 既判断值，又判断类型
5.流程控制语句：
<scrip type="text/javascript">
//1. 求1-100之间的偶数之和
var sum=0;
for(var i=0;i<=100;i++){
if(i%2==0){
sum+=i;
}
}
console.log(sum);
//2.第一个月存3000，每年递增1000，问多少个月后可以存满10万院
var money=3000;
var month=0;
var allMoney=0;
while(allMoney<100000){
month++;
allMoney+=money;
if(month%12==0){
money+=1000;
}
}console.log(month);
//3.打印三角形
for(var i=0;i<5;i++){
for(var j=0;j<=i;j++){
document.write("*");
}document.write("<br/>");
}
</scrip>
6.数组：
<script type="text/javascript">
//数组的声明及初始化
var arr=["榮","沝","桜"];
//设置数据
arr[2]="null";
//添加数据
var[3]="I";
var[10]="Like";
//删除数据
delete arr[2];
//遍历--for循环
for(var i=0;i<arr.length;i++){
console.log(arr[i]);
}
//遍历---for_in(遍历有效下标)
for(var index in arr){
console.log(arr[index]);
}
</script>
7.函数：
<script type="text/javascript">
//函数：特定功能的代码块
//无返回值无参数的方法
function fun01(){
alert("aaa");
} fun01();
//有参数的方法(参数不用些var)
function fun01(a,b){
alert(a+b);
}
fun02("10","20");
//有返回值的方法
function fun03(a,b){
return a+b;
}
var v=fun03("10","20");
alert(v);
</script>
8.预定义函数：
<script type="text/javascript">
alert(parseInt("10")+parseInt("20"));//字符串转int
alert(parseFloat("10.5")+parseFloat("20"));//字符串转float
alert(isNaN("100.5"));//判断该字符串是否是一个非数字
alert(isFinite("10.5"));//判断该字符串是否是一个数字
eval("alert('榮十一在线教学')");//把该字符串认为是一个js代码去执行
</script>
DOM操作元数
1.查找元素：
<p id="p_id01" class="p_class">段落标签1</p>
<p id="p_id02" class="p_class">段落标签2</p>
<input type="text" name="text"/>
<br />
<input type="text" name="text"/>
-
通过id查询的元素-------获取的是对象
<script type="text/javascript"> var pId01=document.getElementById("p_id01"); pId01.onclick=function(){ this.innerText="榮十一在线教学"; } </script> -
通过class查找的元素----获取的是数组
<script type="text/javascript"> var p1=document.getmentsByClassName("p_class")[0]; p1.onclick=function(){ this.innerText="榮十一在线教学"; } </script> -
通过标签查找的元素-----获取的是数组
<script type="text/javascript"> var p2=document.getElementsByTagName("p"); p2.onclick=function(){ this.innerText="榮十一在线教学"; } </script> -
通过name查找的元素-----获取的数组
<script type="text/javascript"> var text01 =document.getElementsByName("text")[0]; text01.onclick=function(){ this.style.color="red"; } </script>
2.操作内容：
<p> 段落标签 </p> <script type="text/javascript"> var p1=document.getElementsByTagName("p")[0]; p1.onclicke=function(){ //获取内容 var text=this.innerText; alert(text); var text01=this.innerHTML; alert(text01); //设置内容 this.innerText="<h1>榮十一在线教学</h1>"; this.innerHTML="<h1>榮十一在线教学</h1>";//认为内容是html代码块 } </script>
3.操作属性：
<img src="../img/HerImg.jpg" width="10%" height="10%"/> <script type="text/javascript"> var img=document.getElementsByTagName("img")[0]; img.onclick=function(){ //获取属性1-----像素 console.log(this.width); console.log(this.height); //获取属性2------百分比 console.log(this.getAttribute("width")); console.log(this.getAttribute("height")); //设置属性1------像素 this.width="200"; this.height="200"; //设置属性2------键值对，百分比 this.setAttribute("width","20%"); this.setAttribute("height","20%"); } </script>
4.操作样式：
<input type="button" value="显示图片" onclick="fun01()"/> <input type="button" value="隐藏图片" onclick="fun02()"/> <br /> <img src="../img/HerImg.jpg" width="10%" height="10%" /> <script type="text/javascript"> var img=document.getElementsByTagName("img")[0]; function fun01(){ //获取样式 console.log(img.style.backgroundColor); //设置样式 img.style.visibility="visible"; } function fun02(){ //设置样式 img.style.visibility="hidden"; } </script>
DOM事件
1.点击事件：
<h1 onclick="this.innerText='沝桜成null'"> 榮十一之星 </h1><h1 onclick="fun01(this)"> 榮十一之星 </h1> <script type="text/javascript"> function fun01(obj){ obj.innerText="沝桜成null"; } </script><input type="button" value="使h1标签改变内容" onclick="fun01()"/> <h1> 沝桜成null </h1> <script type="text/javascript"> function fun01(){ var h1 =document.getElementsByTagName("h1")[0]; h1.innerText="榮十一之星"; } </script><input type="button" value="使用h1标签改变内容"/> <h1> 沝桜成null </h1> <script type="text/javascript"> document.getElementsByTagName("input")[0].onclick=function(){ var h1=document.getElementsByTagName("h1")[0]; h1.innerText="榮十一之星"; } </script>
2.网页加载事件：
onload事件：叫做网页加载事件，等页面的标签和图片资源加载完毕后，才调用的事件
头部内容：
<script type="text/javascript">
window.onload=function(){
document.getElementsByTagName("input")[0].onclick=function(){
var h1=document.getElementsByTagName("h1")[0];
h1.innerText="沝桜成null";
}
}
</script>
<body>
<input type="button" value="使h1标签改变内容"/>
<h1>
榮十一之星
</h1>
</body>
3.键盘事件：
<input type="text" onkeydown="down01()" onkeypress="press01" onkeyup="up01"/>
<script type="text/javascript">
function down01(){
console.log("键盘按下事件");
}
function press01（）{
console.log("键盘持续事件");
}
function up01() {
console.log("键盘松开事件");
}
</script>
案例：
<!--
需求：输入英文内容，把内容变成大写
-->
<input type="text" onkeyup="up01(this)" />
<script type="text/javascript">
function up01(obj){
//获取到value值
var v=obj.value;
//转大写
v=v.toUpperCase();
//将大写的内容赋值给value
obj.value=v;
}
</script>
4.鼠标事件：
<img src="../img/HerImg.jpg" width="40%" onmousedown="down01()" onmouseup="up01()" onmousemove="move01" onmouseover="over01()" onmouseout="out01()" />
<script type="text/javascript">
function down01(){
console.log("鼠标按下事件");
}
function up01(){
console.log("鼠标松开事件");
}
function move01(){
console.log("鼠标移动事件");
}
function over01(){
console.log("鼠标移出事件");
}
</script>
案列：
<style type="text/css">
img{opacity:0.4;}
</style>
<body>
<!--
需求：捉迷藏
-->
<img src="../img/HerImg01.jpg" width="100px" onmouseover="over01(this)" onmouseout="out01(this)" />
<img src="../img/HerImg02.jpg" width="100px" onmouseover="over01(this)" onmouseout="out01(this)" />
<img src="../img/HerImg03.jpg" width="100px" onmouseover="over01(this)" onmouseout="out01(this)" />
<script type="text/javascript">
function over01(obj){
obj.style.opacity=1;//设置透明度：1完全不透明 0 完全透明
}
function out01(obj){
obj.style.pacity=0.4;
}
</script>
</body>
5.焦点事件：
账号：<input type="text" value="请输入账号" onfocus="focus01()" onblur="blur01()" />
<script type="text/javascript">
function focus01(){
console.log("获取焦点事件");
}
function blur01(){
console.log("失去焦点事件");
}
</script>
案例：
账号：<input type="text" value="请输入账号" onfocus="focus01(this)" onblur="blur01(this)" />
<script type="text/javascript">
function focus01(obj){
if(obj.value=="请输入账号"){
obj.value="";
}
}
function blur01(obj){
//obj.value.trim(兼容返回带函数的代码的字符串，不兼容返回underfind)
if(obj.value.trim){//兼容
if(obj.value.trim()==""){
obj.value="请输入账号";
}
}else{//不兼容
if(obj.value.replace(/(^\s+)|(\s+$)/g),"")==""){
obj.value="请输入账号";
}
}
}
</script>
DOM操作节点
<input type="button" value="新增段落标签" onclick="addP()"/> <input type="button" value="新增图片标签" onclick="addImg()"/> <input type="button" value="克隆图片标签" onclick="cloneImg()"/> <input type="button" value="删除图片标签" onclick="deleteImg()"/> <input type="button" value="删除段落标签" onclick="deleteP()" /> <div id="manager"> <p> 段落标签 </p> </div> <script type="text/javascript"> var manager=document.getElementById("manager"); function addP(){ //创建节点 var p=document.createElement("p");//<p></p> //创建内容 var text=document.createTextNode("新增段落标签");//新增段落标签 //将内容添加到p标签中 p.appendChild(text);//<p>新增段落标签</p> //将p标签添加到div标签中 manager.appendChild(p); } function addImg(){ //创建节点 var img=document.createElement("img"); //设置属性 img.setAttribute("width","100px"); img.setAttribute("height","100px"); img.setAttribute("src","../img/HerImg.jpg"); //将br标签添加到div标签中 manager.appendChild(br); } function cloneImg(){ //获取img标签 var img=document.getElementsByTagName("img")[0]; //克隆标签 var newImg=img.cloneNode(true);//true--深入克隆 //将newImg标签添加到div中 manager.appendChild(newImg); //获取br标签 var br=document.getElementsByTagName("br")[0]; //克隆标签 var newBr=br.cloneNode(true);//true--深入克隆 //将newBr标签添加到div标签中 mannager.appendChild(newBr); } function deleteImg(){ var img=document.getElementsByTagName("img")[0]; var br=document.getElementsByTagName("br")[0]; manager.removeChild(img); manager.removeChild(br); } function deleteP(){ var p = document.getElementsByTagName("p")[0]; var br = document.getElementsByTagName("br")[0]; manager.removeChild(p); manager.removeChild(br); } </script>
DOM案例
1.计算器案例：
<input id="num01" type="number"/>
+
<input id="num02" type="number"/>
<input type="button" value="=" onclick="add()"/>
<input id="num03" type="number"/>
<script type="text/javascript">
var num01=document.getElementById("num01");
var num02=document.getElementById("num02");
var num03=document.getElementById("num03");
function add(){
var v1=num01.value;
var v2=num02.value;
var result=parseInt(v1)+parsent(v2);
num03.value=reult;
}
</script>
2.二级联动：
<select id="province">
<option value="sc">四川</option>
<option value="jx">江西</option>
<option value="hn">湖南</option>
<option value="hb">湖北</option>
</select>省
<select id="city">
<option>成都</option>
<option>自贡</option>
<option>雅安</option>
<option>内江</option>
<option>雅安</option>
<option>简阳</option>
</select>市
<script type="text/javascript">
var city=document.getElementById("city");
//onchange---改变
document.getElementById("province").onchange=function(){
if(this.value="sc"){
city.innerHTML="<option>成都</option》<option>自贡</option><option>雅安</option><option>内江</option><option>雅安</option><option>简阳</option>"
}else if(this.value="jx"){
city.innerHTML = "<option>南昌</option><option>赣州</option><option>九江</option><option>新余</option><option>上饶</option><option>景德镇</option>";
}else if(this.value == "hn"){
city.innerHTML = "<option>长沙</option><option>湘潭</option><option>永州</option><option>娄底</option>";
}else if(this.value == "hb"){
city.innerHTML = "<option>武汉</option><option>黄冈</option><option>咸宁</option><option>仙桃</option>";
}
}
</script>
BOM
1.window对象
所有浏览器都支持Window对象。它表示浏览器窗口。
所有JavaScript全局对象、函数以及变量均自动成为window对象的成员
全局变量是window对象的属性
全局函数是window对象的方法
甚至HTML DOM document window
1.1 window.location
Location属性是一个用于存储当前载入页面URL信息的对象。
常常用作页面跳转和页面刷新：
<body>
<input type="button" value="跳转到百度" onclick="fun01()"/>
<input type="button" value="刷新页面" onclick="fun02()"/>
<script type="text/javascript">
function fun01(){
//三种方式都可
// window.location.href = "http://www.baidu.com";
// window.location = "http://www.baidu.com";
location = "http://www.baidu.com";
}
function fun02(){
location.reload();
}
</script>
</body>
1.2 window.history
操作同一个浏览器会话中的已访问页面
常用方法：
back()跳转到上一页
forward()跳转到下一页
go(n)跳转到上n页
go(-n)跳转到下n页
注意：n为0时，go()效果和location.reload()相同为：刷新页面
<body>
<input type="button" value="上两页" onclick="fun01()"/>
<input type="button" value="上一页" onclick="fun02()"/>
<input type="button" value="刷新" onclick="fun03()"/>
<input type="button" value="下一页" onclick="fun04()"/>
<input type="button" value="下两页" onclick="fun05()"/>
<script type="text/javascript">
function fun01(){
window.history.go(-2);
}
function fun02(){
//window.history.go(-1);
history.back();
}
function fun03(){
window.history.go(0);
}
function fun04(){
//window.history.go(1);
history.forward();
}
function fun05(){
window.history.go(2);
}
</script>
</body>
1.3 window.open()
摊开一个新的页面（流氓广告）
<script type="text/javascript">
window.open("http://www.baidu.com")
</script>
2.弹出框
2.1警告框alert()
无返回值，界面直接弹出消息。
2.2确认框confirm()
有返回值，会根据用户点击的按钮(确认or取消)返回一个Boolean值
2.3提示框prompt()
有返回值，提示框中用户能够填写信息，并返回。(如果点击取消，会返回一个null)
<body>
<input type="button" value="警告窗" onclick="fun01()"/>
<input type="button" value="确认窗" onclick="fun02()"/>
<input type="button" value="提示窗" onclick="fun03()"/>
<script type="text/javascript">
function fun01(){
alert("警告框");
}
function fun02(){
console.log(confirm("确认框"))
}
function fun03(){
console.log(prompt("提示框","默认值"))
}
</script>
</body>
3.定时器
3.1延时定时器
过多少毫秒就执行行次函数(只执行一次)
setTimeout语法：var t=setTimeout(“javascript语法”，毫秒)
clearTimeout清楚定时器：clearTimeout(t)
示例：隔三秒，图片自动切换一次
<body>
<input type="button" value="取消定时" onclick="fun01()"/>
<br />
<img src="../img/1.jpg" >
<script type="text/javascript">
var img = document.getElementsByTagName("img")[0];
//定时器:过多少毫秒就执行次函数(只执行一次)
var time = setTimeout(function(){
img.src ="../img/2.png";
},3000);
function fun01(){
clearTimeout(time)
}
</script>
</body>
3.2循环定时器
美国多少毫秒就执行该函数(不限一次)
setInterval()方法可按照指定的周期(以毫米计)来调用函数或计算表达式
setInterval()方法会不停地调用函数，知道clearInterval()被调用或窗口被关闭。由setInterval()返回的ID值可用作clearInterval()方法的参数。
语法：var time =setInterval(“javascript语法”,毫秒)
clearInterval()：清除定时器：clearInterval(time)
示例：循环切换图片
<body> <img src="../img/3.jpg" width="20%"> <input type="button" value="取消切换" onclick="fun01()"/> <script type="text/javascript"> var time01; window.onload = function(){ var img = document.getElementsByTagName("img")[0]; var imgSrcs=["../img/1.jpg","../img/2.png","../img/3.jpg"]; var index = 0; time01 = window.setInterval(function(){ img.src = imgSrcs[index]; index++; if(index==imgSrcs.length){ index=0; } },1000) } function fun01(){ clearInterval(time01); } </script> </body>
示例：时钟
<body>
<h1></h1>
<script type="text/javascript">
var h = document.getElementsByTagName("h1")[0];
function setTime(){
//创建日期对象
var date = new Date();
//获取日期信息
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
var time = hour + ":" + minute + ":" +second;
h.innerText = time;
}
setTime();
setInterval(function(){
setTime();
},1000)
</script>
</body>
4.cookie
cookie是以键值对的形式保存的，即key=value的格式
cookie是存于用户硬盘的一个文件，这个文件通常对应于一个域名，当浏览器再次访问这个域名的时候，即使这个可用。因此可以跨越一个域名下的多个网页，但不能跨越多个域名使用
4.1 cookie可以做什么？
- 保存用户的登录状态
- 定制页面，如换皮肤，选择所在地区等等
- 购物车的实现
- 记录用户的浏览器历史记录
4.2 cookie的缺点
- cookie可能被禁用
- cookie是与浏览器相关的，即使访问同一个页面，不同的浏览器保存的cookie也不能相互访问
- cookie可能被删除，英文cookie实际就是硬盘上的一个文件的安全性不够高，所有的都是以纯文本的形式记录于文件中
4.3 设置cookie
设置cookie内容
每个cookie都是一个名/值对，可以把下面这样一个字符串赋值给document.cookie
document.cookie=“userId=888”;
如果要一次存储多个名/值对，可以使用逗号加空格(;)隔开，例如：
document.cookie=“userId=888”;
document.cookie=“userName=1601”;
如果要改变一个cookie的值，只需要重新赋值，例如：
document.cookie=“userId=999”;
这样就将名为userId的cookie值设置为999.
4.4设置cookie过期时间
到现在为止，所有的cookie都是内存会话cookie，即浏览器关闭后这些cookie将会丢失，事实上这些cookie仅仅是存储在内存中，而没有建立相应的硬盘
在实际开发中，cookie常常想要长期保存，例如保存用户登录的状态。这可以用下面的选项来实现：document…cookie=“userId=828;expires=GMT_String”;
注：群众GMT_String是以GMT格式表示的时间字符串，这条语句就是将userId这个cookie设置为GMT_String表示的过期时间，超过这个时间，cookie将消失，不可访问。
<script type="text/javascript">
function updateCookie(key,value,time){
var date = new Date();
date.setTime(date.getTime()+time)
document.cookie = key + "=" + value + "; expires=" +date.toGMTString();
}
</script>
4.5获取cookie
var strCookie=document.cookie;
浙江获取得以分号隔开的多个名/值对所组成的字符串，这些名/值对包括了该域名下的所有cookie。（想要获取特定的值还需要进一步处理）
<script type="text/javascript">
function queryCookie(key){
var cs = document.cookie.split(";");
for(var index in cs){
var k=cs[index].trim().split("=")[0];
var v=cs[index].trim().split("=")[1];
if(k==key){
return v;
}
}
}
</script>
4.6删除cookie
为了删除一个cookie，可以将其过期时间设定为一个过去的时间（(new Date().getTime()-1或者直接是-1等等)
操作示例：
<body>
<input type="button" value="添加Cookie" onclick="fun01()"/>
<input type="button" value="删除Cookie" onclick="fun02()"/>
<input type="button" value="修改Cookie" onclick="fun03()"/>
<input type="button" value="查询Cookie" onclick="fun04()"/>
<script type="text/javascript">
function fun01(){
updateCookie("username","dengshuo",1000*60*60*60*24*10);
updateCookie("password","1234",1000*60*60*60*24*10);
}
function fun02(){
updateCookie("username","",-1);
updateCookie("password","",-1);
}
function fun03(){
updateCookie("username","dengshuo_ddd",1000*60*60*60*24*10);
updateCookie("password","123456",1000*60*60*60*24*10);
}
function fun04(){
var username = queryCookie("username");
var password = queryCookie("password");
alert(username+"--"+password)
}
function updateCookie(key,value,time){
var date = new Date();
date.setTime(date.getTime()+time)
document.cookie = key + "=" + value + "; expires=" +date.toGMTString();
}
function queryCookie(key){
var cs = document.cookie.split(";");
for(var index in cs){
var k=cs[index].trim().split("=")[0];
var v=cs[index].trim().split("=")[1];
if(k==key){
return v;
}
}
}
</script>
</body>
2246
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
