实现代码
//禁止页面横屏
//因为目前还没有找到强制改变设备横竖屏状态的方法,因此选择了曲线救国
//当横屏时,提醒用户竖屏并屏蔽页面内容
window.addEventListener('orientationchange',function(){
// 这个时候屏幕的尺寸数据还没有变化
var orientation = window.orientation;
let body = this.document.querySelector("body");
if(window.orientation != 0){
alert('这是横屏,请竖屏查看!');
body.style.display = 'none';
return;
}
if(window.orientation == 0){
body.style.display = 'block';
return;
}
})
监听事件
// 监听屏幕转动 //关键词:orientationchange事件、window的orientation属性
window.addEventListener('orientationchange',function(){
// 这个时候屏幕的尺寸数据还没有变化
var orientation = window.orientation;
switch(orientation){
case 90:
case -90:
orientation = 'landscape'; //这里是横屏
break;
default:
orientation = 'portrait';//竖屏
}
})
//orientation有三个数值:0,90,-90
//0表示竖屏,90,-90代表横屏(其实还有个180,代表翻转过来的竖屏,但这种至今未实现)
小结
//获取xo标签attribute属性的值
$(xo).attr(attribute)
//设置attribute属性的值为value
$(xo).attr(attribute, value)
//设置多个attribute属性的值value们
$(xo).attr({attribute1: value1, attribute2: value2})
本文结尾推荐一个前端程序猿们必备的导航网站,里面各种素材在线工具样样齐全,话不多说自己体会吧