目录
demo1-js入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
1,编写js的入门案例, 在浏览器弹出一个警告框
-->
<!-- 下面的type可写可不写 -->
<script type="text/javascript">
// 弹出一个警告框
alert("hello, 警告来了");
</script>
<!--
2,从外部引入一个js文件,执行警告
-->
<script src="js/demo.js"></script>
</head>
<body>
</body>
</html>
demo2-js的数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
一, 基本类型的定义
1, undefined 未定义类型
2, boolean 布尔类型
3, number 数值类型
4, string 字符串类型
二, 引用类型
new 对象的方式
三, 关键字判断变量属于哪个类型
使用typeof:
alert(typeof 变量名);
四, 特殊情况
null →→→ 类型是object
五, 注意事项
1)js属于弱语法类型, 写的时候不用特别规范也不会报错
例如:
分号不写不会报错
定义变量不写关键字也不会报错
2)js属于弱数据类型, 定义变量是使用var 代表通用类型, 具体类型由值决定
-->
<script>
//1, 没有给初始化的变量, undefined
var un;
// alert(un); // undefined 表示值
// alert(typeof un); //undefined 表示类型
//2, 布尔类型 boolean
var bo = true;
// alert(bo);
// alert(typeof bo);
//3, 数值类型 number
var num1 = 100;
var num2 = -100;
var num3 = 10.11;
// alert(num1);
// alert(num2);
// alert(num3);
// alert(typeof num1); //number
// alert(typeof num2); //number
// alert(typeof num3); //number
//4, 字符串类型 string
var str = 'abc';
var str2 = "cba";
// alert(str);
// alert(str2);
// alert(typeof str); //string
// alert(typeof str2); //string
//5, 引用类型
var str3 = new String("字符串内容")
// alert(str3);
// alert(typeof str3); // object
var date = new Date();
// alert(date); //Sat Nov 07 2020 19:08:48 GMT+0900 (日本标准时间)
// alert(typeof date); // object
//6, 判断null的类型
var n = null;
// alert(n); //null
// alert(typeof n); //object
//7, 弱语法 (不推荐下面的写法)
var s = "abc"
// alert(s);
ss = 'aaa';
// alert(ss);
//8, 弱类型
var v = 123;
alert(typeof v); //number
v = 'bbb';
alert(typeof v); //string
</script>
</body>
</html>
demo3-运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/*
1, 算术运算符
+ - * / ++ --
2, 赋值运算符
= += -= *= /= %=
3, 比较运算符
== === > < >= <=
4, 逻辑运算符
&& || !
*/
// 1, 算术运算符
// + - * / ++ --
// var num1 = 10;
// var num2 = 20;
// var num3 = "30";
// alert(num1 + num2); //30
// alert(num1 + num3); //1030 结论:字符串参与加法,则拼接
// alert(num2 - num1); //10
// alert(num3 - num1); //10 结论:字符串参与减法, 则转成数值再减法
// 2, 赋值运算符
// = += -= *= /= %=
// var str1 = "abc";
// str1 = 123;
//alert(str1);
// num3 += 10;
// alert(num3); //3010 +=有字符串也拼接
// num3 -= 10;
// alert(num3); //20 -=先转为数值,再参与运算
// 3, 比较运算符
// == === > < >= <=
// var n = 10;
// var m = 20;
// var n1 = "10";
// var m1 = "20";
// alert(n == n1); //true == 只比较内容,不比较类型
// alert(n === n1); //false === 全等于, 比较内容和类型
// alert(m > n1); //true 比较过程中, 转换成数值
// 4, 逻辑运算符
// && || !
var n = 10;
var m = 20;
var n1 = "10";
var m1 = "20";
alert((m>n) && 3 == 4);
//基本和javase一样
</script>
</head>
<body>
</body>
</html>
demo4-运算符2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/*
运算符中的布尔运算
1,如果变量是一个undefined, 直接判断该变量可以得到一个boolean 为false
2,如果变量类型是number,如果是0,则为false 如果非0,则为true
3,类型是string, 空字符串为false,非空为true
4,变量是null,判断结果为false
5,类型是object, 判断为true
*/
// var s;
// var s = -10;
// var s = "bbb";
// var s = null;
var s = new Date();
if(s) {
alert(true);
} else {
alert(false); //false
}
</script>
</head>
<body>
</body>
</html>
demo5-js语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//1, for循环方式1
// for(var i = 1; i <= 3; i++) {
// alert(i);
// }
//2, for循环的格式2
// var arr = [11, 22, 33, 44];
// for(index in arr) {
// alert(arr[index]);
// }
//3. for循环格式3
var arr = [11, 22, 33, 44];
for(element of arr) {
alert(element);
}
</script>
</head>
<body>
</body>
</html>
demo6-js函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/*
1, 第一种定义函数和调用函数的格式\
定义:
function 函数名(形参列表) {
函数内容;
return 返回值; // 如果需要返回则写, 不需要返回可以不写
}
调用:
函数名(实参列表);
*/
function sum(num1, num2) {
return num1 + num2;
}
// var result = sum(10, 20);
// alert(result);
/*
2, 定义匿名函数
定义:
var 变量名 = function(形参列表) {
函数体;
return 返回值;
}
调用:
变量名(参数);
*/
var fun = function(str) {
alert(str);
}
fun("hello");
</script>
</head>
<body>
</body>
</html>
demo7-js事件入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function fun() {
alert("点我干什么");
}
</script>
</head>
<body>
<!--
创建一个按钮, 给按钮上绑定一个单击事件, 关联一个函数, 点击时触发
-->
<input type="button" value="我的按钮" onclick="fun()"/>
</body>
</html>
demo8-js事件练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/*
事件介绍:
window.onload 页面加载函数,当整个html页面加载完毕之后执行该该事件关联的函数.
onload 某个页面或图像被完成加载
onsubmit 当表单提交时触发该事件---注意事件源是表单form
需求描述:
1.页面加载完毕执行函数
2.body加载完毕,执行函数
3.提交表单事件
*/
//1, 页面加载完毕执行函数
// window.onload = function(){
// alert("整个html页面加载完毕!");
// }
//2, body加载完毕, 执行函数
// function load(){
// alert("body内容加载完毕");
// }
//3, 提交表单事件
function validate(){
//可以在该方法中验证用户在表单中输入的内容是否合理,返回true和false代表可否提交
return true;
}
</script>
</head>
<body onload="load()">
<form action="demo1-js入门.html" onsubmit="return validate()">
用户名<input type="text" name = "username" /> <br>
<input type="submit" value="提交">
</form>
</body>
</html>
demo9-js事件练习02
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
border: 1px solid red;
width: 200px;
height: 200px;
}
</style>
<script>
/*
事件介绍:
onclick 鼠标点击 ondblclick 鼠标双击某
onblur 失去焦点 onfocus 获得焦点
onchange 用户改变域的内容 onmouseenter 某个鼠标进入元素
onmousedown 鼠标按下 onmouseup 鼠标按键松开
onmouseout 鼠标从某元素移开
需求:
1.在页面上给定2个按钮,第一个按钮绑定单击事件; 第二个按钮绑定双击事件 (关联函数)
2.在页面上写一个input type=text 文本框; 绑定一个 光标失去事件
3.在页面上写一个input type=text 文本框; 绑定一个 获取光标事件
4.编写一个下拉框,绑定一个 onchange 内容改变事件
5.写div ,设置宽度和高度边框; onmouseenter 鼠标进入事件 ; onmousedown 某个鼠标按键被按下 ;
onmouseup 某个鼠标按键被松开 ; onmouseout 鼠标从某元素移开
*/
//1.在页面上给定2个按钮,第一个按钮绑定单击事件; 第二个按钮绑定双击事件 (关联函数)
function fun1() {
alert("你单击我了");
}
function fun2() {
alert("你双击我了");
}
// 2.在页面上写一个input type=text 文本框; 绑定一个 光标失去事件
function fun3() {
alert("失去了光标");
}
// 3.在页面上写一个input type=text 文本框; 绑定一个 获取光标事件
function fun4() {
alert("获取了光标");
}
// 4.编写一个下拉框,绑定一个 onchange 内容改变事件
function fun5() {
alert("选项改变了");
}
// 5.写div ,设置宽度和高度边框; onmouseenter 鼠标进入事件 ; onmousedown 某个鼠标按键被按下 ;
// onmouseup 某个鼠标按键被松开 ; onmouseout 鼠标从某元素移开
function enter() {
//鼠标进入, div背景色改为黄色
document.getElementById("mydiv").style.backgroundColor="yellow";
}
function down() {
//鼠标按下, div背景色改为绿色
document.getElementById("mydiv").style.backgroundColor="green";
}
function up() {
//鼠标松开, div背景色改为红色
document.getElementById("mydiv").style.backgroundColor="red";
}
function out() {
//鼠标移出, div背景色改为蓝色
document.getElementById("mydiv").style.backgroundColor="blue";
}
</script>
</head>
<body>
<form action="demo1-js入门.html">
<input type="button" value="单击我" onclick="fun1()"><br>
<input type="button" value="双击我" ondblclick="fun2()"><br>
<input type="text" name="username" placeholder="将要失去光标" onblur="fun3()"><br>
<input type="text" name="age" placeholder="将要获取光标" onfocus="fun4()"><br>
<select name="city" id="" onchange="fun5()">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="shenzhen">深圳</option>
</select><br>
</form>
<div id="mydiv" onmouseenter="enter()" onmousedown="down()" onmouseup="up()" onmouseout="out()"></div>
</body>
</html>
demo10-js事件派发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 按照加载顺序,要放在body下面, 但是使用页面加载函数可以加载完后执行 -->
<script>
/*
创建一个按钮, 给按钮一个id, 使用事件派发的方式给按钮派发一个单击事件, 关联一个函数
页面加载函数:
window.onload = function() {
整个页面加载完毕之后执行的内容
}
注意事项:
如果是派发时间, js代码如果要写在html代码上面, 需要写在页面加载函数中才可以执行,
或者js代码直接写在html的body下方
*/
window.onload = function(){
document.getElementById("btn").onclick = function(){
alert("单击事件执行");
}
}
</script>
</head>
<body>
<input type="button" value="按钮" id="btn">
</body>
</html>
demo11-js-window
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/*
1. 提示框：alert(提示信息); //前两种用的更多
2. 确认框：confirm(提示信息);
3. 输入框：prompt(提示信息);
补充: 凡是window的属性和方法, window调用过程中都可以省略不写
*/
// window.alert("这是提示框");
// var flag = confirm("您确认删除吗?"); // 如果点击了确认,会返回true, 点击取消会返回false
// alert(flag);
var result = prompt("请输入您的用户名");
alert(result);
</script>
</head>
<body>
</body>
</html>
demo12-js周期定时任务
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/*
1, 方法1,周期执行任务方法
setInterval(js脚本片段/函数, 毫秒值); //interval 间距, 间隔
2, 方法2: 取消周期执行任务
clearInterval(周期执行任务id);
*/
// window.setInterval("alert('hello')",2000);
function fun(){
alert("hello");
}
var resultId = setInterval("fun()",2000);
// 该方法运行可以停止周期执行任务
function stopInternal() {
clearInterval(resultId);
}
</script>
</head>
<body>
<input type="button" value="停止周期执行任务" onclick="stopInternal()">
</body>
</html>
demo13-js定时任务
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/*
1. setTimeout(js代码/函数,毫秒值); 执行一次的定时器
2. clearTimeout(定时器的id值); 取消执行一次的定时器
*/
// setTimeout("alert('你好啊')",3000); // timeout 暂停
function fun() {
alert("欢迎大家");
}
var resultId = setTimeout("fun()", 2000);
function stopTimeOut() {
clearTimeout(resultId);
}
</script>
</head>
<body>
<input type="button" value="取消定时任务" onclick="stopTimeOut()">
</body>
</html>
demo14-js全局转换方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/*
parseInt(被转换的内容) 把字符串转成number类型
pareFloat() 把字符串的数值转成number类型
*/
// var num1 = 100;
// var num2 = "200";
//计算num1和num2的和
// var result = num1 + num2;
// alert(result); // 100200 结果为字符串拼接
// var result2 = num1 + parseInt(num2);
// alert(result2); // 结果为数值 300
var n1 = 11.15;
var n2 = "11.15";
// var result = n1 + n2; // 拼接
var result = n1 + parseFloat(n2); //22.3
alert(result);
</script>
</head>
<body>
</body>
</html>
demo15-location对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/*
location: 根据后面的内容进行跳转
属性:
href 跳转到指定的路径,点击回车
方法:
reload() 重新加载页面
补充:页面跳转的方式有几种?
1, 超链接跳转 <a href="路径">内容</a>
2, 表单提交 按钮<input type="submit" >
3, location对象 href 给按钮添加事件,让其跳转
*/
function goTo() {
location.href="demo1-js入门.html";
}
function reLoad() {
location.reload();
}
</script>
</head>
<body>
<input type="button" value="页面跳转" onclick="goTo()"> <br/>
<input type="button" value="重新加载" onclick="reLoad()">
</body>
</html>
demo17-dom获取元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// 1.定义一个button ,给设置value,也给id; 通过document.getElelentById("id值") 获取的是元素节点 , 及按钮的 value值,打印
function getElement() {
var element = document.getElementById("btn");
// alert(element); //[object HTMLInputElement]
alert(element.value);
}
// 2.定义一个input框,设置name属性值一致,获取2个input框元素,打印里面的值
function getElements() {
var elements = document.getElementsByName("myname");
// alert(elements.length); // 2
for(var i = 0; i < elements.length; i++) {
alert(elements[i].value);
}
}
// 3.定义2个input框,设置class属性值一致,getElelmetsByClassName("class名称"); 获取里面的值,打印
function getClassElements() {
var elements = document.getElementsByClassName("cls");
// alert(elements.length); // 2
for(element of elements) {
alert(element.value);
}
}
// 4.获取所有的input ,打印里面的值 ,通过getElementsByTagName("标签名称")获取.
function getTagElements() {
var elements = document.getElementsByTagName("input");
for(element of elements) {
alert(element.value);
}
}
</script>
</head>
<body>
<input type="button" value="我的按钮123" id="btn"> <br> <br>
根据name属性获取元素:<input type="text" name="myname" value="我的值1" > <br>
根据name属性获取元素:<input type="text" name="myname" value="我的值2" > <br> <br>
根据class属性获取元素:<input type="text" class="cls" value="我的值3"> <br>
根据class属性获取元素:<input type="text" class="cls" value="我的值4"> <br> <br>
根据标签获取元素:<input type="text" value="我的值5"> <br>
根据标签获取元素:<input type="text" value="我的值6"> <br>
<hr>
<input type="button" value="点击按钮获取value值" onclick="getElement()">
<input type="button" value="根据name获取对应元素及value值" onclick="getElements()">
<input type="button" value="根据class获取对应元素及value值" onclick="getClassElements()">
<input type="button" value="根据TagName获取对应元素及value值" onclick="getTagElements()">
</body>
</html>
demo18-dom设置标签体内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// 对象.innerXXX
//定义一个p段落标签,<font color='red'>我的字体</font>
//1.使用innserHTML 获取P标签体中间的HTML内容;
function fun1() {
//1. 获取到p标签
var pElement = document.getElementById("pid");
//2. pElement.innerHTML
alert(pElement.innerHTML);
}
//2.使用innerText获取P标签中间的TEXT内容
function fun2() {
//1. 获取到p标签
var pElement = document.getElementById("pid");
//2. pElement.innerText
alert(pElement.innerText);
}
//3.使用innerHTML,给P标签中设置HTML内容, 直接使用 赋值形式
function fun3() {
//1. 获取到p标签
var pElement = document.getElementById("pid");
pElement.innerHTML = "<font size='20px' color='blue'>我的新字体内容</font>";
}
//4.使用innerText,给P标签设置TEXT内容, 直接使用 赋值形式
function fun4() {
//1. 获取到p标签
var pElement = document.getElementById("pid");
pElement.innerText = "<i>内容被更换了....</i>";
}
</script>
</head>
<body>
<p id="pid">
<font color="red"><strong>我的字体</strong></font>
</p>
<hr>
<input type="button" value="使用innserHTML 获取P标签体中间的内容" onclick="fun1()">
<input type="button" value="使用innerText获取P标签中间的内容" onclick="fun2()">
<input type="button" value="使用innerHTML,给P标签中设置内容(带html)" onclick="fun3()">
<input type="button" value="使用innerText,给P标签设置文本" onclick="fun4()">
</body>
</html>
demo19-dom属性操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// 对象.getAttribute("属性名")
// 对象.setAttribute("属性名", "属性值")
// 对象.使用removeAtrribute
// 定义一个input框, name属性值 value属性值
// 1.点击按钮,使用getAtrribute(name) 获取name属性值和value属性值
function fun1() {
var inputElement = document.getElementById("inputId");
var name = inputElement.getAttribute("name");
var val = inputElement.getAttribute("value");
alert("name = " + name + ", value = " + val);
}
// 2.点击按钮,使用setAtrribute(name,value)给value修改内容
function fun2() {
var inputElement = document.getElementById("inputId");
inputElement.setAttribute("value", "jack")
}
// 3.点击按钮,使用removeAtrribute(name)删除value值
function fun3() {
var inputElement = document.getElementById("inputId");
inputElement.removeAttribute("value");
}
</script>
</head>
<body>
<input type="text" name="username" value="tom" id="inputId" />
<hr>
<input type="button" value="获取name属性值和value属性值" onclick="fun1()">
<input type="button" value="使用setAtrribute(name,value)给value修改内容" onclick="fun2()">
<input type="button" value="使用removeAtrribute(name)删除value值" onclick="fun3()">
</body>
</html>
demo20-内置对象-String
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>String对象</title>
<script>
/*
1.String对象如何创建
2.String对象的属性
length 长度
3.String对象的方法
*/
//1.String对象如何创建
//var str = "abc";
//var str1 = new String("abcdef");
// alert(str);
// alert(typeof str); //string
// alert(str1);
// alert(typeof str1); //object
//2.String对象的属性
//alert(str.length);
//alert(str1.length);
//3.String对象的方法
//var str = "abcdefghcba";
// charAt(x) 返回在指定位置的字符
//alert(str.charAt(1));
// indexOf(x) 检索字符串
//alert(str.indexOf("cde"));
//alert(str.indexOf("b"));
// lastIndexOf(x) 从后向前搜索字符串。
//alert(str.lastIndexOf("b"));
// split(x) 把字符串分割为字符串数组。
//var str = "aa,bb,cc,dd,ee";
//var strArr = str.split(",");
//alert(strArr);
//alert(strArr[1]);
//for(var i = 0; i < strArr.length ;i++){
// alert(strArr[i]);
//}
// substring(开始索引,结尾索引) 获取两个索引之间的字符,包含头,不包含尾
var str = "abcdefg";
//var result = str.substring(1,3); //bc
//alert(result);
// substr(开始索引) 获取的是开始索引到结尾之间的字符
//var result = str.substr(3) ; //defg
//alert(result);
// substr(开始索引,字符个数) 从开始索引开始,获取指定个数个字符
var result = str.substr(2,3); //cde
alert(result);
</script>
</head>
<body>
</body>
</html>
demo21-内置对象-Array
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Array数组对象</title>
<script>
//1.如何创建Array数组对象
/*
new Array();
new Array(size);
new Array(element0, element0, ..., elementn);
[element0, element0, ..., elementn]
*/
var arr1 = new Array();
var arr2 = new Array(3);
var arr3 = new Array(1,2,3,true,"abc");
var arr4 = [11,"bb",false];
// alert(arr1);
// alert(arr2);
// alert(arr3);
// alert(arr4);
//2.Array的属性
// length长度
// alert(arr1.length);
// alert(arr2.length);
// alert(arr3.length);
// alert(arr4.length);
//3.Array数组的特性
/*
1) js中数组没有数组下标越界异常
2) js中数组的长度是不固定的,如果超出范围,自动扩充.
3) js中数组元素的类型是可以多种的.
var arr3 = new Array(1,2,3,true,"abc"); //当作集合看待
*/
arr2[0] = 1;
arr2[1] ="abc";
arr2[2] = "bbb";
arr2[3] = "ccc"; //js的数组长度会自动扩大
alert(arr2);
alert(arr2.length);
</script>
</head>
<body>
</body>
</html>
demo22-轮播图案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#img_id {
width: 880px;
}
div {
margin-top: 150px;
margin-left: 250px;
}
</style>
</head>
<body>
<!-- 思路分析：
1.创建页面内容
创建一个div ，div中包含了3个图片
2.设置div 3个图片的样式
3.编写js让图片滚动起来
准备工作：
1.jpg 2.jpg 3.jpg left.png right.png
-->
<div>
<img src="img/left.png" onclick="pre()" style="width: 70px; vertical-align: middle; margin-top: -300px;">
<img src="img/1.jpg" id="img_id">
<img src="img/right.png" onclick="next()" style="width: 70px; vertical-align: middle; margin-top: -300px">
</div>
</body>
<script>
//1.定义一个记录图片值的全局变量 count
var count = 1;
//2.编写pre()方法,切换到前一张图片
function pre(){
count--;
if(count <=0){
count = 3;
}
//设置图片的src属性,更变图片
document.getElementById("img_id").src="./img/"+count+".jpg"; // ./ 代表当前路径
}
//3.编写next()方法,切换到下一张图片
function next(){
count++;
if(count > 3){
count = 1;
}
//设置图片的src属性,更变图片
document.getElementById("img_id").src="./img/"+count+".jpg";
}
//设置周期执行函数
window.setInterval(next,2000);
</script>
</html>
扫一扫
990
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
