关于H5的知识点（HTML+CSS+JS）
2024-05-10 22:44:38
H5的使用
文章目录
- H5的使用
- 标签
- 锚链接：在超链接中通过href="#锚点名"进行的
- H5的新特性：
- 语义化标签
- 选择器
- 1.通配符选择器：
- 2.基本选择器：
- 3.基本选择器的优先级别：ID > CLASS >标签
- 4.群组选择器：
- 5.派生选择器：
- 6.属性选择器：
- 7.锚伪类：
- 8.样式优先级别：
- 9.常用样式：
- div盒子模型
- div的基本属性：
- 2.相对定位：
- 3.绝对定位：
- 4.固定定位：
- 5.浮动：
- css扩展:
- JS核心语法
- 1.基础弹框打印
- 2.变量定义：
- 3.基本数据类型：
- 4.基本数据类型的特殊点：
- 5.流程控制语句：
- 6.数组：
- 7.函数：
- 8.预定义函数：
- DOM操作元数
- 1.查找元素：
- 2.操作内容：
- 3.操作属性：
- 4.操作样式：
- DOM事件
- 1.点击事件：
- 2.网页加载事件：
- 3.键盘事件：
- 4.鼠标事件：
- 5.焦点事件：
- DOM操作节点
- DOM案例
- 1.计算器案例：
- 2.二级联动：
- BOM
- 1.window对象
- 1.1 window.location
- 1.2 window.history
- 1.3 window.open()
- 2.弹出框
- 2.1警告框alert()
- 2.2确认框confirm()
- 2.3提示框prompt()
- 3.定时器
- 3.1延时定时器
- 3.2循环定时器
- 4.cookie
- 4.1 cookie可以做什么？
- 4.2 cookie的缺点
- 4.3 设置cookie
- 4.4设置cookie过期时间
- 4.5获取cookie
- 4.6删除cookie
- 操作示例：
标签
<!---<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="加载失败"/>无序列表：ultype：样式（circle-空心圆 disc-实心圆 square-实心方块）li：项有序列表：oltype：样式（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);//undefinedvar 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"));//字符串转intalert(parseFloat("10.5")+parseFloat("20"));//字符串转floatalert(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();//将大写的内容赋值给valueobj.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>关于H5的知识点（HTML+CSS+JS）相关推荐
- HTML + CSS + JS 10 分钟实现一个吃豆豆小游戏（给女朋友玩）
今天江哥手把手带大家实现一个吃豆豆游戏 关注江哥不迷路,带你编程上高速 知识点 HTML + CSS + JS 实现思路:类似贪吃蛇 游戏玩法,W A S D,控制方向,实现吃豆豆 废话不多说,直接上 ...
- H5+css+js前端特效源代码：发光动画按钮：上传按钮
前端特效:发光动画按钮:上传按钮 H5+CSS+JS 骨架+皮肤+功能 效果展示 源代码: H5部分: <!DOCTYPE html> <html lang="en&quo ...
- w3c h5 + css + js笔记
公司电脑:/Users/yangyangzi/Desktop/YangZi2/2019前端/h5+css+js 「 1. js基础/css基础/html基础 w3school https://www. ...
- Atitit 使用h5技术( html css js)制作桌面程序gui界面解决方案attilax总结
Atitit 使用h5技术( html css js)制作桌面程序gui界面解决方案attilax总结 1.1. 理解Atwood定律 1 1.2. H5做出个html的ui是很方便的,跨平台 2 1 ...
- Atitit 使用h5技术 html css js 制作桌面程序gui界面解决方案attilax总结
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! Atit ...
- 基于html+css+js+jquery的购物页面设计
1.jQuery介绍 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码(框架)于2006年1月由John Resig发布.jQue ...
- 网页设计作业——电影网H5(9页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码
HTML5期末大作业:影视在线网站设计--电影网H5(9页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常见网页设计作业题 ...
- 解惑：如何使用html+css+js实现旋转相册，立方体相册等动画效果
解惑:如何使用html+css+js实现旋转相册,立方体相册等动画效果 一.前言 最初还是在抖音上看到可以使用简单地代码实现炫酷的网页效果的,但是想要找到可以运行的代码还是比较困难的,最近突然想起就在 ...
- html+css+js+jquery之常见的的本地存储实现一个简单的todoList项目
前言 就在几天前,在b站的某博主那里看见了一个面试的模拟,意外看到那个同学有一个todoList的项目 很显然,这个项目就和本次我所要展示的项目代码原理一致,但是界面上我这个就会不太美观. 知识点 本 ...
- HTML网页设计期末课程大作业 ~中国茶文化5页面带轮播(HTML+CSS+JS)~ 学生网页设计作业源码
HTML网页设计期末课程大作业 ~ 中国茶文化5页面带轮播(HTML+CSS+JS)~ 学生网页设计作业源码 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从 ...
最新文章
- Git 修改用户名和邮箱
- ggplot2笔记8：主题设置、存储导出
- Core Data 迁移与版本管理
- qa session of management of technology
- 利用std::allocator实现自定义的vector类
- 网页全文搜索字符和全局搜索文件名【Edge和谷歌浏览器均适用】
- Boost：顺序一致性的测试程序
- ES6基础3（扩展）-学习笔记
- Java虚拟机（JVM）简介
- 网络html代码是什么问题,html代码问题
- [html] 能否做到禁止打印页面？如果可以那要怎么做？
- linux基础知识——创建进程
- android自动登录实现框架,Android如何设计并且实现一个注入框架
- Stone Game, Why are you always there? HDU - 2999（sg定理）
- 简析三星新专利，语音识别技术的新方法
- 计算机用户名SYSTEN,system是什么用户
- spotify电脑下载歌曲_我来简单说一下Apple Music和Spotify的下载方法
- ssh连接docker容器
- r语言平均值显著性检验_R语言：常用统计检验方法（一）数据分析师
- 办公计算机锁屏方法,电脑快速锁屏，办公室神技能，再也不怕别人看我的电脑了！...