JavaScript 屏幕/浏览器/文档的高度/宽度/距离,对于数字的整数/小数/随机数的处理

各种对象

window.screen - 屏幕,
window - 窗口,
document.documentElement & document.body.parentNode - 文档,
document.body - 文档的主体。

各种属性(单位为px)

屏幕
window.screen.availHeight 屏幕可用高度;
window.screen.availWidth 屏幕可用宽度;
window.screen.height 屏幕总高度 = availHeight + 下方任务栏;
window.screen.width 屏幕总宽度 = availWidth + 右方任务栏(如果存在)。

窗口(浏览器)

window.screenLeft & window.screenX 浏览器左边框到屏幕左侧的水平距离;
window.screenTop & window.screenY 浏览器上边框到屏幕上侧的垂直距离;
window.outerHeight / window.outerWidth 窗口外部大小,即整个浏览器的大小;
window.innerHeight / window.innerWidth 窗口内部大小,即视口viwport的大小,包括水平/垂直滚动条;
window.onresize 事件是在 window.innerHeight / window.innerWidth 改变时触发的;
window.pageXOffset & window.scrollX 文档当前在水平方向上被卷掉的像素数;
window.pageYOffset & window.scrollY 文档当前在垂直方向上被卷掉的像素数。

元素

document.documentElement, document.body.parentNode 和 document.body 这三个元素节点都继承了element对象的多个只读的和可写的高度和宽度属性(“=” 右边加‘CSS’的属性为CSS中的属性):
element.clientHeight = CSS height + CSS padding - height of horizontal scrollbar (if present) 不包括边框,边距和水平滚动条;
element.clientWidth = CSS width + CSS padding - width of vertical scrollbar (if present) 不包括边框,边距和垂直滚动条;
element.clientTop = CSS border-top-width;
element.clientLeft = CSS border-left-width 如果文本方向被设为rtl ,而且左边有垂直滚动条,那么clientLeft包含滚动条宽度,例如:

JavaScript 中数字处理
  • 只保留整数部分(丢弃小数部分)
parseInt(5.1234); // 结果为 5
  • 向下取整(<= 该数值的最大整数)和 parseInt() 执行的结果一样
Math.floor(5.1234); // 结果为 5    
  • 向上取整(无论小数点后面是多大都取 1,整数部分加 1 为最后的结果)
Math.ceil(8.8888); // 结果  9
  • 四舍五入(小数部分大于 0.5 即入,小于就舍去)
Math.round(8.1234);// 结果 8
Math.round(8.6789);// 结果为 9  
  • 取绝对值
Math.abs(-8);//  结果为 8
  • 返回两者中的较大值
Math.max(7,8);//  结果为 8
  • 返回两者中的较小值
Math.min(7,8);//  结果为 7
  • 产生随机数
Math.random ();// 结果为 0-1之间的随机数
console.log(Math.random() * 100);// 结果为 0-100 的整数
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

心语微言

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值