nextboy / share Goto Github PK
View Code? Open in Web Editor NEW各种分享
各种分享
在JavaScript的世界里,数据类型分为
其两者最大的区别在于:比如
var a = b;
如果 b 是基本的数据类型,那么,a的值就等于b的值,对a进行修改,不会影响b的值。
如果 b 是引用类型,那么,a的值本质上是一个指向b的指针,两者共用一块内存,a的值改变,会修改b的值。
因此,为了避免数据污染,又想复制一份引用类型的数据,我们需要进行一个深度复制。
目的就是保证复制后的a值再进行修改不会影响b的值。
众所周知,对于所有的引用类型,其原型链最后都是指向object,因此,typeof判断出来的所有引用类型结果统统是object,而对于instanceof这个API,它的判断方式是这样的:从原型链上查找,如果存在该原型,则判断为true。
比如数组arr,它的原型链为: arr ---> Array --->Object
arr instanceof Array; //true
arr instanceof Object; //true
利用以上的知识,我们可以进行如下的函数封装:
function clone(data){
var newData;
//如果是基本数据类型
if (typeof(data) !== 'object'){
newData = data;
}else{//如果是引用类型
//如果是数组
if (data instanceof Array) {
newData = []
for (var i = 0; i < data.length; i++) {
if(typeof(data[i]) === 'object'){ //如果值也是引用类型
newData[i] = clone(data[i]);
}else{
newData.push(data[i]);
}
}
}else{ //如果是对象
newData = {};
for(key in data){
if(data.hasOwnProperty(key)){
if(typeof(data[key]) === 'object'){ //如果键值是引用类型
newData[key] = clone(data[key]);
}else{
newData[key] = data[key];
}
}
}
}
}
return newData;
}
进度条是一个常见的CSS组件,可顾名思义,我们可以用它来表示进度或者展示百分比等。
下面我们久来介绍如何做一个进度条组件。
一个进度条的组成,无非两个。
因此我们可以书写基本的HTML结构如下
<div class="progress-wrap"><div class="progress"></div></div>
给包裹层增加基本样式,宽度不做设置,则默认占满一行,高度此处设置为20px,实际中可根据需要进行参数设置
.progress-wrap{
background-color:#999;
height: 20px;
border-radius: 10px;
}
给当前实际进度增加基本的样式,
.progress-wrap .progress{
height: 100%;
border-radius: 10px;
background: linear-gradient(to right,#2BD5D5,#96EE11) no-repeat;
}
大家可以看到,上面的 .progress的样式里面是没写宽度的,为了增加组件的可复用性,宽度我们写为行内样式.
<div class="progress-wrap"><div class="progress" style="width: 20%"></div></div>
为了让进度条更具观赏性和互动性,我们给它增加一些交互效果.
我们先定义一个CSS的动画
@keyframes progressGrow{
from{transform:scaleX(0);}
to{transform:scaleX(1);}
}
这个动画是让实际进度区块的大小从0变到1,给视觉上造成一种生长的效果.
然后我们将动画添加到进度条中
.progress-wrap:hover .progress{
animation: progressGrow 5s forwards;
}
此时我们发现,当鼠标移动到进度条上时,实际进度区块是从中间向两边伸长,
因此我们需要把实际进度区块的原点定位到最左边中间.修改如下:
.progress-wrap .progress{
height: 100%;
border-radius: 10px;
background: linear-gradient(to right,#2BD5D5,#96EE11) no-repeat;
transform-origin:left center; /*修改原点位置*/
}
最后我们在浏览器中查看,问题来了,这个进度条在部分浏览器中,动画开始瞬间,最左边的圆角溢出了!
此时我们尝试给包裹层添加一个overflow:hidden来阻止溢出.修改如下:
.progress-wrap{
background-color:#999;
height: 20px;
border-radius: 10px;
overflow: hidden;
}
然而,这样依然无效!
到了这里大家不用慌,我们的思路是对的,那真正的问题出在哪里?原来,使用了transform的元素,会具有类似
position:relative的属性,改变了层叠效果,包裹层就包裹不住了.因此,解决的办法很简单,相信有部分聪明
的同学已经想到了,就是让包裹层也具有transform属性,为了让包裹层具有transform属性,又不改变其形状,
我们可以增加这样的样式:transform:scale(1)或者transform:rotate(0 deg),变形为1或者旋转0度,相当于
不变
修改包裹层css样式如下
.progress-wrap{
background-color:#999;
height: 20px;
border-radius: 10px;
overflow: hidden;
transform: scale(1);
}
再次在不同版本浏览器中测试,完美!
想查看实际效果的小伙伴们,自己赶紧动手写一写,运行下看看吧!!!
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>进度条</title>
<style>
/* 动画效果*/
@keyframes progressGrow{
from{transform:scaleX(0);}
to{transform:scaleX(1);}
}
/* 进度条包裹层.也就是灰色部分 */
.progress-wrap{
background-color:#999;
height: 20px;
border-radius: 10px;
overflow: hidden;
transform: scale(1);
margin: 20px auto;
}
/* 进度条的宽度在这里先不写,而是写在行内样式中,方便代码的复用 */
.progress-wrap .progress{
height: 100%;
border-radius: 10px;
background: linear-gradient(to right,#2BD5D5,#96EE11) no-repeat;
transform-origin:left center;
}
/* 添加动画效果 */
.progress-wrap:hover .progress{
animation: progressGrow 5s forwards;
}
</style>
</head>
<body>
<h1>通过scale缩放实现的进度条</h1>
<small style="color: red">优选第一方案</small>
<div class="progress-wrap"><div class="progress" style="width: 20%"></div></div>
<div class="progress-wrap"><div class="progress" style="width: 40%"></div></div>
<div class="progress-wrap"><div class="progress" style="width: 60%"></div></div>
<div class="progress-wrap"><div class="progress" style="width: 80%"></div></div>
<span>本方案的核心是需要设置进度条的基点为最左边中间,因为scale是从基点开始进行缩放的,默认基点是正中间</span>
</body>
</html>
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.