目录
2.想：记录笔记，下次不用看视频，直接看笔记就可以快速回忆。
一.目的
1.想：学习前端知识
2.想：记录笔记，下次不用看视频，直接看笔记就可以快速回忆。
二.参考
1.我自己代码的GitHub网址
GitHub - xzy506670541/WebTest: SIKI学院的Web前端
2.SIKI学院:我参考此视频实操
- 我参考此视频实操
3.w3school官网:当做字典使用
4.菜鸟教程：当做字典使用
5.Web前端第一季(HTML):我自己写的笔记博客
6.Web前端第二季(CSS):我自己写的笔记博客
三.注意
操作:1:成功:604-数组的创建、访问和遍历
1.运行结果:成功:
数组
1、创建数组
var myArray=new Array()
var mycars=new Array(3) 数组的长度是不固定的
var mycars=new Array("Saab","Volvo","BMW")
2、访问数组元素和设置数组元素
mycars[0]
mycars[0]="Opel"
3、取得数组长度
arr.length
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var arr=new Array();
arr[0]=10;
arr[1]=20;
arr[2]=30;
arr[3]=40;
arr[4]=50;
arr[6]=60
arr[7]="xzy";
console.log(arr[3]);
//输出没有定义的数组元素
console.log("输出没有定义的数组元素:"+arr[5]);
//JS数组灵活，可以添加不同的数据类型
console.log(arr[7]);
//输出：输出长度
console.log("输出长度:"+arr.length);
// 遍历输出数组内容
for(i=0;i<arr.length;i++)
{
console.log(arr[i]);
}
</script>
</head>
<body>
</body>
</html>
操作:2:成功:605-数组的其他用法
1.运行结果:成功:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//创建数组的：第一种
// var arr = new Array();
// arr[0] = 10;
// arr[1] = 20;
// arr[2] = 30;
// arr[3] = 40;
// arr[4] = 50;
// arr[6] = 60
// arr[7] = "xzy";
// console.log(arr[3]);
// //输出没有定义的数组元素
// console.log("输出没有定义的数组元素:" + arr[5]);
// //JS数组灵活，可以添加不同的数据类型
// console.log(arr[7]);
// //输出：输出长度
// console.log("输出长度:" + arr.length);
// // 遍历输出数组内容
// for (i = 0; i < arr.length; i++) {
// console.log(arr[i]);
// }
//创建数组：第二种
// var arr2 = new Array(10);
// for (i = 0; i < arr2.length; i++) {
// console.log(arr2[i]);
// }
//创建数组：第三种
// var arr3 = new Array(10,20,30,40,"李白");
// for (i = 0; i < arr3.length; i++) {
// console.log(arr3[i]);
// }
//user函数：构造函数
function user(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
}
var user4_1 = new user("李白",
18, "男");
var user4_2 = new user("孙尚香",
19, "女");
var user4_3 = new user("曹操",
20, "男");
var arr4 = new Array(user4_1, user4_2, user4_3);
for (i = 0; i < arr4.length; i++) {
console.log(arr4[i].name);
}
</script>
</head>
<body>
</body>
</html>
操作:3:成功:606-图片轮播的优化
1.运行结果:成功:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
//div设置样式
div {
width: 900px;
height: 500px;
margin: 0 auto;
}
//img设置样式
div img {
width: 900px;
height: 500px;
}
</style>
<script type="text/javascript">
// 初始化:避免未加载完毕，执行动作产生问题，
function init() {
//1.定时器:执行动作:只会执行一次
// window.setTimeout(changeImg, 2000);
// 2.定时器：重复做事情
window.setInterval(changeImg, 2000);
}
//数组：图片路径
var arr_imgPath=new Array(
"./img/海绵宝宝-1.jpeg",
"./img/海绵宝宝-2.jpeg",
"./img/海绵宝宝-3.jpeg"
);
var img_index = 0;
//更改图片
function changeImg() {
nextImg();
}
//点击上一张
function preImg() {
var my_img = document.getElementById("my_img");
img_index--;
if (img_index < 0) {
img_index = arr_imgPath.length-1;
}
my_img.src = arr_imgPath[img_index];
}
//点击下一张图片按钮
function nextImg() {
var my_img = document.getElementById("my_img");
img_index++;
if (img_index >= arr_imgPath.length) {
img_index = 0;
}
my_img.src = arr_imgPath[img_index];
}
</script>
</head>
<body onload="init()">
<p align="center">
<button type="button" onclick="preImg()">上一张</button>
<button type="button" onclick="nextImg()">下一张</button>
</p>
<div>
<img src="img/海绵宝宝-1.jpeg" id="my_img">
</div>
</body>
</html>
操作:4:成功:+607-广告弹窗和关闭
1.运行结果:成功:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--
选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#"来定义。 以下的样式规则应用于元素属性 id="para1":
-->
<style type="text/css">
#ad {
width:
300px;
height:
300px;
background-color:
red;
position: fixed;
bottom: 0px;
right: 0px;
display: none; //暂时不显示
}
</style>
<script type="text/javascript">
//初始化
function init() {
// window.setTimeout(showAD, 2000);
//每隔3秒显示一次广告
window.setInterval(showAD,3000);
}
//显示广告
function showAD() {
var ad = document.getElementById("ad");
ad.style.display = "block";
}
//关闭广告
function closeAD() {
var ad = document.getElementById("ad");
ad.style.display = "none";
}
</script>
</head>
<body onload="init()">
<!-- 目的：让浏览器出现拖动框，表示右下角弹窗一直在右下角 -->
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="ad">
<button type="button" onclick="closeAD()">关闭</button>
</div>
</body>
</html>