javascript
javascript
1. 获取非行间样式
1.1 获取行间样式
- 标签.style.样式名 如果样式名是-链接 使用驼峰命名 例如font-size fontSize
- 标签.style.样式名 只能获取行间样式
// 1.获取行间样式
// 标签.style.样式名 只能获取行间样式
var oDiv = document.getElementsByTagName("div")[0];
console.log(oDiv.style.color);// "pink"
console.log(oDiv.style.width);//""
1.2 获取非行间样式和行间样式
-
标准浏览器(火狐 谷歌 欧朋 safari IE(9-11))
- window.getComputedStyle(标签).样式名
// 标准浏览器 window.getComputedStyle(标签).样式名 var w = window.getComputedStyle(oDiv).width; console.log(w);// 300px var h = window.getComputedStyle(oDiv).height; console.log(h);// 300px var bgcolor = window.getComputedStyle(oDiv).backgroundColor console.log(bgcolor);//rgb(255, 0, 0) var color = window.getComputedStyle(oDiv).color; console.log(color);// rgb(255, 192, 203) var ftsize = window.getComputedStyle(oDiv).fontSize; console.log(ftsize);//50px -
IE低版本浏览器(IE5-8)
- 标签.currentStyle.样式名
// IE低版本 标签.currentStyle.样式名 var w1 = oDiv.currentStyle.width; console.log(w1);// 300px var h1 = oDiv.currentStyle.height; console.log(h1);// 300px var bgcolor1 = oDiv.currentStyle.backgroundColor; console.log(bgcolor1);// red var color1 = oDiv.currentStyle.color; console.log(color1);// pink var ftsize1 = oDiv.currentStyle.fontSize; console.log(ftsize1);// 50px -
兼容
-
判断方法1 window.getComputedStyle这个方法是否存在
// 1.判断浏览器 判断用户是运行在标准浏览器 还是IE低版本浏览器 /* 标准浏览器(谷歌 火狐 欧朋 safari ie(9-11)) window.getComputedStyle.样式名 IE低版本(ie5-8) 标签.currentStyle.样式名 window.getComputedStyle //这是js内置的一个方法(函数) */ console.log(window.getComputedStyle);//标准浏览器输出 ƒ getComputedStyle() { [native code] } IE低版本浏览器 undefined console.log(Boolean(window.getComputedStyle));// true console.log(Boolean(undefined));//false //判断方法1 window可以省略 但是作为判断条件的时候不能省略 if (window.getComputedStyle) {//true 会隐式转换成布尔类型 console.log("标准浏览器") var w = window.getComputedStyle(oDiv).width; console.log(w) } else {//false console.log("IE低版本浏览器"); var w = oDiv.currentStyle.width; console.log(w); } -
判断方法2 判断 标签.currentStyle 这个方法是否存在
<script> var oDiv = document.getElementsByTagName("div")[0]; /* 标准浏览器(谷歌 火狐 欧朋 safari ie(9-11)) window.getComputedStyle.样式名 IE低版本(ie5-8) 标签.currentStyle.样式名 */ //判断方法2 console.log(oDiv.currentStyle)//IE低版本输出 [object Object] 标准浏览器undefined if(oDiv.currentStyle){//true IE低版本浏览器 console.log("IE低版本") var w = oDiv.currentStyle.width; console.log(w); }else{//false 标准浏览器 console.log("标准浏览器") var w = window.getComputedStyle(oDiv).width; console.log(w); } </script>
-
2.函数封装与代码复用
2.1 函数封装
函数封装的步骤
- 声明一个函数 把主要代码放进去
- 找函数中可变的值作为参数 将参数带入函数中 并且返回出去
- 调用调试
<body>
<div style="color:pink;font-size: 50px;"></div>
<p style="width:500px"></p>
<script>
var oDiv = document.getElementsByTagName("div")[0];
/*
函数封装
1.声明一个函数 把主要代码放进去
2.找函数中可变的值作为参数 将参数带入函数中 并且返回出去
3.调用调试
*/
function getStyle(elem, attr) { //elem 标签元素 attr是样式名
// 1.判断浏览器
if (window.getComputedStyle) {//true 标准浏览器
var w = window.getComputedStyle(elem)[attr];
return w
} else {//false IE浏览器
var w = elem.currentStyle[attr];
return w;
}
}
//获取div的样式
var a = getStyle(oDiv, "width");
console.log(a);//300px
var b = getStyle(oDiv, "height")
console.log(b);//300px
//获取p的样式
var oP = document.getElementsByTagName("p")[0];
var a1 = getStyle(oP, "width");
console.log(a1);//500px
</script>
2.2 代码复用
- 什么时候使用代码复用
- 功能一样 结构一样的使用 用for循环不好实现的时候
- 代码复用的实现步骤
- 把这个功能先当成一组去实现 里面的标签都是通过父元素获取
- 先去实现一组的功能
- 把这一组功能放入到函数中 把父元素作为参数
- 调用测试
<script>
/*
- 把这个功能先当成一组去实现 里面的标签都是通过父元素获取
- 先去实现一组的功能
- 把这一组功能放入到函数中 把父元素作为参数
- 调用测试
*/
//1.获取元素
var list = document.getElementsByTagName("li");
// //第一个li
// add(list[0])
// add(list[1])
// add(list[2])
// add(list[3])
for (var i = 0; i < list.length; i++) {
add(list[i]);
}
// 5.声明一个函数
function add(parent) {
//2.通过父元素获取li里面的标签
var btn = parent.getElementsByTagName("button");
var oSpan = parent.getElementsByTagName("span");
// 3.点击+
btn[1].onclick = function () {
// 只要是从页面获取内容都是string类型
oSpan[0].innerHTML++;// ++ 会自动隐式转换
// oSpan[0].innerHTML = Number(oSpan[0].innerHTML)+1 + 不会隐式转换
oSpan[2].innerHTML = (oSpan[0].innerHTML * oSpan[1].innerHTML).toFixed(2)
}
// 4.点击-
btn[0].onclick = function () {
oSpan[0].innerHTML--;//-- 也会隐式转换
if (oSpan[0].innerHTML < 0) {
oSpan[0].innerHTML = 0
}
oSpan[2].innerHTML = (oSpan[0].innerHTML * oSpan[1].innerHTML).toFixed(2)
}
}
</script>
3.定时器
3.1 定时器介绍
- 定时器的分类
- 延时定时器
- 语法: setTimeout(函数，时间)
- 作用： 延迟一定的时间再去执行函数里面的代码，只会执行一次
- 使用场景 ：广告弹窗
- 间歇定时器
- 语法：setInterval(函数，时间)
- 作用：每隔一定的时间就去执行函数中的代码 会执行多次
- 使用场景：轮播图 倒计时 计时器 抽奖
- 延时定时器
- 注意:定时器的时间单位是ms 1s = 1000ms
3.2 延时定时器
- setTimeout(函数,时间)
<script>
// 1.延时定时器
console.log("开始");
setTimeout(function(){
console.log("3秒之后才会执行这里的代码")
},3000)
// 2.广告弹窗 3秒之后开始显示广告弹窗
var oDiv = document.getElementsByTagName("div")[0];
setTimeout(function(){
oDiv.style.display = "block";
},3000)
// 3.定时器中的函数可以提前定义
setTimeout(fn1,3000);
function fn1(){
console.log("你一会输出123");
}
</script>
3.3 间歇定时器
- setInterval(函数,时间)
<body>
<div>0</div>
<script>
// 1.间歇定时器
setInterval(function () {
console.log("我隔一会就执行")
}, 3000)
// 2.函数可以提前定义
function fn1() {
console.log(123);
}
setInterval(fn1, 3000);
// 3.页面数字累加 每隔1秒+1;
var oDiv = document.getElementsByTagName("div")[0];
setInterval(function () {
oDiv.innerHTML++;
}, 1000)
</script>
</body>
3.4 同步和异步(了解)
- 代码的执行执行顺序
<script>
/*
同步执行:在做一件事情的时候 如果这件事没有做完，后面的代码就只能等待
同步执行 alert() for
异步执行：在做一件事情的时候 如果这件事需要花费一定的时间 会先执行后面的代码，然后再回头执行处理这件事
*/
//同步执行
alert("提示");
console.log(123);
for(var i = 0;i<10000;i++){
}
console.log(456)
// 异步执行 setTimeout就是一个异步执行 无论时间是多少
console.log("开始");
setTimeout(function(){
console.log(123);
},0)
console.log("结束")
</script>
3.5清除定时器
- 定时器一旦开始就不会自动结束,必须手动清除
- clearTimeout(定时器id) 手动清除延时定时器(很少用)
- clearInterval(定时器id) 手动清除间歇定时器
- 定时器id: 每一个定时器在开始的时候，js都会返回一个能唯一标识当前定时器的id，默认都是从1开始
- 定时器一旦停止就没有了，如果后续需要定时器 需要再次定义
<body>
<script>
// 1 定时器id
var a = setInterval(function(){},1000);
console.log(a);
var b = setInterval(function(){},1000);
console.log(b);
var c = setInterval(function(){},1000);
console.log(c);
clearInterval(c);
// 2.倒计时效果 倒计时是从10开始 到0停止
var n = 10;
auto();//为了解决定时器第一次执行的延迟 可以提前调用函数
function auto(){
// 将结果显示在页面上 document.body快速获取body标签
document.body.innerHTML = n;
n--;
if(n<0){
clearInterval(timer);//清除定时器
}
}
var timer = setInterval(auto,1000)
</script>
</body>
- 自动切换图片
<body>
<img src="./img/1.jpg" alt="">
<script>
// 1.获取元素
var oImg = document.getElementsByTagName("img")[0];
var arr = [
"./img/1.jpg",
"./img/2.jpg",
"./img/3.jpg",
"./img/4.jpg",
]
var n = 0;
function auto() {
n++;
if (n > 3) {
n = 0;
}
oImg.src = arr[n];
}
// 每隔1秒切换一张图片
var timer = setInterval(auto, 1000)
// 2.滑入图片 停止定时器
oImg.onmouseover = function () {
// 停止定时器
clearInterval(timer)
}
// 2.滑出图片 开启定时器
oImg.onmouseout = function () {
// 定时器一旦停止就没有了，如果后续需要定时器 需要再次定义
timer = setInterval(auto, 1000) // 如果带var 就变成局部变量
}
</script>
</body>
4.函数封装使用
- 先创建common.js文件
/*
*作用:获取非行间样式和行间样式
*params elem 标签
*params attr String 样式名
*/
function getStyle(elem,attr){
if(window.getComputedStyle){ //标准浏览器
return window.getComputedStyle(elem)[attr];
}else{//IE低版本浏览器
return elem.currentStyle[attr];
}
}
- 在页面中使用
<script src="./common.js"></script>
<body>
<div style="color: red;font-size: 20px;"></div>
<script>
console.log(getStyle)
var oDiv = document.getElementsByTagName("div")[0]
var a = getStyle(oDiv, "color");
console.log(a);
var b = getStyle(oDiv, "fontSize");
console.log(b);
</script>
</body>
4.1 小鸟起飞案例
js中如果涉及到元素移动 建议使用定位
4.2 开始起飞(从左往右飞)
- 实现步骤
- 点击按钮 改变img的left值
- left值 = 在当前left值的基础上 + 10
- 开启定时器 自动移动图片位置
<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 src="./common.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
img {
width: 200px;
height: 200px;
position: absolute;
left: 0px;
}
</style>
</head>
<body>
<button>开始飞</button>
<br>
<img src="./img/right.gif" alt="">
<script>
// 1.点击一下 向右移动10px
var btn = document.getElementsByTagName("button")[0];
var oImg = document.getElementsByTagName("img")[0];
// 2.点击事件
btn.onclick = function () {
setInterval(function () {
// 在left值的基础上+10 先获取到left值
var current = parseInt(getStyle(oImg, "left")) + 10
oImg.style.left = current + "px";
}, 50)
}
</script>
</body>
- 问题1 一直飞 飞出屏幕
- 解决: 限制飞的范围 当飞到1000px的手 停止定时器
// 2.点击事件
btn.onclick = function () {
var timer = setInterval(function () {
// 在left值的基础上+10 先获取到left值
var current = parseInt(getStyle(oImg, "left")) + 10
if(current>=1000){
current = 1000;
// 停止定时器
clearInterval(timer)
}
console.log(current);
oImg.style.left = current + "px";
}, 50)
}
- 问题2 多次点击 速度越来愉快
- 分析原因: 每次点击都会定义一个定时器 多次点击会导致定时器累加 会累加执行
- 解决方法:每次点击的时候 先把原先的定时器清除掉
<script>
// 1.点击一下 向右移动10px
var btn = document.getElementsByTagName("button")[0];
var oImg = document.getElementsByTagName("img")[0];
var timer;
// 2.点击事件
btn.onclick = function () {
clearInterval(timer);// timer这里存储的就是定时器id 先把原先的定时器清除掉
timer = setInterval(function () {
// 在left值的基础上+10 先获取到left值
var current = parseInt(getStyle(oImg, "left")) + 10
if(current>=1000){
current = 1000;
// 停止定时器
clearInterval(timer)
}
console.log(current);
oImg.style.left = current + "px";
}, 50)
}
</script>
4.3 来回飞(从右往左飞)
- 实现步骤
- 在left值的基础上 -10
- 问题1:解决目标值的问题 飞到0就停止
// 2.往回飞
btn[1].onclick = function () {
// 改变图片的路径
oImg.src = "./img/left.gif";
timer = setInterval(function () {
// 在当前left值的基础上-10
var current = parseInt(getStyle(oImg, "left")) - 10;
//判断目标值
if(current<=0){
current=0;
clearInterval(timer);
}
oImg.style.left = current + "px"
}, 50)
}
- 问题1 如果点击开始起飞 但是飞到一半就返回 和越飞越快的问题
- 解决方法 让开始起飞和结束起飞共用一个定时器 每次点击的时候 都清除定时器
<script>
// 1.点击一下 向右移动10px
var btn = document.getElementsByTagName("button");
var oImg = document.getElementsByTagName("img")[0];
var timer;
// 2.开始飞
btn[0].onclick = function () {
// 改变图片路径
oImg.src = "./img/right.gif";
clearInterval(timer);// timer这里存储的就是定时器id 先把原先的定时器清除掉
timer = setInterval(function () {
// 在left值的基础上+10 先获取到left值
var current = parseInt(getStyle(oImg, "left")) + 10
if (current >= 1000) {
current = 1000;
// 停止定时器
clearInterval(timer)
}
console.log(current);
oImg.style.left = current + "px";
}, 50)
}
// 2.往回飞
btn[1].onclick = function () {
// 改变图片的路径
oImg.src = "./img/left.gif";
clearInterval(timer);
timer = setInterval(function () {
// 在当前left值的基础上-10
var current = parseInt(getStyle(oImg, "left")) - 10
if(current<=0){
current=0;
clearInterval(timer);
}
oImg.style.left = current + "px"
}, 50)
}
</script>
4.4小鸟起飞函数封装
4.4.1 基础封装
<body>
<button>开始飞</button>
<button>往回飞</button>
<br>
<img src="./img/right.gif" alt="">
<script>
// 1.点击一下 向右移动10px
var btn = document.getElementsByTagName("button");
var oImg = document.getElementsByTagName("img")[0];
var timer;
// 2.开始飞
btn[0].onclick = function () {
// 改变图片路径
oImg.src = "./img/right.gif";
move(oImg, "left", 10, 1000)
}
// 2.往回飞
btn[1].onclick = function () {
// 改变图片的路径
oImg.src = "./img/left.gif";
move(oImg, "left", -10, 0)
}
// 3.基础封装
/*
封装的步骤
1.先声明一个函数 将主要代码放入到函数中
2.找函数中可变的值 作为函数参数代入到函数中
3.调用调试
*/
function move(elem, attr, step, target) {
/*
elem 操作的元素
attr 属性
step 步长 可以是正数 也可以是负数 + 10 + -10
target 目标值
*/
clearInterval(timer);// timer这里存储的就是定时器id 先把原先的定时器清除掉
timer = setInterval(function () {
// 在left值的基础上+10 先获取到left值
var current = parseInt(getStyle(elem, attr)) + step
if(current>=target){
current = target;
// 停止定时器
clearInterval(timer)
}
console.log(current);
elem.style[attr] = current + "px";
}, 50)
}
</script>
</body>
4.4.2 解决目标值
- 问题1:目标值问题
- 分析原因
- 开始飞 if (current >= target)
- 往回飞 if (current <= target)
- 解决方法:根据step判断
- 开始飞 step 10 > 0
- 往回飞 step 10 < 0
- 分析原因
<body>
<button>开始飞</button>
<button>往回飞</button>
<br>
<img src="./img/right.gif" alt="">
<script>
// 1.点击一下 向右移动10px
var btn = document.getElementsByTagName("button");
var oImg = document.getElementsByTagName("img")[0];
var timer;
// 2.开始飞
btn[0].onclick = function () {
// 改变图片路径
oImg.src = "./img/right.gif";
move(oImg, "left", 10, 1000)
}
// 2.往回飞
btn[1].onclick = function () {
// 改变图片的路径
oImg.src = "./img/left.gif";
move(oImg, "left", -10, 0)
}
/*
问题1:目标值问题
分析原因
开始飞 if (current >= target)
往回飞 if (current <= target)
解决方法
根据step判断
开始飞 step 10 > 0
往回飞 step 10 < 0
*/
function move(elem, attr, step, target) {
/* elem 移动的元素 attr 改变的属性 step步长 可以是正数也可以是负数 target目标值 */
clearInterval(timer);// timer这里存储的就是定时器id 先把原先的定时器清除掉
timer = setInterval(function () {
// 在left值的基础上+10 先获取到left值
var current = parseInt(getStyle(elem, attr)) + step
if (step > 0 && current >= target) {
current = target;
// 停止定时器
clearInterval(timer)
} else if (step < 0 && current <= target) {
current = target;
clearInterval(timer);
}
elem.style[attr] = current + "px";
}, 50)
}
</script>
</body>
4.4.3 解决step正负数问题
- 问题2:用户不考虑step正负数的问题
- 解决方法：判断current值和target值
current target- 开始飞 0 < 1000 +step
- 往回飞 1000 > 0 - step
- 解决方法：判断current值和target值
<body>
<button>开始飞</button>
<button>往回飞</button>
<br>
<img src="./img/right.gif" alt="">
<script>
// 1.点击一下 向右移动10px
var btn = document.getElementsByTagName("button");
var oImg = document.getElementsByTagName("img")[0];
var timer;
// 2.开始飞
btn[0].onclick = function () {
// 改变图片路径
oImg.src = "./img/right.gif";
move(oImg, "left", 10, 1000)
}
// 2.往回飞
btn[1].onclick = function () {
// 改变图片的路径
oImg.src = "./img/left.gif";
move(oImg, "left", 10, 0)
}
/*
问题1:目标值问题
分析原因
开始飞 if (current >= target)
往回飞 if (current <= target)
解决方法
根据step判断
开始飞 step 10 > 0
往回飞 step 10 < 0
*/
/*
问题2:用户不考虑step正负数的问题
解决方法
current target
开始飞 0 < 1000 +step
往回飞 1000 > 0 -step
*/
function move(elem, attr, step, target) {
/* elem 移动的元素 attr 改变的属性 step步长 可以是正数也可以是负数 target目标值 */
//解决步长
step = parseInt( getStyle(elem,attr) ) < target ? step:-step
clearInterval(timer);// timer这里存储的就是定时器id 先把原先的定时器清除掉
timer = setInterval(function () {
// 在left值的基础上+10 先获取到left值
var current = parseInt(getStyle(elem, attr)) + step
//解决目标值
if (step > 0 && current >= target) {
current = target;
// 停止定时器
clearInterval(timer)
} else if (step < 0 && current <= target) {
current = target;
clearInterval(timer);
}
elem.style[attr] = current + "px";
}, 50)
}
</script>
</body>
4.4.4 函数封装最终版
- common.js
/*
*author 朱银娟
*作用 让样式运动
* params elem 标签
* params attr string类型 样式名
* params step numbre类型 步长
* params target number类型 目标值
*/
function move(elem, attr, step, target) {
/* elem 移动的元素 attr 改变的属性 step步长 可以是正数也可以是负数 target目标值 */
step = parseInt( getStyle(elem,attr) ) < target ? step:-step
clearInterval(elem.timer);// timer这里存储的就是定时器id 先把原先的定时器清除掉
elem.timer = setInterval(function () { //将定时器id存储到标签的自定义属性timer上
// 在left值的基础上+10 先获取到left值
var current = parseInt(getStyle(elem, attr)) + step
if (step > 0 && current >= target) {
current = target;
// 停止定时器
clearInterval(elem.timer)
} else if (step < 0 && current <= target) {
current = target;
clearInterval(elem.timer);
}
elem.style[attr] = current + "px";
}, 50)
}
- 在页面中使用
<script>
var btn = document.getElementsByTagName("button")[0];
var oDiv = document.getElementsByTagName("div")[0];
btn.onclick = function(){
// move(oDiv,"width",20,500);
move(oDiv,"height",10,100);
}
</script>
5. 轮播图
5.1 轮播图-交互
- 问题1 最后一张切换到第一张的时候 会倒着移动
- 分析原因：最后一张图到第一张图 是left值-2400px 到 0px的过程 就有倒叙效果
- 解决方法：在最后再添加第一张图片 给用户造成视觉差
- 问题2:最后一张图片的指示点对应不上
- 分析原因： n = 4 oSpan[4]不存在
- 解决方法：n=4是第一张图片 让oSpan[0]设置背景色
<script>
// 1.自动切换 定时器
var list = document.getElementsByClassName("list")[0];
var oSpan = document.getElementsByTagName("span");
var oBox = document.getElementsByClassName("box")[0];
var timer = setInterval(auto, 1000);
var n = 0;
function auto() {
// 显示第一张 left -800px*0
// 显示第二张 left -800px*1
// 显示第三张 left -800px*2
// 显示第四张 left -800px*3
// 显示第一张 left -800px*4
n++;
if (n > 4) {
list.style.left = "0px";
n = 1;
}
move(list, "left", 100, -800 * n);
/*
问题1 最后一张切换到第一张的时候 会倒着移动
解决方法：在最后再添加第一张图片 给用户造成视觉差
*/
// 改变指示点颜色
for (var i = 0; i < oSpan.length; i++) {
oSpan[i].style.backgroundColor = "#fff";
}
/*
问题2:最后一张图片的指示点对应不上
分析原因：n = 4 oSpan[4]不存在
解决方法：n=4是第一张图片 让第一个指示显示
*/
if (n == 4) {
oSpan[0].style.backgroundColor = "red"
} else {// n= 1 2 3 让对应span显示红色背景
// 第一张图 oSpan[0] 第二章图 oSpan[1]
oSpan[n].style.backgroundColor = "red";
}
}
// 2.划入盒子 停止图片切换
oBox.onmouseover = function () {
clearInterval(timer);
}
// 3.滑出盒子 开启图片切换
oBox.onmouseout = function () {
timer = setInterval(auto, 1000)
}
// 4.点击左箭头 切换图片
// 5.点击右箭头 切换图片
// 6.点击指示点 切换图片
</script>
6. 对象概念
-
对象： 在JS中万物皆对象，可以将对象分为“内部对象”、“宿主对象”和“自定义对象”三种。
-
本地对象「内部对象」：JS中的内部对象包括Array、Boolean、Date、Function、Global、 Math、Number、Object、RegExp、String，Error对象， 其中Global和Math这两个对象又被称为“内置对象”，这两个对象在脚本程序初始化时被创建，不必实例化这两个对象。
-
宿主对象：宿主对象就是执行JS脚本的环境提供的对象，就是浏览器提供的对象，如window和document
-
自定义对象
-
-
API
- API，全称Application Programming Interface，即应用程序编程接口。说白了就是别人提供好的函数，但是这些函数都是封装好的，固定功能的，可以直接调用实现功能的。 例如遥控器，不同的按键不同的功能，都是提前定义好的
7. Math对象
7.1 取整
- parseInt 强制转换Number类型 从左往右开始转换 遇到不能转换的或者末尾结束 如果一开始就不能转换则是NaN 结果取整
- Math.floor 向下取整 舍弃小数部分
- Math.ceil 向上取整 有小数就进位
- Math.round 四舍五入 取整
<script>
// 1.Math对象 是内置对象 不需要实例化即可使用
console.log(Math);
// 2.取整
// parseInt 强制转换Number类型 从左往右开始转换 遇到不能转换的或者末尾结束 如果一开始就不能转换则是NaN 结果取整
console.log(parseInt("123px"));//123
console.log(parseInt("10.5px"));//10
console.log(parseInt("adc123"));//NaN
// Math.floor 向下取整 舍弃小数部分
console.log(Math.floor(10.5));// 10
console.log(Math.floor(10.9));// 10
console.log(Math.floor(3.9999999));// 10
console.log(Math.floor(3.000000000001));// 10
// Math.ceil 向上取整 有小数就进位
console.log(Math.ceil(10.5));//11
console.log(Math.ceil(10.1));//11
console.log(Math.ceil(3.9999999));//4
console.log(Math.ceil(3.00000001));//4
// Math.round 四舍五入 取整
console.log(Math.round(3.4)); //3
console.log(Math.round(3.5));// 4
console.log(Math.round(3.00000001));//3
console.log(Math.round(3.09999001));//3
</script>
7.2 数学方法
- Math.max(数值1,数值2…) 找序列中最大的值
- Math.min(数值1,数值2…) 找序列中最小的值
- Math.abs( ) 取绝对值
- Math.sqrt( ) 开根号
- Math.pow(num,n) 次方幂 num底数 n n次幂
// 1.数学方法
// Math.max(数值1,数值2......) 找序列中最大的值
console.log(Math.max(1,2,3,4,5));//5
// Math.min(数值1,数值2......) 找序列中最小的值
console.log(Math.min(1,2,3,4,5));//1
// Math.abs 取绝对值
console.log(Math.abs(-10));// 10
// Math.sqrt() 开根号
console.log(Math.sqrt(9));//3
console.log(Math.sqrt(81));//9
// Math.pow(num,n) 次方幂 num底数 n n次幂
console.log(Math.pow(2,10));// 1024
console.log(Math.pow(10,2));// 100
7.3 随机数
- Math.random() 随机生成0-1之间的数 包括0 不包括1
- 公式 生成min到max之间的随机数
- Math.random() * (max-min+1) + min
<script>
var a = Math.random(); //随机0-1之间的数
console.log(a);
//1. 随机1-10之间的数据 Math.random() * (max-min+1) + min
var b = Math.floor( Math.random() * 10 + 1 ) // [1 11]
console.log(b);
- 随机抽奖
// 2.随机抽奖
var arr = ["玛莎拉蒂","宾利","北京2套房","上海汤臣一品","十月一能买到车票回家"]
// 0-4(arr.length-1) 求0到arr.length-1之间的随机数
var index =Math.floor( Math.random() * (arr.length-1-0+1) + 0 );
console.log(arr[index])
</script>
扫一扫
1088
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
