当前位置：网站首页>JS learning notes 24-28: end
JS learning notes 24-28: end
2022-07-28 15:08:00 【The man fished alone in the cold river snow】
JS Learning notes
One 、 Use of timer
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * {
margin: 0;
padding: 0;
}
#box1 {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
</style> <script> window.onload = function () {
// obtain box1
var box1 = document.getElementById("box1");
// obtain btn01
var btn01 = document.getElementById("btn01");
// After clicking the button send box1 To the right (left Value increases ) btn01.onclick = function () {
// box1.style.left="300px";
// Turn on a timer , Used to perform animation effects setInterval(function () {
var oldValue = box1.offsetLeft;
}, 30);
};
}; //setInterval() - Timed call You can put a function Every other event is called , Time between calls In milliseconds //clearInterval() Can be used to turn off a timer function hello() {
alert('hello');
}
// 0.5s The timer that executes the function once after setTimeout(func[, delay, param1, param2, ...]) ： At a specified time interval （ In milliseconds ） The timer that calls the function once
setTimeout(hello, 500);
function hello() {
alert('hello');
}
// every other 1s The timer that repeats the function
setInterval(hello, 1000);
function hello() {
alert('hello');
// Clear the timer that executes only once
clearTimeout(t1)
}
// A timer that executes a function
t1 = setTimeout(hello, 3000);
// Haven't come yet. 5s Clear timer
hello();
function hello() {
alert('hello');
}
// The timer that repeats the function
var t1 = setInterval(hello, 1000);
function stop() {
// Clear the repeatedly executed timer
clearInterval(t1);
}
//<input type="button" value=" stop it " οnclick="stop();">
</script>
</head>
<body>
<button id="btn01"> After clicking the button box1 To the right </button>
<div id="box1"></div>
</body>
</html>
Two 、 Rotation interface
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * {
padding: 0;
margin: 0;
}
/* Set up outer The style of */
#outer {
width: 610px;
height: 470px;
margin: 50px auto;
background-color: greenyellow;
/* The upper and lower margins are 10px */
padding: 10px 0;
position: relative;
/* Crop photos that overflow */
overflow: hidden;
}
#imgList {
list-style: none;
/* Set up ul Width Overlap needs to set floating But I've put 590px Full , So make it open the whole line of elements on the right and let all five pictures be included */
position: absolute;
/* Set offset Every time ＋610*/
left: 0px;
}
#imgList li {
float: left;
margin: 0 10px;
}
/* Set navigation button */
#navDiv {
/* Turn on absolute positioning */
position: absolute;
bottom: 15px;
/* Set up left Value then centered */
left: 250px;
}
#navDiv a {
float: left;
width: 15px;
height: 15px;
margin: 0 5px;
background-color: red;
opacity: 0.5;
}
</style> <script> window.onload = function () {
// Set up imgList Width obtain imgList
var imgList = document.getElementById("imgList");
var imgArr = document.getElementsByTagName("img");
// Set up imgList Width
imgList.style.width = 610 * imgArr.length + "px";
// Get all a
var allA = document.getElementsByTagName("a");
// Set the default selected effect
// Click the hyperlink to switch to the picture Bind the click response function to all hyperlinks
for (var i = 0; i < allA.length; i++) {
// Add one for each hyperlink num attribute
allA[i].num = i; //0 1 2 3 4 // Bind the response function for the hyperlink allA[i].onclick = function () {
// Get the index of the click hyperlink ; And set it to index
index = this.num;
// Switch pictures
imgList.style.left = -610 * index + "px";
setA();
};
};
// Automatically switch pictures
autoChange();
// Create a method to set the selected a function setA() {
// Traverse all of a, And set their background color to red
for (var i = 0; i < allA.length; i++) {
allA[i].style.backgroundColor = "";
}
// Will be selected a, Set to black
allA[index].style.backgroundColor = "black";
}; // Create a function , Used to turn on automatic picture switching function autoChange(){
// Turn on a timer , Used to switch pictures regularly setInterval(function(){
// Self incrementing index
index++;
// Perform animation , Switch pictures move(imgList,"left",-610*index,20,function(){
// Modify navigation button
setA();
})
},3000);
};
};
</script>
</head>
<body>
<!-- Create an external div, As a big container -->
<div id="outer">
<!-- Create a ul, Used to place pictures -->
<ul id="imgList">
<li>
<img src="../../../ Picture material /q (1).jpg" alt="">
</li>
<li>
<img src="../../../ Picture material /q (2).jpg" alt="">
</li>
<li>
<img src="../../../ Picture material /q (3).jpg" alt="">
</li>
<li>
<img src="../../../ Picture material /q (4).jpg" alt="">
</li>
<li>
<img src="../../../ Picture material /q (6).jpg" alt="">
</li>
</ul>
<!-- Create navigation button -->
<div id="navDiv">
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</div>
</body>
</html>
3、 ... and 、BOM object
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/*BOM - Browser object model - BOM We can get us through JS To operate the browser - BOM object Window - Represents the entire browser window Navigator - Represents the current browser information , This object allows you to identify different browsers Location - Represents the address bar information of the current browser , adopt Location You can get the address bar information , Or operate the browser to jump to the page History - Represents the history of the current browser You can use this object to manipulate the browser's history Screen - Information representing the user's screen , Through this object, the relevant information of the user's display can be obtained */
// Use lowercase navigator
alert(navigator.appName);
alert(navigator.userAgent);
// If you pass UserAgent Can't judge , You can also use some objects held in the browser , To determine the browser's information
// such as :ActiveXObject
alert(window.ActiveXObject);
</script>
</head>
<body>
</body>
</html>
Four 、History and Location
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//History - Object can be used to manipulate the browser to page forward or backward
//lenght - attribute ： You can get the number of links currently accessed
//back() - Can be used to go back to the previous page , The function is the same as that of the browser .
alert(history.length);
window.οnlοad=function(){
// Get button object
var btn=document.getElementById("btn");
btn.οnclick=function(){
// history.back();
//forward Forward
// history.forward();
//go It can be used to jump to the specified page It takes an integer as a parameter
//1" Means to jump forward to a page amount to forward() 2: It means to jump forward two pages -1: It means to jump to a page -2： Means to jump back two pages
// history.go(-2);
// alert(location);// Print directly location, You can get the information in the address bar ( The full path of the current page )
location="https://www.bilibili.com/";
//assign() - Used to jump to other pages , Function and direct modification location equally
location.assign("https://www.bilibili.com/");
//reload() Used to reload the current page , It works the same as the refresh button location.reload(true);
//replace() - You can replace the current page with a new page , After calling, it will also jump to the page
};
}
</script>
</head>
<body>
<button id="btn"> Click on me </button>
</body>
</html>
5、 ... and 、JSON
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// Create an object
/* JS Objects in are JS I know myself , I don't know any other languages , JSON It is mainly used for data interaction in development - JSON - JavaScript Object Notation JS Object notation - JSON and JS The format of the object is the same , It's just JSON Property names in strings must be double quoted */
var obj={
"name":" The Monkey King ","age":18,"gender":" male "};
var arr='[1,2,3,"hello",true]';
console.log(typeof obj);//typeof Operator is used to determine the class of the object
</script>
</head>
<body>
</body>
</html>
边栏推荐
- @Solution to DS ('slave') multi data source compatible transaction problem
- Namespace conflict problem
- Bcompare key expired or bcompare license key revoked
- Error reason for converting string to long type: to convert to long type, it must be int, double, float type [easy to understand]
- Install scikit learn journey
- buuctf_ php
- PHP memory horse
- Use of beefs
- 35道MySQL面试必问题图解，小白都能看懂
- (function(global,factory){
猜你喜欢
Chapter II linear table
ssh服务
58 sub station Anju, broker marketing management platform login interface encryption reverse
多商户商城系统功能拆解17讲-平台端订单列表
Redis persistence
Knowledge map Foundation (I) - what is knowledge map
SSRF vulnerability
35道MySQL面试必问题图解，小白都能看懂
PS modify the length and width pixels and file size of photos
Redis configuration file explanation
随机推荐
网络安全应急响应具体操作流程
CONDA create, CONDA install, CONDA update error conda.core.subdir_ data.Response304ContentUnchanged
MySQL authorization method
Deploy flask on Alibaba cloud server
35道MySQL面试必问题图解，小白都能看懂
Redis-配置文件讲解
How many ways can multithread run in sequence?
16、 Launch file label of ROS (II)
Compilation failure caused by kotlin version upgrade
Hard disk partition method
Using keras to visualize the network model, failed to import pydot appears
CCSP 云安全设计原则都有哪些
Third class exercise
Idea2020.1.4 packages package collapse
Introduction to mqtt protocol
Compose learning notes 1-compose, state, flow, remember
[complete installation package & tutorial] sqlserver basic installation_ Sqlserver completely uninstalled_ Sqlserver custom installation_ Getting started with sqlserver_ SQLSERVER database
Talk about low code / zero code tools
MITK create module
Mysql使用left join连表查询时，因连接条件未加索引导致查询很慢