在我们日常前端开发或者工作中，经常会遇到HTML页面提交表单，弹出手机键盘出现各种各样的兼容性问题。android终端还是ios终端弹出异常等。下面总结了基础的处理弹出键盘的兼容性问题，以供参考。//判断是android终端还是ios终端 $("document").ready(function () { var m = navigator.userAgent; var isAndroid = m.indexOf('Android') > -1 || m.indexOf('Adr') > -1; //android终端 var isIos = !!m.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 var timer; if (isIos) { // ios 弹出与收起软键盘执行事件 document.body.addEventListener('focusin', () => { //软键盘弹起事件 $(".footer").css('position', 'relative'); $('.mask').css({'height':'200%','top':'-50%'}); window.addEventListener("touchmove", () => { $("input").blur(); }); }) document.body.addEventListener('focusout', () => { //软键盘关闭事件 $(".footer").css('position', 'fixed'); $('.mask').css('height','100%'); // 解決ios端用微信打开页面，收起软键盘后，底部出现空白问题 setTimeout(() => { const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0; window.scrollTo(0, Math.max(scrollHeight - 1, 0)); }, 100); }) } if (isAndroid) { // android 弹出与收起软键盘执行事件 const innerHeight = window.innerHeight; window.addEventListener('resize', () => { const newInnerHeight = window.innerHeight; if (innerHeight > newInnerHeight) { // 键盘弹出事件处理 $(".footer").hide(); } else { // 键盘收起事件处理 $(".footer").show(); } }); } });

1.第一个3D案例—透视投影相机Threejs如果想把三维场景Scene渲染到web网页上，还需要定义一个虚拟相机Camera，就像你生活中想获得一张照片，需要一台用来拍照的相机。a.透视投影相机PerspectiveCameraThreejs提供了正投影相机OrthographicCamera (opens new window)和透视投影相机PerspectiveCamera (opens new window)。本节课先给大家比较常用的透视投影相机PerspectiveCamera。透视投影相机PerspectiveCamera本质上就是在模拟人眼观察这个世界的规律。// 实例化一个透视投影相机对象 const camera = new THREE.PerspectiveCamera();b.相机位置.posiiotn生活中用相机拍照，你相机位置不同，拍照结果也不同，threejs中虚拟相机同样如此。比如有一间房子，你拿着相机站在房间里面，看到的是房间内部，站在房子外面看到的是房子外面效果。相机对象Camera具有位置属性.posiiotn，通过位置属性.posiiotn可以设置相机的位置。//相机在Three.js三维坐标系中的位置 // 根据需要设置相机位置具体值 camera.position.set(200, 200, 200); c.相机观察目标.lookAt()你用相机拍照你需要控制相机的拍照目标，具体说相机镜头对准哪个物体或说哪个坐标。对于threejs相机而言，就是设置.lookAt()方法的参数，指定一个3D坐标。//相机观察目标指向Threejs 3D空间中某个位置 camera.lookAt(0, 0, 0); //坐标原点 camera.lookAt(0, 10, 0); //y轴上位置10 camera.lookAt(mesh.position);//指向mesh对应的位置d.判断相机相对三维场景中长方体位置你可以把三维场景中长方体mesh想象为一个房间，然后根据相机位置和长方体位置尺寸对比，判断两者相对位置。你可以发现设置相机坐标(200, 200, 200)，位于长方体外面一处位置。// 长方体尺寸100, 100, 100 const geometry = new THREE.BoxGeometry( 100, 100, 100 ); const mesh = new THREE.Mesh(geometry,material); // 相机位置xyz坐标：0,10,0 mesh.position.set(0,10,0); // 相机位置xyz坐标：200, 200, 200 camera.position.set(200, 200, 200); e.定义相机渲染输出的画布尺寸你生活中相机拍照的照片是有大小的，对于threejs而言一样，需要定义相机在网页上输出的Canvas画布(照片)尺寸，大小可以根据需要定义，这里先随机定义一个尺寸。Canvas画布：课程中会把threejs虚拟相机渲染三维场景在浏览器网页上呈现的结果称为Canvas画布。// 定义相机输出画布的尺寸(单位:像素px) const width = 800; //宽度 const height = 500; //高度f.透视投影相机PerspectiveCamera：视锥体透视投影相机的四个参数fov, aspect, near, far构成一个四棱台3D空间，被称为视锥体，只有视锥体之内的物体，才会渲染出来，视锥体范围之外的物体不会显示在Canvas画布上。// width和height用来设置Three.js输出的Canvas画布尺寸(像素px) const width = 800; //宽度 const height = 500; //高度 // 30:视场角度, width / height:Canvas画布宽高比, 1:近裁截面, 3000：远裁截面 const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);PerspectiveCamera参数介绍：PerspectiveCamera( fov, aspect, near, far )参数含义默认值fov相机视锥体竖直方向视野角度50aspect相机视锥体水平方向和竖直方向长度比，一般设置为Canvas画布宽高比width / height1near相机视锥体近裁截面相对相机距离0.1far相机视锥体远裁截面相对相机距离，far-near构成了视锥体高度方向2000

