• 当前标签:window对象

window对象 控制台 console

关于控制台常用的console <script>     console.log('控制台输出日志')     console.error('控制台输出错误')     console.warn('控制台输出警告')     console.debug('控制台输出测试')     console.info('控制台输出信息')     var age = 3     var name = 'wangBaoQiang'     console.log('age:%d,name:%s,小数:%.3f',age,name,age)     console.log('age:' + age + 'name:' + name + '小数:' + age)     // %d 表示整数     // %s 表示字符串     // %.nf 表示小数 n 保留小数的位数 </script> var a = 4            var b =5            console.assert(a + b == 8,'如果不对我给你100美元')            console.assert(Math.PI == 3.1415926,'如果不是 你比我精确')            // console.assert 断言 用来判断一个表达式或者变量是否为真            // 如果结果为假 则在控制台上输出一条相应信息 并且抛出一个异常            // 断言 通常用于自动化测试            function add(a,b){                return a + b            }            // 测试例子            console.assert(add(3,5) == 8,'未通过整数测试')            console.assert(add('bao','qiang') == 'baoqiang','未通过字符串测试')            console.assert(add(true,false) == false,'未通过布尔测试')            var obj = new Object()            obj.name = 'wangBaoQiang'            obj.age = 30            obj.jsMale = true            console.log(obj)            console.dir(obj)            // dir 提示一个对象的信息 列出对象的属性 方法 类型等信息            // 通过字面量的方法创建对象 字面量:值的直接表示法 var a = 3 3是字面量            var obj1 = {name:'wangbaoqiang',age:30,isMale:true}            console.dir(obj1)            var me = {                name:'xiaoming',                age:3,                isMale:true,                course:{                    name:'HTML5',                    months:6                }            }            // var cname = me.course.name            console.dir(me)            console.dir(document)            var div = document.querySelector('div')            console.dirxml(div)            // 可以在控制台上选择指定标签 也可以通过点击图标直接定位到标签的html代码            // 性能测试            console.time('add')            add(2,6)            console.timeEnd('add')            console.time('querySelector')            var div = document.querySelector('div')            console.timeEnd('querySelector')            console.time('for')            var x = 1            for(var i = 0;i<100000;i++){                x +=1            }            console.timeEnd('for')            // 分组            console.group('单元测试add方法')            console.assert(add(3,5) == 8,'未通过整数测试')            console.assert(add('bao','qiang') == 'baoqiang','未通过字符串测试')            console.assert(add(true,false) == false,'未通过布尔测试')            console.groupEnd()            console.log('分组完成')            console.table(me)            // 只有Firefox最支持 方法把对象用表格的方式显示出来            // 这在显示数组或者格式一样的JSON对象非常有用

2017-07-24 22:03:55 10 0 0
阅读详情

window对象 location

<body>     <button onclick="alert(location.href)">弹出当前地址</button>     <button onclick="location.href = 'https://www.baidu.com'">href</button>     <button onclick="location.assign('https://www.baidu.com')">assign</button>     <button onclick="location.reload()">刷新</button>     <button onclick="location.replace('http://www.163.com')">replace</button>     <script>         // location.replace 打开一个新的页面 但不会增加新的历史记录         //                  反而会替换当前历史记录项 用户无法返回原始页面         // location.reload() 重新加载当前页面         // location.assign 加载新的文档         // location.href 赋值可以打开         // window.location.href 对象用于获取当前页面的地址 并把浏览器重定向到新的页面         console.dir(document.location)         console.dir(window.location)     </script> </body>

2017-07-24 22:00:15 8 0 0
阅读详情

window对象 Navigator

