HTML学习第三部分

JS

js引入.html

每句话后必须有分号

<script> //内部 prompt("请输入您的年龄") </script>

<!--外部-->

<script src="外部.js">

</script>

js.js

prompt("年龄")

输入输出语句

<script> //输入语句 //prompt（“”） //打印到页面 document.write（“天才”） document.write（“<strong>可以识别标签”） //控制台输出语句 console.log("我现在就要输出控制") </script>

变量

<script> prompt("输入数据") //变量：盒子--储存数据的容器 数据本身不是变量 //变量的声明 //let变量名 car 变量名 let age //变量赋值 age = prompt（“请输入您的年龄”） console.log("age")

//变量的初始化
let uname = prompt（“请输入用户名”）
 console.log("uname")

//同时定义多个变量

//let uname = “zz”，age = 21

//console.log("uname，age")

</script>

变量命名规范

// 变量命名规范：1有效符号（大小写字母、数字、下划线、$)

2关键字、保留字不能用

6不以数字开头

4尽量用有意义的变量名

5驼峰命名法

var可以多次声明同一变量

consl常量

//常量名大写

const PT = 3.14

//PT = 43

//console.log(PT)

基本数据类型

let a = 21

let b = 33

console.log(a)

console.log(a+2)

console.log(a/b)

字符串类型

 

document.write('<srong>你叫${uname},今年${age}岁了')

布尔类型

console.log(3＞5) false

//undefined 声明。未赋值

//null NAN 不是一个数字

显示转换

let a = prompt（“num1”）

let b = prompt（“num1”）

console.log(number（a) + number（b））

console.log(typeof（+a））

parseint拿出数字

运算符

 

比较符号

// > < >= ==只比较数值 ===既比较数值，也比较类型

逻辑运算符

//&&与 ||或 ！非

单分支语句

 

双分支

let age = +prompt（‘请输入您的年龄’）

if（age <= 18）{

alert‘你不要乱跑’}else{

alert（‘恭喜你，成年了’）}

多分支

if（）else if（） else

三元运算符号

//判断条件？条件成立时候执行：条件时候不成立时候执

a<=18?alert(‘XXX’)：alert（‘XXX’）

suitch语句

 

while循环

let i = 10

while（0<i<10）{

console.log('')

i--}

for循环

 

数组

<script> //let name1 = '俊杰' //有序的数据序列 let arr = ['gouxin,12,true'] //arr[索引下标] alert（arr[5]）

​ //let arr2=new Array()

//数组遍历

for（let i in arr）{

console.log（arr[i]）

}

//数组的操作

//通过索引下表给对应元素重新赋值

arr[1] = 'guanyu'

console.log（typeof（arr））

</script>

 

函数

<scrippt>

parseint('200px')

getsum(20,30)

//函数必须调用才会执行

function sayhi（）{

console.log（‘hello world’）}

</scrippt>

getSum（a，b）相加

//函数要有返回值，一定要添加return关键字

arguments 接受所有实参并保存到数组里

 

 

箭头函数

setintercal（（） = >{

console.log（‘i hate you’

}，1000

递归

//9！

//9*8！

//987！

function jiecheng（n）{

if （n === 1）[

return 1]

}else{

return n * jiecheng(n*1)}

alert(a)

字符串的常见方法

let str = ‘’

str.split('')

let arrobj

[

{

uname：‘zs’

}

]

console.log(arrobj)

for (let i = 0; i<arrobj[i]){

console.log(arrobj[i] [k])

}

随机抽奖案例

 

日期内置对象

let date//year//month//day//hh//mm//ss

= date.getfullyear

document.write('${year}年-￥{mouth}月')

let a = 3.3132122

alert（a.toFixed（4））

获取元素方法

1通过css

document.querySelector（‘.two’）

console.log(li2)

/document.querySelectorALL将所有匹配的元素全部获取到，并存放伪数组

const li = document.querySelector('li')

随机点名案例

//1获取元素

let arr = ['xxx','xxx']

const box = document.querySelector（’div‘）

//2.获取随机数 n-0 m---arr.length-1

let random = Math.floor(match.random()*arr.length)

box.innerHTML = '${arr[random]}'

arr.splice(random,1)

图片

 

修改元素样式属性

</style>

.box1{ width: height: background-color: font-size } </style>

《div class="box1"》1111《/di v》

《div》box2《/div》

<script> //获取元素 const box2 = document.querySelector('.box2') const div = document.querySelector('.box1') //通过style修改样式 div.style.width = '500px' div.style.fontSize='16px' div.style.backgroundColor = 'pink' //通过添加类名,className会将原来的类控制样式 box2.className = 'box1' //classlist box2.classlist.add('box1') </script>

定时器

、

 

let timer3 = setTimeout（fn（），1000）

function fn（）{

console.log（‘6666’）

}

//setTimeout（函数或一段代码，延迟时间，实参）

let timer4=setTimeout（function（a，b）{

console.log（a+b）

}，2000,1,4）

//setinterval 间隔一段时间，将代码或程序执行一次

setinterval（function（a，b）{

console.log（a+b）

},1000,2,3