1.获取浏览器cookie值const cookie = name => `; ${document.cookie}`.split(`; ${name}=`).pop().split(';').shift(); cookie('_ga'); Result: "GA1.2.1929736587.1601974046"2.将RGB转换为16进制const rgbToHex = (r, g, b) =>"#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1); rgbToHex(0, 51, 255); Result: #0033ff`3.复制到剪切板（使用 navigator.clipboard.writeText 轻松将任何文本复制到剪贴板上）const copyToClipboard = (text) => navigator.clipboard.writeText(text); copyToClipboard("Hello World");4.检查日期是否有效const isDateValid = (...val) => !Number.isNaN(new Date(...val).valueOf()); isDateValid("December 17, 1995 03:24:00"); Result: true5.找出一年中的某一天（即给出一个日期，程序给出属于本年的第多少天）const dayOfYear = (date) =>Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24); dayOfYear(new Date()); Result: 2726.将字符串首字母大写const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1) capitalize("follow for more") Result: Follow for more7.计算两个日期之间相差的天数const dayDif = (date1, date2) => Math.ceil(Math.abs(date1.getTime() - date2.getTime()) / 86400000) dayDif(new Date("2020-10-21"), new Date("2021-10-22")) Result: 3668.清除所有cookieconst clearCookies = document.cookie.split(';').forEach(cookie => document.cookie = cookie.replace(/^ +/, '').replace(/=.\*/, `=;expires=${new Date(0).toUTCString()};path=/`));9.生成随机16进制const randomHex = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`; console.log(randomHex()); Result: #92b00810.数组去重const removeDuplicates = (arr) => [...new Set(arr)]; console.log(removeDuplicates([1, 2, 3, 3, 4, 4, 5, 5, 6])); Result: [ 1, 2, 3, 4, 5, 6 ]11.从URL中获取查询参数const getParameters = (URL) => {URL = JSON.parse('{"' + decodeURI(URL.split("?")[1]).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') +'"}');return JSON.stringify(URL)}; getParameters(window.location) Result: { search : "easy", page : 3 }12.从日期中获取“时分秒”格式的时间const timeFromDate = date => date.toTimeString().slice(0, 8); console.log(timeFromDate(new Date(2021, 0, 10, 17, 30, 0))); Result: "17:30:00"13.确认奇偶数//通过数据%2来判断并返回布尔类型const isEven = num => num % 2 === 0; console.log(isEven(2)); Result: True14、求平值const average = (...args) => args.reduce((a, b) => a + b) / args.length;average(1, 2, 3, 4); Result: 2.515.回到顶部（适用于网页右下角快捷返回功能）//通过将x、y设置为0来实现const goToTop = () => window.scrollTo(0, 0); goToTop();16.反转字符串const reverse = str => str.split('').reverse().join(''); reverse('hello world'); Result: 'dlrow olleh'17.检查数组是否为空//通过对数组长度判断来确定是否为空const isNotEmpty = arr => Array.isArray(arr) && arr.length > 0; isNotEmpty([1, 2, 3]); Result: true 18.获取用户选定的文本const getSelectedText = () => window.getSelection().toString(); getSelectedText();19.打乱数组const shuffleArray = (arr) => arr.sort(() => 0.5 - Math.random()); console.log(shuffleArray([1, 2, 3, 4])); Result: [ 1, 4, 3, 2 ]20、检查用户是否处于暗模式const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches console.log(isDarkMode) Result: True or False

