(1)使用CSS实现一个持续的动画效果
部分代码:
animation: zz 5s infinite;
@keyframes zz {
from {
left: 0px
}
to {
left: 100px
}
主要考察animation的用法:
全部代码:
<html>
<head>
<meta charset="UTF-8">
<title>title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
div {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
animation: zz 5s infinite;
}
@keyframes zz {
from {
left: 0px
}
to {
left: 100px
}
}
style>
head>
<body>
<div>div>
body>
html>
(2):使用JS实现一个持续的动画效果
给的答案是:requestAnimationFrame
特点:
使用:
requestAnimationFrame的用法与settimeout很相似,只是不需要设置时间间隔而已。requestAnimationFrame使用一个回调函数作为参数,这个回调函数会在浏览器重绘之前调用。它返回一个整数,表示定时器的编号,这个值可以传递给cancelAnimationFrame用于取消这个函数的执行
requestID = requestAnimationFrame(callback);
//控制台输出1和0
var timer = requestAnimationFrame(function(){
console.log(0);
});
console.log(timer);//1
cancelAnimationFrame方法用于取消定时器
//控制台什么都不输出
var timer = requestAnimationFrame(function(){
console.log(0);
});
cancelAnimationFrame(timer);
也可以直接使用返回值进行取消
var timer = requestAnimationFrame(function(){
console.log(0);
});
cancelAnimationFrame(1);
IE9-浏览器不支持该方法,可以使用setTimeout来兼容
简单兼容:
if (!window.requestAnimationFrame) {
requestAnimationFrame = function(fn) {
setTimeout(fn, 17);
};
}
严格兼容:
if(!window.requestAnimationFrame){
var lastTime = 0;
window.requestAnimationFrame = function(callback){
var currTime = new Date().getTime();
var timeToCall = Math.max(0,16.7-(currTime - lastTime));
var id = window.setTimeout(function(){
callback(currTime + timeToCall);
},timeToCall);
lastTime = currTime + timeToCall;
return id;
}
}
if (!window.cancelAnimationFrame) {
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}
应用
完整代码:
<html>
<head>
<meta charset="UTF-8">
<title>title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
#e{
width :100px;
height :100px;
background-color :red;
position : absolute;
}
style>
head>
<body>
<p id="e">p>
body>
<script type="text/javascript">
window.requestAnimFrame = (function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
var e = document.getElementById("e");
var flag = true;
var left = 0;
function render() {
left == 0 ? flag = true : left == 100 ? flag = false : '';
flag ? e.style.left = ` ${left++}px` :
e.style.left = ` ${left--}px`;
}
(function animloop() {
render();
requestAnimFrame(animloop);
})();
script>
html>
第一种:
<html>
<head>
<meta charset="UTF-8">
<title>title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
body{
display :flex;
}
.left{
background-color:red;
height : 200px;
flex:1;
}
.right {
background-color:cadetblue;
height : 200px;
width : 100px;
}
style>
head>
<body>
<div class="left">div>
<div class="right">div>
body>
html>
第二种:
<html>
<head>
<meta charset="UTF-8">
<title>title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
div{
height : 200px;
}
.left{
float :right;
width : 200px;
background-color: chartreuse;
}
.right {
margin-right:200px;
background-color:salmon;
}
style>
head>
<body>
<div class="left">div>
<div class="right">div>
body>
html>
第一种:
<html>
<head>
<meta charset="UTF-8">
<title>title>
<style type="text/css">
.center {
width: 100px;
height: 100px;
position:absolute;
background-color: red;
top: 50%;
left :50%;
transform: translate(-50%,-50%);
}
style>
head>
<body>
<div class="center">
div>
body>
html>
第二种:
将上方的transform: translate(-50%,-50%);换成
margin : -50px 0 0 -50px;
第三种:
<html>
<head>
<meta charset="UTF-8">
<title>title>
<style type="text/css">
.center {
width: 100px;
height: 100px;
position:absolute;
background-color: red;
margin :auto;
top :0;
bottom :0;
left :0;
right :0;
}
style>
head>
<body>
<div class="center">
div>
body>
html>
第四种:
<html>
<head>
<meta charset="UTF-8">
<title>title>
<style type="text/css">
body {
display: flex;
height: 600px;
justify-content: center;
align-items: center;
border :1px solid red;
}
.center {
width: 100px;
height: 100px;
background-color: red;
}
style>
head>
<body>
<div class="center">
div>
body>
html>
因为项目考虑兼容IE9所以直接说用的不多
使用媒体查询做的响应式布局,根据不同屏幕宽度加载不同的css
let是ES6新添加声明变量的命令,它类似于var。但是有很大的不同:
当我们执行代码的时候(如a=1)编译器和引擎还会进行两项额外的操作:判断变量是否已经声明:
- 首先编译器对代码进行分析拆解,从左到右遇见var a则编译器就会询问作用域是否已经存在a的变量了,如果不存在如果不存在就招呼作用域声明一个新的变量a若已经存在了就忽略var继续向下编译
- 引擎遇见a=1同样会询问当前作用域下是否由变量a存在就赋值,不存在就顺着作用域链向上查找,若最终找到了就赋值,没有就让作用域声明一个变量并且赋值
function sleep(time){
return new Promise((resolve)=>setTimeout(resolve,time));
}
obj={
name:'a',
getName:function(){
console.log(this.name);
}
}
var fn=obj.getName;
obj.getName();
var fn2=obj.getName();
fn();
fn2();
console.log(...new Set([6,6,5,5,1,2,3]));
<body>
<ul>
<li>1li>
<li>2li>
<li>3li>
<li>4li>
ul>
<button onclick="cccc()">添加button>
<script type="text/javascript">
var a=5;
var lis=document.querySelectorAll('li');
for(var i=0;i'click' ,function(e){
alert(e.target.nodeName);
if(e.target&&e.target.nodeName.toUpperCase()=="LI"){
alert(e.target.innerHTML);
}
},false);
}
function cccc(){
var uls=document.querySelector('ul');
var l=document.createElement('li');
l.innerText=a++;
l.οnclick=function(){
alert(this.innerText);
}
uls.appendChild(l);
}
script>
body>
参考:
obj={
a:1,
b:2
}
obj2={
a:1,
b:2
}
obj3={
a:1,
b:2
}
console.log(JSON.stringify(obj)==JSON.stringify(obj2));
console.log(JSON.stringify(obj)==JSON.stringify(obj3));
使用命名空间