/* 所谓的异步执行
计算机程序执行分为同步执行,和异步执行 所谓的同步执行,就是正常的计算机程序执行的3大顺序流程 顺序控制语句 从上至下,从左至右 分支控制语句 if,switch 循环控制语句 for,while,do...while,for...in,forEach() 所谓的异步执行,是一种特殊的程序的执行方式 setInterval setTimeout 事件的绑定 onclick... ajax请求 所谓异步程序的执行 1,所有的异步程序的执行,都会在同步程序执行结束之后,再来执行 2,异步程序的执行顺序,如果时间相同,看代码的先后顺序 如果时间不同,时间短的,先执行 描述异步程序执行的过程 1,从一行代码开始执行程序 2,同步程序正常执行 3,如果发现是异步程序,暂时不执行 存储在异步池中,等待执行 4,将程序中所有的同步程序执行完毕后 5,开启异步池,执行异步程序 当设定的时间到达,就会执行对应的异步升序 先到设定时间的异步程序,先执行 如果设定的时间相同,看异步程序的顺序,来执行 必须要牢记,异步程序的执行,一定是在所有同步程序执行结束之后,才会开始执行 */ setInterval(function(){ console.log('我是异步执行的程序1111'); } , 2000); setInterval(function(){ console.log('我是异步执行的程序2222'); } , 1000); console.log('我是同步执行的程序')// 浏览器三大弹窗操作
// 1,提示框 / 警告框 // window.alert('弹出内容\n警告内容'); // 转义符 // 类似于 HTML中的 字符实体 是为了解决 输入内容和JavaScript代码的冲突 // 例如,要在弹框中,实现换行 /* \n 换行 \' 单引号 \" 双引号 \r 回车 \t 横向跳格 (Ctrl-I) \\ 反斜杠 \f 纵向的间隔 注意:各个浏览器对转移符的支持效果不同,执行效果也不一样 我们只要记住前三个就可以了 */ // 2,输入框 // 作用: window.prompt('提示内容'); // 弹出一个输入框,可以输入数据,()中定义的内容,作为输入数据的提示内容 // 输入框执行结果,可以使用变量来存储 // 存储的内容,是数据的数据内容 // 问题: 输入的数据,存储的方式是,字符串类型 // 如果是输入数值,需要计算,必须把数据类型转化为数值 // var userName = window.prompt('请输入账号'); // var userPwd = window.prompt('请输入密码'); // console.log(userName,userPwd); // 将 纯数字的 字符串 转化为数值类型方法 // 方法1 : parseInt() 获取整数部分 // var res1 = parseInt(window.prompt('请输入密码')); // console.log(res1); // 方法2 : 执行非 加法的 不影响数值的 运算 // var res2 = window.prompt('请输入密码') - 0 ; // var res2 = window.prompt('请输入密码') * 1 ; // var res2 = window.prompt('请输入密码') / 1 ; // console.log(res2); // 方法3 : 在数值前,添加 + 正号 / - 符号 // 获取 正数 的部分 // 但是要注意,正数和负数的问题 // + 正号 : 正数获取的正数结果 负数获取的是负数结果 // - 符号 : 正数获取的负数结果 负数获取的是正数结果 // var res2 = -window.prompt('请输入密码'); // console.log(res2); // 3,确认框 // 作用: window.confirm('提示内容'); // 点击确定按钮,window.confirm()执行结果,返回值是 true // 点击取消按钮,window.confirm()执行结果,返回值是 false // 可以根据,返回值,执行不同的操作 var res = window.confirm('请问您是否确定删除这个邮件'); console.log(res);// 获取 浏览器滚动条高度
// 获取浏览器滚动条,分为宽度和高度两个属性 // 获取浏览器滚动条的高度,宽度 // 获取高度的兼容性 // 有没有 文档类型声明 <!DOCTYPE html> // 有 : document.documentElement.scrollTop; // 没有 : document.body.scrollTop; // 如果获取方式错误,程序不会报错,只是获取的结果是0 // var height1 = document.documentElement.scrollTop; // var height2 = document.body.scrollTop; // console.log(height1 , height2); // 实际当中要确保,始终可以获取到正确的数值,不管有没有文档类型声明 // 做 兼容处理 // var 变量 = 方式1 || 方式2 ; // 当方式1有结果时,数值会转化为 true , 方式2,就不会执行 // 变量中存储的是方式1,获取的结果 // 当方式1结果是0时,数值会转化为 false , 方式2会执行 // 变量中,先存储方式1的结果0,再存储方式2的结果,最终为方位2的结果 // 最终的效果,就是确保变量中,始终有数值存储, // console.log(document.documentElement.scrollTop); // console.log(document.body.scrollTop); // 浏览器上卷的高度 // var height = document.documentElement.scrollTop || document.body.scrollTop // 浏览器移动的宽度 // var width = document.documentElement.scrollLeft || document.body.scrollLeft; // console.log(height , width); // 还可以利用属性来设定 // 设定滚动条,移动的宽度和高度 // 直接设定数值就可以,不要加PX document.documentElement.scrollTop = 500; document.documentElement.scrollLeft = 500;浏览器滚动条操作
<style> * { margin: 0; padding: 0; } body { height: 5000px; } .box { width: 100%; position: fixed; top: 0; display: none; } .top { width: 800px; margin: 0 auto; line-height: 100px; } img { height: 50px; vertical-align: middle; margin-right: 30px; } input { height: 70px; width: 500px; } button { height: 70px; width: 100px; } .sidebar { width: 30px; font-size: 30px; position: fixed; right: 100px; top: 400px; display: none; } </style> 百度一下 <div class="sidebar" id="sidebar"> 侧边栏内容 </div> <script> // 通过id属性值,来获取标签对象 // oDiv,就是id属性值是top的标签 // 之间是通过id属性值,直接操作标签 // 现在直接放在事件中,不能使用,必须要先获取标签对象 // 语法: document.getElementById('标签id属性值'); // 一般使用class来定义样式 // 一般使用id来获取标签对象 var oDiv1 = document.getElementById('box'); var oDiv2 = document.getElementById('sidebar'); // console.log(oDiv1 , oDiv2); // 通过事件来实现效果 // window.onscroll 页面滚动条事件 // 当页面滚动条发生改变时,会触发需要执行的程序 window.onscroll = function () { // 当滚动条,也就是页面位置,发生改变时,会触发执行的程序 // 获取当前浏览器上卷的高度 var height = document.documentElement.scrollTop || document.body.scrollTop; // 如果浏览器上卷的高度,大于 500 时 , 执行程序 if (height > 500) { // 设定 div 的显示属性为 block ,就可以显示了 oDiv1.style.display = 'block'; oDiv2.style.display = 'block'; } else { // 设定 高度 <= 500 是,让div消失隐藏 oDiv1.style.display = 'none'; oDiv2.style.display = 'none'; } } // 后续将jQuery时,会讲动画效果 // 当前使用css也是可以实现,不过执行效果不如jQuery </script>