今天PHP爱好者给大家带来html5禁止横屏的方法：首先打开相应的HTML5代码文件；然后在head区域中添加“<meta name="screen-orientation" content="portrait">”即可禁止html5页面横屏。希望对大家有所帮助。//通用禁止横屏 <meta name="format-detection" content="telephone=no" /> //UC浏览器禁止横屏 <meta name="screen-orientation" content="portrait"> //QQ浏览器禁止横屏 <meta name="x5-orientation" content="portrait"> //JS横屏操作 <script> (function rotate() { var orientation = window.orientation; var pd = null; function createPd() { if (document.getElementById("preventTran") === null) { var imgData = "data:image/png;base64,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"; pd = document.createElement("div"); pd.setAttribute("id", "preventTran"); pd.style.position = "fixed"; pd.style.left = "0"; pd.style.top = "0"; pd.style.width = "100%"; pd.style.height = "100vh"; pd.style.overflow = "hidden"; pd.style.backgroundColor = "#2e2e2e"; pd.style.textAlign = "center"; pd.style.display = "flex"; pd.style.flexDirection = "column"; pd.style.justifyContent = "center"; pd.style.alignItems = "center"; document.getElementsByTagName("body")[0].appendChild(pd); var img = document.createElement("img"); img.src = imgData; pd.appendChild(img); img.style.marginBottom = "0.2rem"; img.style.width = "10%"; var br = document.createElement("br"); var p = document.createElement("p"); p.style.width = "100%"; p.style.height = "auto"; p.style.fontSize = "0.25rem"; p.style.color = "#626262"; p.style.lineHeight = "0.38rem"; p.style.textAlign = "center"; p.innerHTML = "为了您的良好体验"; p.appendChild(br); p.innerHTML += "请将手机/平板竖屏操作"; pd.appendChild(p); } } if (orientation == 90 || orientation == -90) { if (pd == null && document.getElementById("preventTran") === null) createPd(); document.getElementById("preventTran").style.zIndex = "9999"; } //H5新特性 监听用户水平或垂直翻转设备（即方向发生改变） window.onorientationchange = function () { if (pd == null && document.getElementById("preventTran") == null) { createPd(); document.getElementById("preventTran").style.zIndex = "-1"; rotate(); } else { location.reload(); } }; })(); </script>

以下是一个基本的原生AJAX写法：function ajax(method, url, data, success) { var xhr = new XMLHttpRequest(); xhr.open(method, url, true); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.onreadystatechange = function () { if (xhr.readyState === 4) { if (xhr.status === 200) { success(xhr.responseText); } else { console.log('Error: ' + xhr.status); } } }; xhr.send(data); } // 调用ajax函数： ajax('POST', '/api/login', JSON.stringify({username: 'user', password: 'password'}), function (res) { console.log(res); });此代码片段演示了使用原生 JavaScript 和 XMLHttpRequest 对象进行 AJAX 请求的基本方法，其中 `ajax()` 表示我们的 AJAX 函数，该函数接受四个参数：请求的方法（GET、POST、PUT 等）、请求URL、请求要发送的数据、请求成功后要运行的回调函数。在这个函数中，我们使用了 JSON 格式的数据，设置 header 的 Content-Type 为 'application/json'，并考虑了 readyState 和 status 的情况。最后，我们使用 JSON.parse() 解析响应，这里将响应直接输出到了控制台。这是一个基本模板，你可以根据自己的需要进行修改。

有时候我们站长想用户复制我们的页面内容，携带作者信息。下面是我们的JS实现代码：// 内容复制功能取消 $(function () { var Sys = {}; var ua = navigator.userAgent.toLowerCase(); if (window.ActiveXObject) { document.body.oncopy = function () { event.returnValue = false; var t = document.selection.createRange().text; var s = "-----------------------尊重作者，转载请标明出处：（alingfeng.cn）,原文链接：" + location.href; clipboardData.setData("Text", t + "" + s); }; } else { function addLink() { var body_element = document.getElementsByTagName("body")[0]; var selection; selection = window.getSelection(); var pagelink = "-----------------------尊重作者，转载请标明出处：（alingfeng.cn）,原文链接：" + location.href; var copytext = selection + pagelink; var newdiv = document.createElement("div"); newdiv.style.position = "absolute"; newdiv.style.left = "-99999px"; body_element.appendChild(newdiv); newdiv.innerHTML = copytext; selection.selectAllChildren(newdiv); window.setTimeout(function () { body_element.removeChild(newdiv); }, 0); } document.oncopy = addLink; } });这样我们复制内容的时候就会携带设置的内容了。