<!DOCTYPE html> <html>     <head>         <meta charset="UTF-8">         <meta name="viewport" content="width=device-width, initial-scale=1.0">         <meta http-equiv="X-UA-Compatible" content="ie=edge">         <title>Navigator</title>         <style>         </style>     </head>     <body>         <script>             console.log(window.navigator)             // 获取浏览器和操作系统的一些基本信息             console.log(navigator.userAgent)             // 通常会被服务端使用来判断访问者使用的设备信息             // JSON:JavaScript Object Notation             var me = {                 'name': 'BaoQiang',                 'age' : 3,                 'curse':{                     'name':'HTML5'                 }             }             // 对象字面量 =》符合JSON数据的标准 =》 JSON             // JSON可以网络传播数据 而且各种平台都有非常好的支持             // 通常被用来作为数据交换标准             // JSON在大多数领域都取代了XML             // 比如 iOS Android开发 windows APP开发都已经转向JSON             console.log(me)             //XML             //  <person>             //        <name>BaoQiang</name>             //        <age>3</age>             //      <curse>             //             <name>HTML5</name>             //         </curse>              //  </person>             // XML占用空间比较大             // XML解析时使用代码非常多 而且难写             var str = JSON.stringify(me)             console.log(str)             // 把一个对象转换成字符串 序列化             // 对象在内存中是并列展开 是有结构的 序列号后 会变成字符串 变成了线性结构             var str2 = JSON.parse(str)             // 将字符串转化为对象 即反序列化             console.log(str2)         </script>     </body> </html>

2017-07-24 21:58:55 10 0 0
阅读详情

JavaScript window对象

<!DOCTYPE html> <html>     <head>         <meta charset="UTF-8">         <meta name="viewport" content="width=device-width, initial-scale=1.0">         <meta http-equiv="X-UA-Compatible" content="ie=edge">         <title>window对象-1</title>         <style>         </style>     </head>     <body>         <button onclick="stopAf()">停止动画</button>         <button onclick="recoverAf()">恢复动画</button>         <button onclick="resetAf()">重置动画</button>         <div></div>         <script>             // console.log(window.frames)             // window.alert('提示框')             // confirm('确认框')             // 有两个按钮 点击确定时返回true 点击取消时返回false             // prompt('输入提示框','默认文字')             // 有两个按钮 点确定时返回的是输入文字                 // 如果文本是空的 返回当前字符''                 // 如果点击取消 返回null             // alert confirm prompt 这三个框会阻断js执行             // 当框弹出时JS会暂停执行 这三个方法都是window对象的方法 window对象的方法可以省略'window'             // window.alert() 相当于 alert()             // window.showModalDialog('https://www.baidu.com','_blank','width=200px,height=800px')             // window.showModalDialog() 已不赞成使用。请使用 window.open() 替代             // var time = setTimeout(function(){             //     alert('3s后执行')             // },3000)             // 延迟多少秒后执行             // 两个参数 第一个参数要执行的函数 第二个参数是间隔时间 单位毫秒             // clearTimeout(time)             // 可以清除延迟执行             // var i = 0             // var t = setInterval(function(){             //     console.log('1s执行一次')             //     i++             //     if(i > 5){             //         clearInterval(t)             //         // 清除             //     }             // },1000)             // 每隔指定的时长执行一次 不断执行 直到你清除它             // setInterval()的执行频率最好不要超过每秒60次             // var a = 1             // var aa             // var func = function(){             //     document.body.innerHTML = a++             //     aa = requestAnimationFrame(func)                             // }             // requestAnimationFrame(func)             // requestAnimationFrame()会将代码的执行和页面渲染在一块 因此特别适合用来做动画             // 它的频率等于页面渲染的频率             // '更新'或'重绘' 通常是每秒60次             // setTimeout(function(){             //     cancelAnimationFrame(aa)             // },5000);             var div = document.querySelector('div')             var i = 1             var af             // 累加器             var adder = function(){                 div.innerHTML = i                 i++                 af = requestAnimationFrame(adder)                 // adder的下一次调用 当页面最小化时 不会执行 它会省电             }             // 这是adder的第一次调用 起到启动的作用             requestAnimationFrame(adder)             // 停止动画             function stopAf(){                cancelAnimationFrame(af)             }             // 恢复动画             function recoverAf(){                 requestAnimationFrame(adder)             }             // 重置动画             function resetAf(){                 i = 0                 div.innerHTML = 1             }             setTimeout(stopAf, 10000);             // requestAnimationFrame在现代浏览器中每秒60次             // setInterval 和 setTimeout()都是不准确的         </script>     </body> </html> <!DOCTYPE html> <html>     <head>         <meta charset="UTF-8">         <meta name="viewport" content="width=device-width, initial-scale=1.0">         <meta http-equiv="X-UA-Compatible" content="ie=edge">         <title>window - 2</title>         <style>             div{                 width: 300px;                 height: 80px;                 background-color: red;                 color: white;             }         </style>     </head>     <body>         <div>点击盒子打开窗口</div>         <script>             var div = document.querySelector('div')             div.addEventListener('click',function(){                 window.open('https://www.baidu.com','_blank','width=500px,height=400px')             })             // window.top  最顶级的窗口             // window.parent 父窗口             // window.close() 关闭窗口 但是不能关闭非脚本打开的窗口         </script>     </body> </html>

