<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
localStorage.setItem("ExpireTime","1527592757");
localStorage.UserId="2021008";
var expireTime=localStorage.getItem("ExpireTime");
console.log(expireTime);
// localStorage.removeItem("ExpireTime");
// localStorage.clear();
</script>
</html>
.item1 {
background-image: repeating-linear-gradient(
45deg, #8843f8 0%, #ef2f88 5%, #f47340 10%, #f9d371 15%
);
}
.item2 {
background-image: repeating-linear-gradient(
to left top,
#8843f8 0%,
#ef2f88 5%,
#f47340 10%,
#f9d371 15%
);
}
.gradient11 {
background: repeating-radial-gradient(
closest-corner,
#8843f8 0%,
#ef2f88 5%,
#f47340 10%,
#f9d371 15%
);
}
.gradient22 {
background: repeating-radial-gradient(
farthest-side,
#8843f8,
#ef2f88,
#f47340,
#f9d371
);
}
弹性盒子
- flex-direction 子元素排列方向和顺序 横着排还是竖着排 反转还是不反转
- flex-wrap 子元素换行方式
- align-items 控制单行对齐方式 子元素集中在上部、下部、中间还是尽量占满
- align-content 控制多行对齐方式，只有一行则不会起作用
@media语法
针对不同的设备链入不同的外部样式表
表单
- input：email url number(max min step value) range date search color form text radio/checkbox file - - submit
- input属性：autofocus autocomplete placeholder
- 下拉列表：
<select multiple=”multiple”或者size=”number”>
<option selected=”selected”或者value=”initial_value”>
多媒体标签
- audio: src controls autoplay loop preload(none auto metadata)
- video: poster(封面)
选择器
- id选择器(#)>类选择器(.)>标签选择器 后代选择器( ) 群组选择器(,)
- 属性选择器
- 子元素伪类选择器
- UI伪类选择器(元素状态选择,如被选中、可用、只读、有效或无效，input)
背景样式
- background-color
background-image:url("插入url")- background-size
- background-position
background-repeat(repeat repeat-x repeat-y no-repeat)
文本属性
line-height
text-indent
text-align
letter-spacing
text-docuration
white-space
line-break
text-shadow
text-overflow
字体属性
font
font-family
font-size
font-weight
font-style
伪类
:link>:visited>:hover>:active(链接被单击的时刻)
列表样式
list-style
list-style-image
list-style-position
list-style-type
盒子模型
- border: border-width border-style(solid dotted dashed double) border-color border-radius
- padding:上右下左
- margin
- box-shadow
display属性
block(span->div)
inline(div->span)
inline-block(具备块的特性可用css调整,同时还是行内元素)
none(隐藏)
position
inherit(默认)
relative(相对于其原始位置)
absolute(随滚动条)
fixed(不随滚动条)
transform
rotate(deg)
translate()
scale()
transition
transition: 指定属性 持续时间 速度曲线 开始时间
animation
animation: 动画名 完成动画周期 是否重复;
@keyframes 动画名 {
0% {样式属性: 属性值;}
...
100% {样式属性: 属性值;}
}
javascript内置对象
数学对象
日期对象
数组对象:
- arr.slice(start_index,end_index)
- arr.unshift(头部的待添加项)
- arr.shift() //删除首元素
- arr.sort() //从小到大排序
- arr.reverse() //逆序
- arr.join(“”) //字符拼接成字符串
- arr.length()
- arr1.concat(arr2) //拼接两个数组
- arr.includes(element) //判断该数组中是否包含某个元素
- arr.toString()
- arr.indexOf(element)
字符串对象
- string.length
- string.toLowerCase()
- string.charAt(下标值) //指定下标从字符串中返回字符
- string.substring(start_index,end_index)
- string.replace(待替换的（子）字符串，新的（子）字符串)
- string.split(“分隔符”) //指定分隔符将一个字符串分割成子字符串数组
- string.indexOf(字符)
DOM方法
- document.getElementById()
- document.getElementByTagName()
- document.getElementByClassName()
- document.getElementByName()
- document.querySelector()
- document.querySelectorAll()
- document.createElement()
- document.createTextNode()
- document.write()
- document.writeln()
BOM方法
- alert()
- prompt()
- confirm()
- open()
- close()
- print()
事件
- 鼠标事件
onclick onmouseover onmouseout onmousedown onmouseup onmousemove - 键盘事件
onkeydown onkeyup - 表单
onfocus onblur
event对象
属性：type shiftkey ctrlkey altkey
DOM 0&2级事件：
- DOM 0: 直接用onclick方式实现相应事件哎，再HTML标签中直接写或者在js中直接使用document.getE…onclick = …
- DOM 2: 多个事件执行，addEventListener removeEventListener
IMPORTANT
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="item"></div>
</body>
<script>
window.onload = function () {
if (window.XMLHttpRequest) {
var httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) {
var httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
httpRequest.open(
"GET",
"url",
true
);
httpRequest.send();
httpRequest.onreadystatechange = function () {
console.log(httpRequest.readyState);
console.log(httpRequest.status);
if (httpRequest.readyState == 4 && httpRequest.status == 200) {
document.getElementbyId("item").innerHTML = "success";
} else {
document.getElementbyId("item").innerHTML = "fail";
}
};
};
</script>
</html>