Skip to content

zhangtingyan / my-project

Go to a project
Commit 11324a7b by zhangtingyan
Options

文件复制

1 parent 59d2495d
Expand all
Inline Side-by-side
Showing 51 changed files with 2082 additions and 0 deletions
&&.html 0 → 100644
<html>
<head>
</head>
<body>
<script>
var obj1 = {a:1};
var obj2 = {a:2};
var num = 1;
var num2 = 2;
//两个操作数都是对象，返回第二个操作数
var res= obj1 && obj2
console.log("oo",!!res,res)
//第一个操作数是对象,返回第二个操作数
res= obj1 && num
console.log("on",!!res,res)
//第二个操作数是对象,第一个操作数为true时返回该对象
res= num && obj1
console.log("no",!!res,res)
res= num && num2
console.log("nn2",!!res,res)//2
res= num2 && num
console.log("n2n",!!res,res)//1
//第一个操作数为true,返回第二个
//第一个操作数为false,返回第一个
//一个操作数为null,返回null
//一个操作数为NaN,返回NaN
//一个操作数为undefined,返回undefined
res = obj1 && null
console.log("nu",!!res,res)
</script>
</body>
</html>
\ No newline at end of file
3d照片墙.html 0 → 100644
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css3_demo</title>
<style>
.container {
width: 100%;
}
.demo-perspective-photo {
position: absolute;
width: 100%;
height: 200px;
top: 15%;
background-color: #fff;
zoom: 2;
}
.demo-perspective-photo #stage {
width: 100%;
height: 200px;
-webkit-perspective: 800px;
-moz-perspective: 800px;
perspective: 800px;
-webkit-transition: top 0.5s;
-moz-transition: top 0.5s;
transition: top 0.5s;
position: relative;
}
.demo-perspective-photo #container {
position: absolute;
width: 64px;
height: 36px;
left: 50%;
top: 50%;
margin-left: -32px;
margin-top: -18px;
cursor: pointer;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-animation: photoRotate 18s ease-in-out infinite 2s;
animation: photoRotate 18s ease-in-out infinite 2s;
}
.demo-perspective-photo .piece {
width: 128px;
height:86px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
-webkit-transition: opacity 1s, -webkit-transform 1s;
-moz-transition: opacity 1s, -moz-transform 1s;
transition: opacity 1s, transform 1s;
position: absolute;
bottom: 0;
}
@-webkit-keyframes photoRotate {
0% {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
16.7% {
-webkit-transform: rotateY(60deg);
transform: rotateY(60deg);
}
33.3% {
-webkit-transform: rotateY(120deg);
transform: rotateY(120deg);
}
50% {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
66.7% {
-webkit-transform: rotateY(240deg);
transform: rotateY(240deg);
}
83.3% {
-webkit-transform: rotateY(300deg);
transform: rotateY(300deg);
}
100% {
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
}
}
@keyframes photoRotate {
0% {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
16.7% {
-webkit-transform: rotateY(60deg);
transform: rotateY(60deg);
}
33.3% {
-webkit-transform: rotateY(120deg);
transform: rotateY(120deg);
}
50% {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
66.7% {
-webkit-transform: rotateY(240deg);
transform: rotateY(240deg);
}
83.3% {
-webkit-transform: rotateY(300deg);
transform: rotateY(300deg);
}
100% {
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
}
}
</style>
</head>
<body>
<div class="container">
<!-- 3d照片墙 -->
<div class="demo-perspective-photo">
<div id="stage">
<div id="container">
<!-- 此处可上传自己的图片 -->
<img src="./a_src/img/1.jpg" class='piece' style="-webkit-transform: rotateY(0deg) translateZ(196px);">
<img src="./a_src/img/2.jpg" class='piece' style="-webkit-transform: rotateY(60deg) translateZ(196px);">
<img src="./a_src/img/3.jpg" class='piece' style="-webkit-transform: rotateY(120deg) translateZ(196px);">
<img src="./a_src/img/4.jpg" class='piece' style="-webkit-transform: rotateY(180deg) translateZ(196px);">
<img src="./a_src/img/5.jpg" class='piece' style="-webkit-transform: rotateY(240deg) translateZ(196px);">
<img src="./a_src/img/6.jpg" class='piece' style="-webkit-transform: rotateY(300deg) translateZ(196px);">
</div>
</div>
</div>
</div>
</html>
RetroSnaker @ 425a775b
Subproject commit 425a775b408d7630395dd8b98cd6d96c4b466cf2
argument.html 0 → 100644
<html>
<head>
</head>
<body>
<div style="display:none">
<script>
function add1(a){
var sum = a;
var addMore = function addMore(b){
sum+=b
return addMore;
}
addMore.toString = function(){
return sum
}
return addMore
}
function add2 () {
console.log('进入add');
var args = Array.prototype.slice.call(arguments);
console.log('args',args);
var fn = function () {
var arg_fn = Array.prototype.slice.call(arguments);
console.log('调用fn');
return add.apply(null, args.concat(arg_fn));
}
fn.valueOf = function () {
console.log('调用valueOf');
return args.reduce(function(a, b) {
return a + b;
})
}
return fn;
}
function add (...a) {
console.log('进入add');
var fn = function (...b) {
return add.apply(null, [...a,...b]);
}
fn.valueOf = function () {
console.log('调用valueOf');
return a.reduce(function(z, x) {
return z + x;
})
}
return fn;
}
console.log(add(1,2,3)(2)(3).valueOf()) // 3
</script>
</div>
</body>
</html>
\ No newline at end of file
boomJS @ 9c6eaa89
Subproject commit 9c6eaa89f4fccabdf29b52fa024226f8f0442f74
css3- @ c5b2f0f3
Subproject commit c5b2f0f3468f569c7ce6eea2c1d335a919a69d29
display.html 0 → 100644
<html>
<head>
</head>
<body>
<div style="position:relative;">
<div id = "002" style="display: flex"><div style="z-index:10;width:100px ;height:50px;background:blue;">z-index</div></div>
<div id = "001"><img src="./jquery/img/1.jpg" style="width:100px ;height:50px;background:red; position:absolute;top:20px"/></div>
</div>
<script>
var activityPrice = 123;
var a = (activityPrice%100-activityPrice%10)/10;
var b = activityPrice%10;
console.log("a",a)
console.log("b",b)
</script>
</div>
</body>
</html>
\ No newline at end of file
echart/china.html 0 → 100644
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=EDGE">
<title>ECharts</title>
<!--<link rel="stylesheet" type="text/css" href="css/main.css"/>-->
<script src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<style>#china-map {width:1000px; height: 1000px;margin: auto;}</style>
</head>
<body>
<div id="china-map"></div>
<script>
function randomData() {
return Math.round(Math.random()*500);
};
var mydata = [
{name: '北京',value: randomData() },{name: '天津',value: randomData() },
{name: '上海',value: randomData() },{name: '重庆',value: randomData() },
{name: '河北',value: randomData() },{name: '河南',value: randomData() },
{name: '云南',value: randomData() },{name: '辽宁',value: randomData() },
{name: '黑龙江',value: randomData() },{name: '湖南',value: randomData() },
{name: '安徽',value: randomData() },{name: '山东',value: randomData() },
{name: '新疆',value: randomData() },{name: '江苏',value: randomData() },
{name: '浙江',value: randomData() },{name: '江西',value: randomData() },
{name: '湖北',value: randomData() },{name: '广西',value: randomData() },
{name: '甘肃',value: randomData() },{name: '山西',value: randomData() },
{name: '内蒙古',value: randomData() },{name: '陕西',value: randomData() },
{name: '吉林',value: randomData() },{name: '福建',value: randomData() },
{name: '贵州',value: randomData() },{name: '广东',value: randomData() },
{name: '青海',value: randomData() },{name: '西藏',value: randomData() },
{name: '四川',value: randomData() },{name: '宁夏',value: randomData() },
{name: '海南',value: randomData() },{name: '台湾',value: randomData() },
{name: '香港',value: randomData() },{name: '澳门',value: randomData() }
];
var option = {
backgroundColor: '#FFFFFF',
title: {
text: '全国地图',
subtext: '纯属虚构',
x:'center'
},
tooltip : {
trigger: 'item'
},
visualMap: {
show : false,
x: 'left',
y: 'bottom',
splitList: [
{start: 500, end:600},{start: 400, end: 500},
{start: 300, end: 400},{start: 200, end: 300},
{start: 100, end: 200},{start: 0, end: 100},
],
color: ['#66CC33', '#00FF00', '#66FF33','#339900', '#33CC00', '#00CC00']
},
series: [{
name: '随机数据',
type: 'map',
mapType: 'china',
roam: true,
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
data:mydata
}]
};
var myChart = echarts.init(document.getElementById('china-map'));
myChart.setOption(option);
</script>
</body>
</html>
\ No newline at end of file
echart/demo.html 0 → 100644
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Echarts</title>
</head>
<body>
<div id="main" style="height:400px"></div>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
//路径配置
require.config({
paths:{
echarts:"http://echarts.baidu.com/build/dist"
}
});
//使用
require(
[
'echarts',
'echarts/chart/line'//按需加载模块
],
function(ec){
//基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById("main"));
option = {
tooltip : {// 气泡提示配置
trigger: 'axis' // 触发类型，默认数据触发，可选为：'axis'
},
legend: {// 图例配置
padding: 5, // 图例内边距，单位px，默认上下左右内边距为5
itemGap: 10,// Legend各个item之间的间隔，横向布局时为水平间隔，纵向布局时为纵向间隔
data:['邮件营销','联盟广告','直接访问','搜索引擎']
},
toolbox: {//辅助工具箱
show : true,
feature : {
mark : { //辅助线
show: true
},
dataView : {//数据视图
show: true,
readOnly: false
},
magicType : {//动态类型切换，
show: true,
type: ['line', 'bar', 'stack', 'tiled']
//折线图切换、柱形图切换、堆积、平铺
},
restore : {//还原，复位原始图表，
show: true
},
saveAsImage : {//保存图片
show: true
}
}
},
calculable : true,//是否启用拖拽重计算特性
xAxis : [ // 直角坐标系中横轴数组
{
type : 'category', // 坐标轴类型，横轴默认为类目轴，
boundaryGap : false,// 类目起始和结束两端空白策略，见下图，默认为true留空，false则顶头
data : ['周一','周二','周三','周四','周五','周六','周日']
}
],
yAxis : [// 坐标轴类型，横轴默认为类目轴，
{
type : 'value'
}
],
series : [
{
name:'邮件营销',
type:'line',
stack: '总量',
symbol: 'none',
itemStyle: {
normal: {
areaStyle: {
// 区域图，纵向渐变填充
color : (function (){
var zrColor = require('zrender/tool/color');
return zrColor.getLinearGradient(
0, 0, 0, 400,
//渐变起始位置横坐标、渐变起始位置纵坐标、渐变终止位置横坐标、渐变终止位置纵坐标
[
[0, 'rgba(255,0,0,0.8)'], // 0% 处的颜色
[1, 'rgba(255,255,255,0.1)']// 80% 处的颜色
]
)
})()
}
}
},
data:[
120, 132, 301, 134,
{value:90, symbol:'droplet',symbolSize:5},
230, 210
]
},
{
name:'联盟广告',
type:'line',
stack: '总量',//组合名称，双数值轴时无效，多组数据的堆积图时使用，
smooth: true,//平滑曲线显示，smooth为true时lineStyle不支持虚线
symbol: 'image://touzi_dian.png', // 系列级个性化拐点图形
symbolSize: 8,
data:[
120, 82,
{
value:201,
symbol: 'star', // 数据级个性化拐点图形
symbolSize : 15,
itemStyle : { normal: {label : {
show: true,
textStyle : {
fontSize : '20',
fontFamily : '微软雅黑',
fontWeight : 'bold'
}
}}}
},
{
value:134,
symbol: 'none'
},
190,
{
value : 230,
symbol: 'emptypin',
symbolSize: 8
},
110
]
},
{
name:'直接访问',
type:'line',
stack: '总量',
symbol: 'arrow',
symbolSize: 6,
symbolRotate: -45,//标志图形旋转角度[-180,180]
itemStyle: {
normal: {//图表内图形的默认样式
color: 'red',
lineStyle: { // 系列级个性化折线样式
width: 2,
type: 'dashed'
}
},
emphasis: {//强调样式
color: 'blue',
}
},
data:[
320, 332, '-', 334,
{
value: 390,
symbol: 'star6',
symbolSize : 20,
symbolRotate : 10,
itemStyle: { // 数据级个性化折线样式
normal: {
color: 'yellowgreen'
},
emphasis: {
color: 'orange',
label : {
show: true,
position: 'inside',
textStyle : {
fontSize : '20'
}
}
}
}
},
330, 320
]
},
{
name:'搜索引擎',
type:'line',
symbol:'emptyCircle',
itemStyle: {
normal: {
lineStyle: { // 系列级个性化折线样式，横向渐变描边
width: 2,
color: (function (){
var zrColor = require('zrender/tool/color');
return zrColor.getLinearGradient(
0, 0, 1000, 0,
[[0, 'rgba(255,0,0,0.8)'],[0.8, 'rgba(255,255,0,0.8)']]
)
})(),
shadowColor : 'rgba(0,0,0,0.5)',
shadowBlur: 10,//阴影模糊度
shadowOffsetX: 8,
shadowOffsetY: 8
}
},
emphasis : {
label : {show: true}
}
},
data:[
620, 732, 791,
{value:734, symbol:'emptyHeart',symbolSize:10},
890, 930, 820
]
}
]
};
myChart.setOption(option);
}
)
</script>
</body>
\ No newline at end of file
echarts3_map_demo @ d2839580
Subproject commit d283958090f8ab5dbda9380b05a8ed336306ffbd
flex.html 0 → 100644
<! DOCTYPE html>
<html>
<head>
<style>
body{
background:#000;
display:flex;
justify-content:center;
align-items:center;
}
.wrap{
width:510px;
margin:60px auto 0 auto;
display:flex;
flex-wrap:wrap;
}
.box{
margin:20px;
width:130px;
height:130px;
background:url("a_src/img/touzi_bg.png");
}
.content{
width:120px;
height:120px;
padding:5px;
}
.column{
flex-basis:100%;
}
.item{
width:30px;
height:30px;
margin:5px;
display: inline-flex;
background:url("a_src/img/touzi_dian.png");
}
.dian1{
display:flex;
justify-content:center;
align-items:center;
}
.dian2{
display:flex;
justify-content: space-between;
}
.dian2 .item:nth-child(2){
align-self:flex-end;
}
.dian3{
display:flex;
justify-content: space-between;
}
.dian3 .item:nth-child(2){
align-self:center;
}
.dian3 .item:nth-child(3){
align-self:flex-end;
}
.dian4{
display:flex;
flex-wrap:wrap;
align-content:space-between;
}
.dian4 .column{
display:flex;
justify-content: space-between;
}
.dian5{
display:flex;
flex-wrap:wrap;
align-content:space-between;
}
.dian5 .column{
display:flex;
justify-content: space-between;
}
.dian5 .column:nth-child(2){
display:flex;
justify-content: center;
}
.dian6{
display:flex;
flex-wrap:wrap;
align-content:space-between;
}
.dian6 .column{
display:flex;
justify-content: space-between;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box">
<div class="content dian1">
<span class="item"></span>
</div>
</div>
<div class="box">
<div class="content dian2">
<span class="item"></span>
<span class="item"></span>
</div>
</div>
<div class="box">
<div class="content dian3">
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
</div>
<div class="box">
<div class="content dian4">
<div class="column">
<span class="item"></span>
<span class="item"></span>
</div>
<div class="column">
<span class="item"></span>
<span class="item"></span>
</div>
</div>
</div>
<div class="box">
<div class="content dian5">
<div class="column">
<span class="item"></span>
<span class="item"></span>
</div>
<div class="column">
<span class="item"></span>
</div>
<div class="column">
<span class="item"></span>
<span class="item"></span>
</div>
</div>
</div>
<div class="box">
<div class="content dian6">
<div class="column">
<span class="item"></span>
<span class="item"></span>
</div>
<div class="column">
<span class="item"></span>
<span class="item"></span>
</div>
<div class="column">
<span class="item"></span>
<span class="item"></span>
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
hover.html 0 → 100644
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hover</title>
<style>
div {
position: relative;
width: 200px;
height: 60px;
line-height: 60px;
font-size: 32px;
cursor: pointer;
color: #333;
text-align: center;
margin-left:40%;
margin-bottom:16px;
}
.div1{
margin-top:80px;
}
.div1::before {
content: "";
position: absolute;
left: 0%;
bottom: 0;
width: 200px;
height: 2px;
background: deeppink;
transition: all .5s;
transform: scaleX(0);
z-index: 2;
}
.div1:hover::before {
transform: scaleX(1);
}
.div2::before {
content: "";
position: absolute;
left: 0%;
bottom: 0;
width: 200px;
height: 2px;
background: deeppink;
transition: transform .5s;
transform: scaleX(0);
transform-origin:100% 0;
}
.div2:hover::before {
transform: scaleX(1);
transform-origin: 0 0;
}
.div3::before {
content: "";
position: absolute;
left: 0%;
bottom: 0;
width: 200px;
height: 20px;
background: deeppink;
transition: transform .5s;
transform: scale(0,0);
transform-origin:100% 100%;
}
.div3:hover::before {
transform: scale(1,1);
transform-origin: 0 0;
}
.div4::before {
content: "";
position: absolute;
left: 0%;
bottom: 0;
width: 200px;
height: 60px;
background: deeppink;
transition: all .5s;
transform: scale(0,0);
transform-origin: 50% 100%;
z-index:-1;
}
.div4:hover{
color: #fff;
}
.div4:hover::before {
transform: scale(1,1);
transform-origin: 50% 0;
}
</style>
</head>
<body>
<div class="div1">点我</div>
<div class="div2">点我</div>
<div class="div3">点我</div>
<div class="div4">点我</div>
</body>
</html>
\ No newline at end of file
in.html 0 → 100644
<html>
<head>
</head>
<body>
<script>
function Person(){
};
Person.prototype.name = "hello";
Person.prototype.age = "12";
Person.prototype.sayName = function(){alert(this.name);};
function hasPrototypeProperty(object, name){
//同时使用hasOwnProperty()方法和in操作符，就可以确定该属性到底是存在于对象中还是原型中
//hasOwnProperty()函数用于指示一个对象自身(不包括原型链)是否具有指定名称的属性。如果有，返回true，否则返回false。
return !object.hasOwnProperty(name) && (name in object);
};
var p1 = new Person();
<!-- console.log("p1",p1,p1.name) -->
<!-- console.log("10",p1.hasOwnProperty("name"),("name" in p1)); -->
console.log("1",hasPrototypeProperty(p1,"name")); //true
p1.name = "nn";
<!-- console.log("20",p1.hasOwnProperty("name"),("name" in p1)); -->
console.log("2",hasPrototypeProperty(p1,"name")); //false;
</script>
</body>
</html>
\ No newline at end of file
jquery/entry.html 0 → 100644
<!DOCTYPE html>
<html>
<head>
<script src="jquery-3.3.1.js"></script>
</head>
<body>
</body>
</html>
\ No newline at end of file
jquery/jquery-3.3.1.js 0 → 100644
This diff could not be displayed because it is too large.
jquery/ul.html 0 → 100644
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>仿高德</title>
<script src='jquery-3.3.1.js'></script>
<style>
body,div,ul,li{
padding:0;
margin:0;
}
.header{
height:70px;
min-width:1280px;
background: #000;
}
.header-core{
width:1220px;
margin:0 auto;
}
.logo img{
width: 307px;
height: 42px;
display: inline-block;
margin: 14px 23px 0 0;
}
.header ul{
display: inline-block;
color: #fff;
position: relative;
top: -16px;
}
.header ul li{
list-style:none;
display:inline-block;
width:84px;
margin-right:14px;
}
ul li{
list-style:none;
}
.header ul li:hover{
color:red;
}
.header ul li a{
text-decoration:none;
}
input{
background:rgb(79, 88, 98);
border-radius: 10px;
width: 86px;
height: 30px;
border: none;
position: relative;
top: -16px;
}
.ct ul{
width:1000px;
margin:16px auto;
}
.ct ul li{
background:#efefef;
width: 240px;
height: 240px;
margin:25px;
position:relative;
display:inline-block;
opacity:1;
}
.intro{
padding:25px;
}
.mask{
opacity:0;
background-color: rgba(0, 0, 0, .6);
position:absolute;
top:0;
left:0;
}
.ct ul li:hover .mask {
opacity: 1;
background-color: rgba(0, 0, 0, .6);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
color: #fff;
}
.ct2 ul{
position:relative;
height: 320px;
}
.ct2 ul li{
background-color: rgba(0, 0, 0, 0.6);
position:absolute;
bottom: 0;
transition:height 0.4s;
}
.ct2 ul li:before{
content:'';
background:#a3a3a3;
position:absolute;
width: 240px;
height: 240px;
opacity:0.5;
}
.ct2 ul .li-0{
margin-left:0;
background-image:url("img/1.jpg");
background-size:contain;
z-index:10;
}
.ct2 ul .li-1{
margin-left:120px;
background-image:url("img/2.jpg");
background-size:contain;
}
.ct2 ul .li-2{
margin-left:240px;
background-image:url("img/3.jpg");
background-size:contain;
z-index:10;
}
.ct2 ul li.current {
z-index:999;
width: 240px;
height: 280px;
margin-top: -15px;
}
.ct2 ul li.current:before {
opacity:0;
}
</style>
</head>
<body>
<div class="header">
<div class="header-core">
<a class="logo" href="#"><img src="https://lbs.amap.com/web/public/dist/images/logo_white_2x.cad826.png"/></a>
<ul>
<li>产品介绍</li>
<li>开发支持</li>
<li>解决方案</li>
<li>高德位智</li>
<li>商务合作</li>
</ul>
<input>
</div>
<div class="header-radight">
<a></a>
</div>
</div>
<div class="ct">
<ul>
<li>
<div class="intro">
<div>产品介绍</div>
<div class="mask">qweeeeeeeee</div>
</div>
</li>
<li>
<div class="intro">
<div>产品介绍</div>
<div class="mask">qweeeeeeeee</div>
</div>
</li>
<li>
<div class="intro">
<div>产品介绍</div>
<div class="mask">qweeeeeeeee</div>
</div>
</li>
</ul>
</div>
<div class="ct ct2">
<ul class="ct2ul">
<li class="li-0">
<div class="intro">
<div>产品介绍</div>
</div>
</li>
<li class="li-1 current">
<div class="intro">
<div>产品介绍</div>
</div>
</li>
<li class="li-2">
<div class="intro">
<div>产品介绍</div>
</div>
</li>
</ul>
</div>
<script>
$("ul.ct2ul li").hover(function(){
console.log($(this).index())
$('ul.ct2ul li').removeClass('current');
$(this).addClass('current');
let currentIndex = $(this).index;
$(this).css("z-index",999)
let total = 3;
let pre = $(this);
let next = $(this);
let zindex = 10
for(let i = 0;i<total;i++){
if(pre.prev().length>0){
pre = pre.prev();
console.log("pre",pre.attr("class") ,i)
pre.css("z-index",10-i)
}
if(next.next().length>0){
next = next.next();
console.log("next",next.attr("class") ,i)
next.css("z-index",10-i)
}
}
})
</script>
</body>
</html>
\ No newline at end of file
js作用域.html 0 → 100644
<!DOCTYPE>
<HTML>
<head>
<title>js作用域</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<style>
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script>
var a = 12;
function fn(){
console.log('a 1',a)
var a = 24;
console.log('a 2',a)
}
fn();
</script>
<!-- 一、 var 声明的变量，存在变量提升 -->
</body>
</HTML>
\ No newline at end of file
js变量/引用类型.html 0 → 100644
<html>
<head>
</head>
<body>
<script>
function setName(obj){
obj.name = 'a';
obj = new Object();
obj.name = 'b';
return obj;
}
var p = new Object();
var p2 = setName(p);
alert(p.name); // a
alert(p2.name); // b
</script>
</div>
</body>
</html>
\ No newline at end of file
js执行机制.html 0 → 100644
<!DOCTYPE>
<HTML>
<head>
<title>js练习</title>
</head>
<body>
<script>
console.log('1');
setTimeout(function () {
console.log('2');
process.nextTick(function () {
console.log('3');
})
new Promise(function (resolve) {
console.log('4');
resolve();
}).then(function () {
console.log('5')
})
})
process.nextTick(function () {
console.log('6');
})
new Promise(function (resolve) {
console.log('7');
resolve();
}).then(function () {
console.log('8')
})
setTimeout(function () {
console.log('9');
process.nextTick(function () {
console.log('10');
})
new Promise(function (resolve) {
console.log('11');
resolve();
}).then(function () {
console.log('12')
})
})</script>
</body>
</HTML>
\ No newline at end of file
padding-position.html 0 → 100644
<html>
<head>
</head>
<body>
<div style="padding:100px">
<div style="position:relative">
qqqqqqqqqqqqqqqqqqqqqqq
<div style="position: absolute;bottom:0;right:0;background:pink;width:200px;height:200px">
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
promise.html 0 → 100644
<html>
<head>
</head>
<body>
<div style="display:none">
<script>
'use strict';
let score = 0;
console.log("score 1",score);
var PromiseObj = new Promise(function(resolve,reject){
score = 1;
console.log("score 2",score);
resolve('booooooooooooooooo')
});
PromiseObj.then((A)=>{
console.log("A",A);
console.log("score 3",score);
score += 20;
return 12
}).then((AA)=>{
console.log("AA",AA,score);
}).then(
score = 0,
).then((B)=>{
console.log("B",B);
console.log("score 5",score);
return Promise.resolve().then(()=>{
console.log("score 6",score);
const C = score;
console.log("c",C);
if(score > 0){
throw new Error('zhong');
}
})
}).catch((D)=>{
console.log("score 7",score);
console.log("d",D);
})
<!-- function runAsync(){ -->
<!-- var p = new Promise(function(resolve, reject){ -->
<!-- //做一些异步操作 -->
<!-- setTimeout(function(){ -->
<!-- console.log('执行完成'); -->
<!-- resolve('随便什么数据'); -->
<!-- }, 2000); -->
<!-- }); -->
<!-- return p; -->
<!-- } -->
<!-- runAsync().then(function(data){ -->
<!-- console.log(data); -->
<!-- //后面可以用传过来的数据做些其他操作 -->
<!-- //...... -->
<!-- }); -->
</script>
</div>
</body>
</html>
\ No newline at end of file
slider.html 0 → 100644
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.css">
<script src="jquery/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.js"></script>
<style>
.swiper-container {
width: 600px;
height: 300px;
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果需要滚动条 -->
<div class="swiper-scrollbar"></div>
</div>
<script>
$(document).ready(function () {
var mySwiper = new Swiper ('.swiper-container', {
direction: 'vertical',
loop: true,
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
scrollbar: {
el: '.swiper-scrollbar',
},
})
})
</script>
</body>
</html>
\ No newline at end of file
step.html 0 → 100644
<html>
<head>
</head>
<body>
<div style="display:none">
<script>
alert("aaaaaaaa")
</script>
</div>
</body>
</html>
\ No newline at end of file
this.html 0 → 100644
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<script>
var test = function(){};
test.prototype={
foo:"apple",
fun:function(){
this.foo = "banana"
}
};
var myTest = new test();
myTest.fun();
console.log(myTest.hasOwnProperty("foo"));
console.log(myTest.hasOwnProperty("fun"));
console.log(myTest);
</script>
</body>
</html>
事件捕获和冒泡.html 0 → 100644
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件捕获和冒泡</title>
</head>
<body>
<div class="cl">
<ul>
<li><a href="#">点我</a></li>
</ul>
</div>
<script>
function getTag(tagName){
return document.getElementsByTagName(tagName)[0]
};
getTag('ul').addEventListener('click',function(event){
console.log('ul')
});
getTag('li').addEventListener('click',function(event){
console.log('li')
});
getTag('a').addEventListener('click',function(event){
console.log('a')
});
getTag('div').addEventListener('click',function(event){
console.log('div')
});
<!-- 捕获
getTag('ul').addEventListener('click',function(event){
console.log('ul')
},true);
getTag('li').addEventListener('click',function(event){
console.log('li')
},true);
getTag('a').addEventListener('click',function(event){
console.log('a')
},true);
getTag('div').addEventListener('click',function(event){
console.log('div')
},true); -->
</script>
</body>
</html>
\ No newline at end of file
函数节流.html 0 → 100644
<!DOCTYPE>
<HTML>
<head>
<title>函数节流</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<style>
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div style="background: pink;height: 100vh;">函数节流:指定时间间隔内只会执行一次任务</div>
<div style="background: orange;height: 100vh;" id="text"></div>
<script>
//方法一：Date
function throttle_01(fn,timeout = 300){
let old = new Date().getTime();
return function(){
let now = new Date().getTime();
if(now - old < timeout){
return
}
old = now;
fn()
}
}
//方法二：定时器：set
function throttle(fn,timeout = 300){
let canRun = true
let fn1 = fn();
return function(){
if(!canRun){
return
}
setTimeout(() => {
fn1();
canRun = true
}, timeout);
canRun = false;
}
}
let count = 0;
function handle (){
document.getElementById('text').innerHTML = count++
}
window.addEventListener('scroll',throttle(handle))
</script>
</body>
</HTML>
\ No newline at end of file
函数防抖.html 0 → 100644
<!DOCTYPE>
<HTML>
<head>
<title>函数节流</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<style>
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div style="background: pink;height: 100vh;">函数节流:指定时间间隔内只会执行一次任务</div>
<div style="background: orange;height: 100vh;" id="text"></div>
<script>
//方法一：Date
function throttle_01(fn,timeout = 300){
let old = new Date().getTime();
return function(){
let now = new Date().getTime();
if(now - old < timeout){
return
}
old = now;
fn()
}
}
//方法二：定时器：set
function throttle(fn,timeout = 300){
let canRun = true
let fn1 = fn();
return function(){
if(!canRun){
return
}
setTimeout(() => {
fn1();
canRun = true
}, timeout);
canRun = false;
}
}
let count = 0;
function handle (){
document.getElementById('text').innerHTML = count++
}
window.addEventListener('scroll',throttle(handle))
</script>
</body>
</HTML>
\ No newline at end of file
拷贝.html 0 → 100644
<html>
<head>
</head>
<body>
<div style="display:none">
<script>
var a = {q:{w:{e:'r'}}};
var b = a;
var c = {...a};
console.log("a",a);
console.log("b",b);
console.log("c",c);
console.log("a==b",a==b,a===b);
console.log("a==c",a==c,a===c);
</script>
</div>
</body>
</html>
\ No newline at end of file
数组sort.html 0 → 100644
<html>
<head>
</head>
<body>
<script>
var arr = ["10","5","40","25","1000","1"]
document.write(arr+"<br/>")
document.write(arr.sort()+"<br/>")
//从小到大
function sortNumber(a,b){
return a - b
}
document.write(arr.sort(sortNumber)+"<br/>")
//从大到小
function sortNumber2(a,b){
return b - a
}
document.write(arr.sort(sortNumber2)+"<br/>")
</script>
</body>
</html>
\ No newline at end of file
数组去重.html 0 → 100644
<html>
<head>
</head>
<body>
<script>
// let a = Array.from(new Array(10000), (item, index) => {
// return index;
// })
// let b = Array.from(new Array(10000), (item, index) => {
// return index * 2;
// })
// let provice = [{
// key:1,
// value:'山东',
// },{
// key:2,
// value:'河南',
// },{
// key:1,
// value:'山西',
// },];
// let city = [{
// key:1,
// value:'青岛',
// },{
// key:2,
// value:'郑州',
// },{
// key:2,
// value:'安阳',
// },{
// key:3,
// value:'太原',
// },];
// let startTime = new Date().getTime();
// console.log("去重开始 startTime", startTime)
//方法：new Set
// let distinct = function (a, b) {
// return Array.from(new Set([...a, ...b]));
// };
//方法：object
// function distinct(a, b) {
// let obj = {};
// let result = [];
// for (let item of [...a, ...b]) {
// if (!obj[item]) {
// obj[item] = 1;
// result.push(item);
// }
// };
// return result
// };
//面试题延伸
// let citys = {};
// city.forEach((item)=>{
// citys[item] = city
// s[item] || [];
// citys[item].push(item.value);
// })
// provice.forEach((item)=>{
// item.citys = citys[item.key];
// })
// let endTime = new Date().getTime();
// console.log("去重结束 endTime", endTime)
// console.log("去重用时（毫秒）", endTime - startTime)
let a = [1,2,3,4];
let b = a;
// a= []
a.splice(0,a.length);
// a.slice(a.length);
console.log(a,b)
let data = [
{id:1,type:'U'},
{id:2,type:'D'},
{id:3,type:'D'},
{id:4,type:'D'},
{id:5,type:'D'},
]
data.map(function(item,index){
if(item.type == 'D'){
delete data[index]
}
})
console.log('data',data)
</script>
</body>
</html>
\ No newline at end of file
条纹加载中.html 0 → 100644
<html>
<head>
<style>
body, html {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 100%;
}
body {
background-repeat: no-repeat;
background-position: center;
background-image: radial-gradient(circle, #989898, #545454);
}
.container {
width: 240px;
margin: 20vh auto 0;
}
.container .warning {
height: 60px;
}
.warning:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
border-radius: 10px;
background-image: linear-gradient(pink,yellow 15%,transparent 60%,pink);
}
.warning {
position: relative;
background-color: yellow;
border: 1px solid yellow;
border-radius: 10px;
box-shadow: 1vw 1vh 4vh rgba(255, 192, 203, 0.2);
font-size:16px;
background-size: 3em 3em;
background-image:
linear-gradient(-45deg,transparent 0em,
transparent 1em,
pink 1em,
pink 2.1213em,
transparent 2.1213em,
transparent 3.1213em,
pink 3.1213em
);
-webkit-animation: warning-animation 750ms infinite linear;
-moz-animation: warning-animation 750ms infinite linear;
animation: warning-animation 750ms infinite linear;
}
@-webkit-keyframes warning-animation {
0% {
background-position: 0 0;
}
100% {
background-position: 3em 0;
}
}
@-moz-keyframes warning-animation {
0% {
background-position: 0 0;
}
100% {
background-position: 3em 0;
}
}
@keyframes warning-animation {
0% {
background-position: 0 0;
}
100% {
background-position: 3em 0;
}
}
</style>
</head>
<body>
<div class="container">
<div class="warning">
</div>
</div>
</body>
</html>
\ No newline at end of file
条纹边框.html 0 → 100644
<html>
<head>
<style>
body, html {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 100%;
}
body {
background-repeat: no-repeat;
background-position: center;
background-image: radial-gradient(circle, #989898, #545454);
}
.container {
width: 240px;
margin: 20vh auto 0;
}
.container .warning {
height: 240px;
}
.warning {
position: relative;
background-color:yellow;
border: 12px solid transparent;
border-radius: 10px;
box-shadow: 1vw 1vh 4vh rgba(255, 192, 203, 0.2);
font-size:16px;
background-size:3em 3em;
background-image:
linear-gradient(#fff,#fff),
linear-gradient(-45deg,transparent 0em,
transparent 1em,
pink 1em,
pink 2.1213em,
transparent 2.1213em,
transparent 3.1213em,
pink 3.1213em
);
background-clip:padding-box,border-box;
-webkit-animation: warning-animation 750ms infinite linear;
-moz-animation: warning-animation 750ms infinite linear;
animation: warning-animation 750ms infinite linear;
}
@-webkit-keyframes warning-animation {
0% {
background-position: 0 0;
}
100% {
background-position: 3em 0;
}
}
@-moz-keyframes warning-animation {
0% {
background-position: 0 0;
}
100% {
background-position: 3em 0;
}
}
@keyframes warning-animation {
0% {
background-position: 0 0;
}
100% {
background-position: 3em 0;
}
}
</style>
</head>
<body>
<div class="container">
<div class="warning">
</div>
</div>
</body>
</html>
\ No newline at end of file
流动加载中.html 0 → 100644
<html>
<head>
<style>
body, html {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 100%;
}
body {
background-repeat: no-repeat;
background-position: center;
background-image: radial-gradient(circle, #989898, #545454);
}
.container {
width: 240px;
margin: 20vh auto 0;
}
.container .warning {
height: 240px;
}
.warning {
background-color:#fff;
}
.loading{
width:240px;
height:4px;
background-image:
linear-gradient(90deg,pink 0em,
purple 3em,
purple 3.1em,
pink 3.2em
);
-webkit-animation: warning-animation 5s infinite linear;
-moz-animation: warning-animation 5s infinite linear;
animation: warning-animation 4s infinite linear;
}
@-webkit-keyframes warning-animation {
0% {
background-position: 0 0;
}
100% {
background-position: 20px 0;
}
}
@-moz-keyframes warning-animation {
0% {
background-position: 0 0;
}
100% {
background-position: 240px 0;
}
}
@keyframes warning-animation {
0% {
background-position: 0% 0%;
}
100% {
background-position: 240px 0;
}
}
</style>
</head>
<body>
<div class="container">
<div class="loading"></div>
<div class="warning">
</div>
</div>
</body>
</html>
\ No newline at end of file
逻辑或.html 0 → 100644
<html>
<head>
</head>
<body>
<script>
var obj1 = {a:1};
var obj2 = {a:2};
var num = 0;
var num2 = false;
//两个操作数都是对象，返回第一个操作数
var res= obj1 || obj2
console.log("oo",!!res,res)
//第一个操作数是对象,返回第一个操作数
res= obj1 || num
console.log("on",!!res,res)
res= num || obj1
console.log("no",!!res,res)
res= num || num2
console.log("nn2",!!res,res)//2
res= num2 || num
console.log("n2n",!!res,res)//1
//第一个操作数为true,返回第一个
//第一个操作数为false,返回第二个
//两个操作数为null,返回null
//两个操作数为NaN,返回NaN
//两个操作数为undefined,返回undefined
res = obj1 || null
console.log("nu",!!res,res)
res = null || obj1
console.log("nu2",!!res,res)
</script>
</body>
</html>
\ No newline at end of file
面试.html 0 → 100644
<html>
<head>
</head>
<div style="width:200px;height:100px;background: red">
<div style="height:50%;margin-right:50%;background: blue">
</div>
</div>
//子元素margin-top,margin-bottom的百分比是根据父元素的高度
//子元素margin-left,margin-right的百分比是根据父元素的宽度
<body>
<script>
let a = Array.from(new Array(10000), (item, index) => {
return index;
})
let b = Array.from(new Array(10000), (item, index) => {
return index * 2;
})
let provice = [{
key: 1,
value: '山东',
}, {
key: 2,
value: '河南',
}, {
key: 1,
value: '山西',
},];
let city = [{
key: 1,
value: '青岛',
}, {
key: 2,
value: '郑州',
}, {
key: 2,
value: '安阳',
}, {
key: 3,
value: '太原',
},];
let startTime = new Date().getTime();
// console.log("去重开始 startTime", startTime)
//方法：new Set
// let distinct = function (a, b) {
// return Array.from(new Set([...a, ...b]));
// };
//方法：object
// function distinct(a, b) {
// let obj = {};
// let result = [];
// for (let item of [...a, ...b]) {
// if (!obj[item]) {
// obj[item] = 1;
// result.push(item);
// }
// };
// return result
// };
//面试题延伸
// let citys = {};
// city.forEach((item)=>{
// citys[item] = citys[item] || [];
// citys[item].push(item.value);
// })
// provice.forEach((item)=>{
// item.citys = citys[item.key];
// })
// let endTime = new Date().getTime();
// console.log("去重结束 endTime", endTime)
// console.log("去重用时（毫秒）", endTime - startTime)
function fn() {
var i = 0;
return function fnAdd() {
console.log(i++);
}
}
var fn1 = new fn();
fn2 = new fn();
// fn1();
// fn1();
// fn2();
setTimeout(() => {
console.log("setTimeout 100")
}, 100)
setTimeout(() => {
console.log("setTimeout 0")
}, 0)
for (let i = 0; i < 4; i++) {
console.log('for',i)
}
</script>
</body>
</html>
\ No newline at end of file
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!