2017-07-24 21:57:25 7 0 0
阅读详情

window对象 历史记录

写三个页面实现点击按钮前进后退等 页面一: <!DOCTYPE html> <html>     <head>         <meta charset="UTF-8">         <meta name="viewport" content="width=device-width, initial-scale=1.0">         <meta http-equiv="X-UA-Compatible" content="ie=edge">         <title>页面一</title>         <style>         </style>     </head>     <body>         <h1>页面1</h1>         <button onclick="goForward()">前进</button>         <a href="index2.html">跳转到页面2</a>         <script>             function goForward(){                 history.forward()                 // forward 加载下一个URL 前进             }         </script>     </body> </html> 页面二: <!DOCTYPE html> <html>     <head>         <meta charset="UTF-8">         <meta name="viewport" content="width=device-width, initial-scale=1.0">         <meta http-equiv="X-UA-Compatible" content="ie=edge">         <title>页面二</title>         <style>         </style>     </head>     <body>         <h1>页面2</h1>         <button onclick="goBack()">后退</button>         <a href="index.html">跳转到页面1</a>         <a href="index3.html">跳转到页面3</a>         <script>             function goBack(){                 history.back()             }         </script>     </body> </html> 页面三: <!DOCTYPE html> <html>     <head>         <meta charset="UTF-8">         <meta name="viewport" content="width=device-width, initial-scale=1.0">         <meta http-equiv="X-UA-Compatible" content="ie=edge">         <title>页面3</title>         <style>             progress{                 width: 100%;             }         </style>     </head>     <body>         <h1>页面3</h1>         <button onclick="goPage1()">后退到底</button>         <button onclick="goPage(25)">进度25%</button>         <button onclick="goPage(50)">进度50%</button>         <button onclick="goPage(75)">进度75%</button>         <button onclick="goPage(100)">进度100%</button>         <div>             <progress value="0" max="100"></progress>         </div>         <script>             function goPage1(){                 history.go(-2)                 // 前进或者后退指定的步数             }             function goPage(value){                 document.querySelector('progress').value = value                 history.pushState(value,'进度'+ value,'#' + value)                 // history.pushState() 方法向浏览器历史添加一个状态。                 document.title = '进度' + value             }             //  注入的历史记录变化时可以获得事件通知             window.onpopstate = function(e){                 var value = e.state                 console.log(e.state)                 if(value == null) value = 0                 // if后面有一条语句时(条件成立时执行一条语句) 可以不写大括号                 document.querySelector('progress').value = value                 document.title = '进度' + value             }         </script>     </body> </html>

2017-07-24 21:54:12 11 0 0
阅读详情
  • 1
前往