Understanding of JavaScript and analysis of classic cases

Little demon king wood 2022-02-13 05:54:07 阅读数:842

understanding javascript analysis classic cases

js Introduction to what to learn :

  • web The front end has three layers
  • JavaScript The composition of
  • JavaScript Characteristics
  • JS How to write the output information in the web page
  • JS The writing method of user input in the web page
  • Direct measurement
  • Variable
  • data type
  • Operator
  • Data type conversion
  • Process control
  • Common built-in function objects
  • function
  • Pseudo array arguments
  • About DOM The event operation of
  • DOM In operation “ Three elements of the event “
  • Timer
  • BOM Introduce
  • BOM Common methods and built-in objects
  • client,offset,scroll series

 

JavaScript Is it easy to learn ? characteristic :

  • Simple and easy to use
  • Explanatory language : Explain and execute .
  • Based on the object : Built in a large number of ready-made objects , Write a few programs to achieve the goal .

JavaScript The composition of

JavaScript The foundation is divided into three parts :

  • ECMAScript: JavaScript The grammar standard of . Including variable , expression , Operator , function , if sentence , for Statement etc. .

  • DOM: Document object model . Operate the elements on the web page API. Let the box move , Color change , Carousel chart, etc .

  • BOM: Browser object model . Operating some functions of the browser API. Let the browser scroll automatically

.PS: API Application programming interface .

 

 

A simple case , Get you started :

Sidebar animation effect

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>04 Sidebar animation effect </title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
#box {
width: 200px;
height: 200px;
background-color: red;
position: relative;
left: -200px;
}
#box span {
position: absolute;
width: 40px;
height: 60px;
color: #fff;
background-color: #000000;
right: -40px;
top: 50%;
margin-top: -30px;
line-height: 60px;
text-align: center;
}
</style>
</head>
<body>
<div id="box">
<span> Pull open </span>
</div>
<script type="text/javascript">
window.onload = function() {
var box = document.getElementById('box');
var timer = null,
speed = 0;
box.onmouseover = function() {
startAnimation(this, 0);
}
box.onmouseout = function() {
startAnimation(this, -200);
}
function startAnimation(obj, end) {
// Turn off the timer first
clearInterval(timer);
speed = end > obj.offsetLeft ? 5 : -5;
timer = setInterval(function() {
if (obj.offsetLeft === end) {
clearInterval(timer);
return;
}
obj.style.left = obj.offsetLeft + speed + 'px';
}, 30);
}
}
</script>
</body>
</html>

Chain movement effect

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#box{
width: 200px;
height: 200px;
background-color: palevioletred;
opacity: 0.3;
}
</style>
</head>
<body>
<div id="box"></div>
<script src="js/myAnimation.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function (){
var box = document.getElementById('box');
box.onmouseover = function (){
startAnimation(box,'width',500,function (){
startAnimation(box,'height',400,function (){
startAnimation(box,'opacity',100);
})
})
}
}
</script>
</body>
</html>

At the same time, the movement effect

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box{
width: 200px;
height: 200px;
background-color: #DA70D6;
}
</style>
</head>
<body>
<div id="box"></div>
<script src="js/myAnimation2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function (){
var box = document.getElementById('box');
box.onmouseover = function (){
startAnimation(box,{"width": 500,"opacity": 30});
}
box.onmouseout = function (){
startAnimation(box,{"width": 200,"opacity": 100});
}
}
</script>
</body>
</html>

Linkage effect

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>17 Linkage effect </title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#ad{
position: fixed;
right: 0;
bottom: 0;
}
#close{
position: absolute;
right: 0;
top: 0;
width: 25px;
height: 25px;
z-index: 5;
}
</style>
</head>
<body>
<div id="ad">
<img src="images/ad.png" alt="" width="300">
<span id="close"></span>
</div>
<script src="js/myAnimation2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 1. Linkage effect
// 2. Sidebar banner
// 3. Rolling monitoring
// 4. Shuffling figure
// (1) Get tag
var ad = document.getElementById('ad');
var close = document.getElementById('close');
close.onclick = function (){
startAnimation(ad,{"height": 260},function(){
startAnimation(ad,{"width": 0},function(){
ad.style.display = 'none';
})
})
}
</script>
</body>
</html>

