var p = {name : 'mike'};
var p1 = p;
p.name = p = {age:18};
console.log(p,p1);
我是这么记的.
p.name 和 p 读取的时候指向的是原来的引用值,
赋值的时候,是新的引用值.
先读取,在赋值.
答案
p : {age : 18};
p1 : {name : {age : 18}};
[5,6,7].map(parseInt);
parseInt(a,b);
将目标进制的数,转换为十进制.
parseInt(5,0) => 5 这个有点记不住啊.
parseInt(6,1) => NaN
parseInt(7,2) => NaN
答案
[5,NaN,NaN]
3
image.png
4 从字符串中,把数字识别出来
var str = "askdjglasj123dg;jasaskldgj456klasdjglaks789js";
// 思路一 : 正则
var reg = /[\d]+/g;
var arr = str.match(reg);
console.log(arr);
// 思路二 : 循环检测
// 变成数组, 如果是 数字,就用临时字符串拼接, 遇到不是,就用数组把该 字符串放进数组, 字符串更新为空串,继续.
// 为防止最后一个如果是数字, 当循环结束时, 检测 临时字符串如果不是空串,就放进数组, 最后返回数组.
// 如何判断是否为数字, 如果不利用正则
// 有两种思路
// 1. 用数组
// 2. 用阿斯克码
function getNum (str) {
var newArr = [];
var numArr = ['0','1','2','3','4','5','6','7','8','9'];
// 此处如果 [0,1,2...] , indexOf 都会返回-1..
var arr = str.split("");
var len = arr.length;
var newStr = "";
for(var i = 0; i < len; i++) {
console.log(numArr.indexOf(arr[i]) != -1);
if(numArr.indexOf(arr[i]) != -1) {
newStr += arr[i];
}else {
if (newStr !== "") {
newArr.push(newStr);
newStr = "";
}
}
}
return newArr;
}
console.log(getNum(str));
你知道css3哪些新特性?
我擦,实话实说, 我不太清楚哪个是css2哪个是css3,,,,
反正css3会用不就行了嘛?
-
新的选择器 属性选择, 新增好多个伪类选择器, 伪元素选择器.
2.box-sizing
3.background-clip size origin
4.border-image border-image-slice border-image-repeat
5.linear-gradient radial-gradient
6.transform ; transform 3d perspective translate scale skew rotate
7.transition
8.animate
9.box-shadow text-shadow
10, text-overflow
11,flex
..还有什么呢?
什么是响应式设计?
用同一套文档, 来满足 不同 终端设备,不同屏幕尺寸进行不同布局,
通过利用 @media 来实现?
image.png
- jq的animate 和 css3 animation 的区别?
image.png
咦? 原来jq无法通过animate 修改 transform..
我个人觉得最大的不同在于,一个有回调函数,一个没有.
在完成动作后,我想干什么,这个需求我不知道 animation 怎么实现.
能实现嘛?
css3 animation与jQuery animate()区别
css3 animation与jQuery animate()区别在于实现机制不同：
1.css3中的过渡和animation动画都是基于css实现机制的，属于css范畴之内，并没有涉及到任何语言操作。效率略高与jQuery中的animate()函数，但兼容性很差。
2.jQuery中的animate()函数可以简单的理解为css样式的“逐帧动画”，是css样式不同状态的快速切换的结果。效率略低于css3动画执行效率，但是兼容性好。
推荐在兼容性要求不是很高的情况下尽量使用css3动画，在需要兼容性很好并且有复杂的事件响应的情况下使用jQuery中的animate()函数。
1、css3 使用 GPU，jQuery 使用 CPU
2、css3 animation 支持的 css 属性比 jQuery 多
- 简易代码实现雪花飘落
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewprot" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>dddd</title>
<link rel="stylesheet" type="text/css" href="css/test.css" />
<link rel="stylesheet" type="text/css" href="css/iconfont.css" />
<style type="text/css">
body{
overflow: hidden;
background-color: #333;
}
.snow1:after {
content: '\e626';
font-family: "iconsnow" !important;
color: white;
}
.snow2:after {
content: '\e7ce';
font-family: "iconsnow" !important;
color: white;
}
.snow3:after {
content: '\e60d';
font-family: "iconsnow" !important;
color: white;
}
.snow4:after {
content: '\e625';
font-family: "iconsnow" !important;
color: white;
}
/*这里引入了阿里矢量图标中的雪花图案*/
@font-face {
font-family: 'iconsnow';
src: url('./newfont/iconfont.eot');
src: url('./newfont/iconfont.eot?#iefix') format('embedded-opentype'), url('./newfont/iconfont.ttf') format('truetype'), url('./newfont/iconfont.svg#iconsnow') format('svg');
font-style: normal;
font-weight: normal;
}
</style>
</head>
<body>
<script type="text/javascript">
// 一个构造函数
function snowFlower() {
this.size = parseInt(Math.random() * 35) + 14;
this.name = "snow" + Math.ceil(Math.random() * 4);
this.left = Math.random() * window.innerWidth;// 需要求得 视口宽度.
this.top = 0;// 最顶端开始
this.viewContent = document.createElement('span');
this.iSpeedX = parseInt(Math.random() * 5) * (Math.random() - 0.5);
this.iSpeedY = parseInt(Math.random() * 8) + 5;
this.timer = null;
this.render = function () {
var vc = this.viewContent;
vc.style.fontSize = this.size + "px";
vc.className = this.name;
vc.style.position = "absolute";
vc.style.left = this.left + "px";
vc.style.top = this.top + "px";
document.body.appendChild(vc);
}
this.move = function () {
var timer = this.timer;
var vc = this.viewContent;
var self = this;
timer = setInterval(function () {
vc.style.left = vc.offsetLeft + self.iSpeedX + 'px';
vc.style.top = vc.offsetTop + self.iSpeedY + 'px';
if (vc.offsetTop >= window.innerHeight + 10) {
clearInterval(timer);
document.body.removeChild(vc);
}
},50)
}
this.init = function () {
this.render();
this.move();
}
this.init();
}
setInterval(function () {
new snowFlower();
console.log(document.getElementsByTagName('span').length);
},100)
</script>
</body>
</html>
9.实现背景颜色渐变动画
:root,body{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
body{
background-image: linear-gradient(to left bottom, #ff0 0%,#f0f 50%,#000 100%);
background-size: 800%;
background-position: 100% 0%;
animation: change 3s ease alternate infinite both;
}
@keyframes change{
0%{
background-position: 0% 0%;
}
100%{
background-position: 100% 100%;
}
}
网友评论