JS概述
JS（JavaScript）是一种解释型脚本语言，运行在浏览器中，处理网页上行为（动作）
JS书写的位置
- 标签的事件
- script标签
- 外部文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 3.用script标签引入独立js文件 -->
<script src="./js/my.js"></script>
</head>
<body>
<!-- 1. onxxxx就是标签的事件，事件里面可以直接写js代码 -->
<input type="button" value="点我" onclick="alert()">
<!-- 2. script标签里面写js代码
一般放在/body之前
-->
<script type="text/javascript">
// alert()
</script>
</body>
</html>
注释
// 单行
/* 多行注释 */
输出信息
- alert() 弹出警告框
- console.log() 控制台输出
- document.write()
变量和函数定义
6种数据类型
-
string
-
number
-
boolean
-
object
-
function
-
symbol
-
3种对象类型
- object
- date
- array
-
变量定义
- var i = 10
- var s = ‘abc’
- var arr = []
- var obj = {}
- let a = 5
- const pi = 3.14
-
函数定义
参数没有类型
函数也没有返回类型，如果函数体有return语句就有返回；如果没有return语句，无返回
function fu1(arg1){
}
事件
- onclick 点击事件
- onchange 内容改变事件，一般用于输入框
- onmouseover 鼠标滑过事件，类似hover
- onload 页面加载事件
- onfocus 获得焦点事件，一般用户输入框
练习：js控制标签的显示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width: 100px;
height: 100px;
background-color: red;
display: none;
}
</style>
</head>
<body>
<input type="button" value="显示" onclick="show()">
<div class="box" id="box">
</div>
<script type="text/javascript">
//alert();
// 浏览器调试窗口的控制台输出
console.log("hello js");
// 浏览器窗口输出
document.write('<h1>标题</h1>') //js的字符串可以单引号或双引号
//让div标签显示
function show(){
//获取标签对象
let box = document.getElementById('box')
//设置标签的样式
box.style.display = 'block'
}
</script>
</body>
</html>
DOM操作
(Document Object Model ,文档对象模型,简称DOM)
-
获取标签对象
document.getElementById() 根据id获取标签
document.getElementsByTagName() 根据标签名获取标签
document.getElementsByClassName() 根据class获取标签
document.querySelector() 根据选择器获取标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选择标签</title>
</head>
<body>
<div id="box1">
</div>
<div class="box">
</div>
<div class="box">
</div>
<script type="text/javascript">
let box1 = document.getElementById('box1');
console.log(box1);
let box2 = document.querySelector('#box1')
console.log(box2);
// 返回标签数组，可用下标取其中的某一个，也可以遍历
let boxs = document.getElementsByTagName('div')
console.log(boxs);
console.log(boxs[0]);
for(let i=0; i<boxs.length; i++){
console.log(boxs[i]);
}
let boxs2 = document.getElementsByClassName('box')
console.log(boxs2);
</script>
</body>
</html>
-
改变标签的样式和内容
style.xxx 设置或读取样式
innerText 设置或读取标签的文本内容
innerText 设置或读取标签的文本内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>改变标签的样式或内容</title>
<style type="text/css">
#box{
width: 100px;
height: 100px;
background-color: red;
position: relative;
color: white;
}
</style>
</head>
<body>
<input type="button" value="改变标签" onclick="change()">
<div id="box">
</div>
<script type="text/javascript">
function change(){
let box = document.getElementById('box')
/* 标签的样式名称在css中用-连接多个单词如background-color;
在js中用驼峰命名方式 backgroundColor */
box.style.backgroundColor = 'blue'
box.style.width = '200px'
box.style.height = '200px'
box.style.left = '500px'
// innerText 改变标签的文字内容
box.innerText = 'Js改变的内容'
// 改变标签的子标签
box.innerHTML = '<p>p1</p><p>p2</p>'
console.log(box.innerHTML);
}
</script>
</body>
</html>
value 读取或设置输入框的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单标签的读写</title>
</head>
<body>
<input type="button" value="读输入框的值" onclick="read()">
<input type="button" value="输入框赋值" onclick="setValue()">
<br>
<input type="text" id="txt1">
<script type="text/javascript">
let txt1 = document.getElementById('txt1')
function read(){
console.log(txt1.value)
} f
unction setValue(){
// 创建日期对象
let d = new Date();
txt1.value = d.getTime()
}
</script>
</body>
</html>
练习：加法器
-
NaN Not a Number, 有时数字运算方法不能返回数字时，就可能返回NaN
isNaN()方法可以判断一个变量是否是数字
-
undefined 当一个变量未定义，它就是undefined
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>加法器</title>
<style type="text/css">
span{
cursor: pointer;
font-size: 25px;
}
</style>
</head>
<body>
<input type="text" id="op1"> +
<input type="text" id="op2">
<span onclick="sum()">=</span>
<input type="text" id="sum">
<script type="text/javascript">
function sum(){
//debugger //断点
let op1 = document.getElementById('op1')
//parseInt()把字符串转整数
let value1 = parseInt(op1.value)
let op2 = document.getElementById('op2')
let value2 = parseInt(op2.value)
// + 对字符串就是拼接， 对数字才是相加
let valueSum = add(value1, value2)
let sum = document.getElementById('sum')
sum.value = valueSum
} f
unction add(v1, v2){
return v1 + v2
}
</script>
</body>
</html>
- 改变标签的属性
obj.xxx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>修改标签的属性</title>
<style type="text/css">
#pic{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<input type="button" value="修改图片" onclick="chgPic()">
<img src="./img/animal1.jpeg" id="pic">
<script type="text/javascript">
let imgs =
['./img/animal1.jpeg','./img/animal2.jpg','./img/animal3.gif','./img/animal4.jpg
']
let index = 1
function chgPic(){
let pic = document.getElementById('pic')
//修改标签的属性
pic.src = imgs[index]
index++
if(index >= 4){
index = 0;
}
}
</script>
</body>
</html>
练习：广告轮播图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>广告轮播图</title>
<style type="text/css">
#pic{
width: 200px;
height: 200px;
} #
list li{
float:left;
margin:10px;
cursor:pointer;
}
</style>
</head>
<body>
<img src="./img/animal1.jpeg" id="pic">
<ul id="list">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script type="text/javascript">
let imgs =
['./img/animal1.jpeg','./img/animal2.jpg','./img/animal3.gif','./img/animal4.jpg
']
let index = 1
let pic = document.getElementById('pic')
function chgPic(){
//修改标签的属性
pic.src = imgs[index]
index++
if(index >= 4){
index = 0;
}
} /
* 定时函数:
第一个参数是要执行的方法
第二个参数是定时时间,单位毫秒 */
setInterval(()=>{
chgPic()
}, 3000);
let lis = document.getElementsByTagName('li')
for(let i=0; i<lis.length; i++){
//给标签添加自定义属性n, 用来记录标签的序号
lis[i].n = i;
lis[i].onmouseover = (e)=>{
// debugger
pic.src = imgs[e.target.n]
}
}
</script>
</body>
</html>
练习：
- js中var与let的区别？
old：
使用var来声明变量，这些变量在函数内或全局范围内都可见。
使用let来声明变量，这些变量在花括号 {} 内可见，外面不可见。
另外：
如果使用var，变量的声明会被提升到作用域的顶部，但值会是undefined。
如果使用let，在变量声明之前引用会导致错误，直到声明的地方。
JavaScript推荐使用let，因为它更符合直观的作用域概念，避免了一些潜在问题。
new：
var只有全局和函数变量；let还支持代码块局部变量
var可以重复定义；let不能重复定义
- 动态生成10个div
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动态输出10横向排列的div</title>
<style type="text/css">
.box{
width: 100px;
height: 100px;
border: 1px solid red;
display: inline-block;
margin: 10px;
}
body{/*1.flex 2.inline-block 3.float 4 position: ;*/
/* display: flex; */
/* justify-content: space-between; */
}
</style>
</head>
<body>
<!-- 1.先用HTML把画面效果写出来 -->
<!-- <div class="box">
</div>
<div class="box">
</div> -->
<script type="text/javascript">
for(let i=0; i<10;i++){
// 2.再用js写效果, 通常使用字符串拼接 或者write直接写内容
// document.write('<div class="box">'+
// '</div>')
document.body.innerHTML += '<div class="box">'+
'</div>'
}
</script>
</body>
</html>
- 输入框输入课程名称，点击添加按钮，在下面的列表增加一项
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>输入框输入课程名称，点击添加按钮，在下面的列表增加一项 </title>
<style type="text/css">
ul{
list-style: circle;
}
</style>
</head>
<body>
<input type="text" id="txt"> <!--输入框是行内元素，不换行-->
<input type="button" value="添加" onclick="add()">
<ul id="list1">
<!-- <li>Java</li>-->
</ul>
<script type="text/javascript">
// 定义add函数
function add(){
// 获取输入框
let txt = document.getElementById('txt');
// 读取输入框的value
let v = txt.value;
// 把value添加到列表
let list1 = document.getElementById('list1')
// list1.innerHTML += '<li>Java</li>';
list1.innerHTML += '<li>'+v+'</li>';
}
</script>
</body>
</html>
- 动画效果：
一个div, 从左向右移动500px的位置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>4. 动画效果:一个div, 从左向右移动500px的位置 </title>
<style type="text/css">
.box{
width: 100px;
height: 100px;
border: 1px solid red;
position: relative;
}
</style>
</head>
<body>
<div id="box" class="box"></div>
<script type="text/javascript">
let i = 0; //初始位置
// 需要一个定时器
let timer = setInterval(() => {
// 获取标签
let box = document.getElementById('box');
// box.style.left += "10px"
i += 10; //位置移动 10
// 设置left样式
box.style.left = i + "px"
if(i >= 500){
// 清除（停止）定时器。 参数是setInterval() 方法的返回值
clearInterval(timer);
}
}, 100) //回调函数使用lambda表达式书写 ，一个形参的情况下（）可以省略
</script>
</body>
</html>
- 完善广告轮播图
把圆点放到图片里面
在图片所有各放一个上一张和下一张的按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>广告的轮播</title>
<style type="text/css">
#pic {
width: 100%;
height: 100%;
}
#list {
position: absolute;
bottom: -30px;
left: 40px;
}
#list li {
/* list-style: ; */
float: left;
margin: 10px;
cursor: pointer;
/* 图标大小随字体大小改变 */
font-size: 30px;
opacity: 0.4;
}
.active {
color: red;
}
.outer {
width: 200px;
height: 200px;
position: relative;
}
.next, .prev {
width: 20px;
height: 20px;
background-color: gray;
border-radius: 50%;
color: white;
/* 内容居中 */
text-align: center;
line-height: 20px;
cursor: pointer;
opacity: 0.5;
position: absolute;
top: 90px;
}
.next {
position: absolute;
right: 0;
}
</style>
</head>
<body>
<div class="outer">
<img src="./img/animal1.jpeg" id="pic">
<ul id="list">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="next" onclick="go(1)">
>
</div>
<div class="prev" onclick="go(-1)">
<
</div>
</div>
<script type="text/javascript">
let imgs = ['./img/animal1.jpeg', './img/animal2.jpg', './img/animal3.gif', './img/animal4.jpg'];
let index = 1; /* 全局变量*/
let pic = document.getElementById('pic');
let lis = document.getElementsByTagName('li')
function go(i) {
index += i;
if (index >= 4) {
index = 0;
}
if (index < 0) {
index = imgs.length - 1;
}
pic.src = imgs[index];
// 清楚所有li的class
clearClassName();
lis[index].className = "active";
}
function chgPic() {
// 清楚所有li的class
clearClassName();
lis[index].className = "active";
// 修改标签的属性
pic.src = imgs[index];
index++;
if (index >= 4) {
index = 0;
}
}
/* 定时函数:
第一个参数是要执行的方法
第二个参数是定时时间，单位毫秒 */
setInterval(() => {
chgPic()
}, 3000);
for (let i = 0; i < lis.length; i++) {
// 给标签添加自定义属性n,用来记录标签的序号
lis[i].n = i;
lis[i].onmouseover = (e) => {
// 清楚所有li的class
clearClassName();
// debugger
pic.src = imgs[e.target.n]
index = e.target.n;
e.target.className = "active"
}
}
function clearClassName() {
for (let j = 0; j < lis.length; j++) {
// 清除所有li的class
lis[j].className = "";
}
}
</script>
</body>
</html>
扫一扫
204
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