Scrolling monitoring effect

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 19 Rolling monitoring </title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
html,
body {
width: 100%;
height: 100%;
}
.container {
width: 1190px;
height: 100%;
margin: 0 auto;
}
.container div {
width: 100%;
height: 100%;
text-align: center;
color: #fff;
font-size: 30px;
}
.aside {
position: fixed;
width: 40px;
right: 20px;
top: 300px;
font-size: 16px;
font-weight: 700;
text-align: center;
}
.aside li {
height: 50px;
border-bottom: 1px solid #ddd;
}
.aside li a {
color: peru;
}
.aside li.current {
background-color: coral;
}
.aside li.current a {
color: #fff;
}
</style>
</head>
<body>
<div class="container" id="box">
<div class="current"> Love shopping good goods </div>
<div> Good store anchor </div>
<div> Quality features </div>
<div> Guess you like </div>
</div>
<ul class="aside" id="aside">
<li class="current">
<a href="javascript:void(0)"> Love shopping good goods </a>
</li>
<li>
<a href="javascript:void(0)"> Good store anchor </a>
</li>
<li>
<a href="javascript:void(0)"> Quality features </a>
</li>
<li>
<a href="javascript:void(0)"> Guess you like </a>
</li>
</ul>
<script src="js/myAnimation2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function() {
// 1. Get tag
var box = document.getElementById('box');
var allBoxs = box.children;
var aside = document.getElementById('aside');
var lis = aside.children;
var isClick = false; // The default is not clicked
// 2. Color
var colors = ['red', 'pink', 'purple', 'blue'];
for (var i = 0; i < allBoxs.length; i++) {
allBoxs[i].style.backgroundColor = colors[i];
}
// 3. Listen for the click of the sidebar button
for (var j = 0; j < lis.length; j++) {
lis[j].index = j;
lis[j].onclick = function() {
isClick = true;
for (var k = 0; k < lis.length; k++) {
lis[k].className = '';
}
// Set the current class
this.className = 'current';
var _this = this;
// Page animation
startAnimation(document.documentElement, {
"scrollTop": this.index * (document.body.clientHeight)
}, function() {
isClick = false;
// This is the jump page
if (_this.index == lis.length - 1) {
alert(111);
window.open('https://www.baidu.com');
}
})
// document.documentElement.scrollTop = this.index * document.body.clientHeight;
}
}
// 4. Monitor page scrolling
window.onscroll = function() {
if (!isClick) {
// 4.1 Get the height of page scrolling
var docScrollTop = document.documentElement.scrollTop + 20 || document.body.scrollTop + 20;
console.log(docScrollTop);
for (var i = 0; i < lis.length; i++) {
if (docScrollTop > allBoxs[i].offsetTop) {
for (var j = 0; j < allBoxs.length; j++) {
lis[j].className = '';
}
lis[i].className = 'current';
}
}
}
}
}
</script>
</body>
</html>

 

 

Animation2.js The document is here

var speed = 0;
/**
* Animation functions
* @param {Object} obj The current object
* @param {Object} attr Attributes of the current element object
* @param {Object} endTarget End position
*/
function startAnimation(obj, json, fn) {
// For multi object motion , The return value of the timer should be bound to the current object .
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var cur = 0;
var flag = true; // Benchmarking If true, Prove that all attributes have reached the end value
for (var attr in json) {
// 0 Get style properties
// Transparency change processing
switch (attr) {
case 'opacity':
cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
break;
case 'scrollTop':
cur = obj[attr]
break;
default:
cur = parseInt(getStyle(obj, attr));
break;
}
// 1. Find speed
speed = (json[attr] - cur) / 10;
speed = json[attr] > cur ? Math.ceil(speed) : Math.floor(speed);
// 2. Critical processing
if (json[attr] !== cur) {
flag = false;
}
// 3. Get moving
switch (attr) {
case 'opacity':
obj.style[attr] = `alpha(opacity: ${cur + speed})`;
obj.style[attr] = (cur + speed) / 100;
break;
case 'scrollTop':
obj.scrollTop = cur + speed;
default:
obj.style[attr] = cur + speed + 'px';
break;
}
}
if (flag) {
clearInterval(obj.timer);
if (fn) {
fn();
}
return;
}
}, 30);
}
/**
* Function to get element attributes
* @param {Object} obj The current element object
* @param {Object} attr Attributes of the current element object
*/
function getStyle(obj, attr) {
if (obj.currentStyle) {
// compatible ie
return obj.currentStyle[attr];
} else {
// Compatible with mainstream browsers
return getComputedStyle(obj, null)[attr];
}
}

Now I'm still a sophomore , This is what I'm learning JavaScript Here are some cases of understanding and doing in , I hope I can help Xiaobai like me , It's hard to get started !!!

copyright:author[Little demon king wood],Please bring the original link to reprint, thank you. https://en.javamana.com/2022/02/202202130554048477.html