【前端】JavaScript入门及实战121-125

徐锦洪  金牌会员 | 2024-8-4 00:14:21 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 975|帖子 975|积分 2925

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有账号？立即注册

x
121 滚轮事件

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title></title>
  5. <meta charset = "utf-8">
  6. <style type="text/css">
  7.         #box1 {
  8.                 width: 100px;
  9.                 height: 100px;
  10.                 background-color: red;
  11.         }
  12. </style>
  13. <script type="text/javascript">
  14.         window.onload = function(){
  15.                 /*
  16.                         当鼠标滚轮向下滚动时，box1变长
  17.                         当滚轮向上滚动时，box1变短
  18.                 */
  19.                 var box1 = document.getElementById("box1");
  20.                 // 获取鼠标滚轮滚动事件
  21.                 /*
  22.                         onmousewheel是鼠标滚轮滚动的事件，会在滚轮滚动时触发
  23.                         但是火狐不支持该属性
  24.                        
  25.                         在火狐中需要使用DOMMouseScroll来绑定滚动事件，
  26.                         注意该事件需要通过addEventListener()函数来绑定
  27.                 */               
  28.                 box1.onmousewheel = function(event){
  29.                         event = event || window.event;
  30.                         // 判断鼠标滚轮滚动的方向
  31.                         // event.wheelDelta可以获取鼠标滚轮滚动的方向
  32.                         // 向上滚 120  向下滚 -120
  33.                         // wheelDelta这个值我们不看大小，只看正负
  34.                                        
  35.                         //alert(event.wheelDelta);
  36.                        
  37.                         // wheelDelta这个属性火狐中不支持
  38.                         // 在火狐中使用event.detail来获取滚动的方向
  39.                         // 向上滚 -3 向下滚 3
  40.                         //alert(event.detail);
  41.                        
  42.                         // 判断鼠标滚轮滚动的方向
  43.                         if(event.wheelDelta > 0 || event.detail < 0){
  44.                                 // 向上滚，box1变短
  45.                                 box1.style.height = box1.clientHeight - 10 + "px";                               
  46.                         }else{
  47.                                 // 向下滚，box1变长
  48.                                 box1.style.height = box1.clientHeight + 10 + "px";
  49.                         }               
  50.                        
  51.                         /*
  52.                                 使用addEventListener()方法绑定响应函数，取消默认行为时不能使用return false
  53.                                 需要使用event来取消默认行为event.preventDefault();
  54.                                 但是IE8不支持event.preventDefault();如果直接调用会报错
  55.                         */
  56.                         event.preventDefault && event.preventDefault();                       
  57.                                        
  58.                         /*
  59.                                 当滚轮滚动时，如果浏览器有滚动条，滚动条会随之滚动，
  60.                                 这是浏览器的默认行为，如果不希望发生，则可以取消默认行为
  61.                         */
  62.                         return false;
  63.                 };
  64.                
  65.                 /*bind(box1, "DOMMouseScroll", function(){
  66.                        
  67.                 });*/
  68.                
  69.                 bind(box1, "DOMMouseScroll", box1.onmousewheel);
  70.         };
  71.        
  72.         function bind(obj, eventStr, callback){
  73.                 if(obj.addEventListener){
  74.                 // 大部分浏览器兼容方式
  75.                 obj.addEventListener(eventStr, callback, false);               
  76.                 }else{
  77.                         /*
  78.                                 this是谁由调用方式决定
  79.                                 callback.call(obj)
  80.                         */
  81.                         // IE8及以下
  82.                         //obj.attachEvent("on" + eventStr, callback);                               
  83.                         obj.attachEvent("on" + eventStr, function(){
  84.                                 // 在匿名函数调用回调函数
  85.                                 callback.call(obj);
  86.                         });                               
  87.                 }
  88.         }
  89. </script>
  90. </head>
  91. <body>
  92.         <div id="box1"></div>
  93. </body>
  94. </html>
复制代码
122 键盘事件

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title></title>
  5. <meta charset = "utf-8">
  6. <style type="text/css">
  7.         #box1 {
  8.                 width: 100px;
  9.                 height: 100px;
  10.                 background-color: red;
  11.         }
  12. </style>
  13. <script type="text/javascript">
  14.         window.onload = function(){
  15.                 /*
  16.                         键盘事件：
  17.                         onkeydown：按键被按下
  18.                                 对于onkeydown来说如果一直按着某个按键不松手，则事件会一直触发，
  19.                                 当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，其他的会非常的快，
  20.                                 这种设计是为了防止误操作的发生。
  21.                         onkeyup：按键被松开
  22.                        
  23.                         键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document
  24.                 */
  25.                                
  26.                 document.onkeydown = function(event){
  27.                         event = event || window.event;               
  28.                         /*
  29.                                 可以通过keyCode来获取按键的编码，通过它可以判断哪个按键被按下
  30.                                
  31.                                 除了keyCode，事件对象中还提供了几个属性
  32.                                         altKey、ctrlKey、shiftKey
  33.                                         这个三个用来判断alt ctrl 和 shift是否被按下，
  34.                                         如果按下则返回true，否则返回false
  35.                         */
  36.                                        
  37.                         //console.log(event.keyCode); // ctrl：17
  38.        
  39.                         // 判断一个y是否被按下
  40.                         // 判断y和ctrl是否同时被按下
  41.                         if(event.keyCode === 89 && event.ctrlKey){
  42.                                 console.log("ctrl和y都被按下了");
  43.                         }
  44.                 };
  45.                                
  46.                 /*document.onkeyup = function(){
  47.                          console.log("按键松开了");
  48.                  };*/
  49.                                
  50.                 // 获取input
  51.                 var input = document.getElementsByTagName("input")[0];                               
  52.                 input.onkeydown = function(event){
  53.                         event = event || window.event;
  54.                         // console.log(event.keyCode);
  55.                         // 数字编码 48（0） - 57（9）
  56.                         // 使文本框中不能输入数字
  57.                         if(event.keyCode >= 48 && event.keyCode <= 57){
  58.                                 // 在文本框中输入内容，属于onkeydown的默认行为
  59.                                 // 如果在onkeydown中取消了默认行为，则输入的内容，不会出现在文本框中
  60.                                 return false;
  61.                         }
  62.                 };       
  63.         };
  64. </script>
  65. </head>
  66. <body>
  67.         <input type="text" />
  68. </body>
  69. </html>
复制代码
123 键盘移动div

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title></title>
  5. <meta charset = "utf-8">
  6. <style type="text/css">
  7.         #box1 {
  8.                 width: 100px;
  9.                 height: 100px;
  10.                 background-color: red;
  11.                 position: absolute;
  12.         }
  13. </style>
  14. <script type="text/javascript">
  15.         // 使div可以根据不同的方向键向不同的方向移动
  16.         /*
  17.                 按左键，div向左移
  18.                 按右键，div向右移
  19.                 。。。
  20.         */       
  21.         window.onload = function(){
  22.                 // 为document绑定一个按键按下的事件
  23.                 document.onkeydown = function(event){
  24.                         event = event || window.event;
  25.                         // 定义一个变量，来表示移动的速度
  26.                         var speed = 10;
  27.                                        
  28.                         // 当用户按了ctrl以后，速度加快
  29.                         if(event.ctrlKey){
  30.                                 speed = 500;
  31.                         }
  32.                                        
  33.                         /*
  34.                                 37 左
  35.                                 38 上
  36.                                 39 右
  37.                                 40 下
  38.                         */
  39.                         switch(event.keyCode){
  40.                                 case 37:
  41.                                         //alert("向左"); left值减小
  42.                                         box1.style.left = box1.offsetLeft - speed + "px";
  43.                                         break;
  44.                                 case 39:
  45.                                         //alert("向右");
  46.                                         box1.style.left = box1.offsetLeft + speed + "px";
  47.                                         break;
  48.                                 case 38:
  49.                                         //alert("向上");
  50.                                         box1.style.top = box1.offsetTop - speed + "px";
  51.                                         break;
  52.                                 case 40:
  53.                                         //alert("向下");
  54.                                         box1.style.top = box1.offsetTop + speed + "px";
  55.                                         break;
  56.                         }
  57.                                        
  58.                 };
  59.         };
  60. </script>
  61. </head>
  62. <body>
  63.         <div id="box1"></div>
  64. </body>
  65. </html>
复制代码
124 BOM

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title></title>
  5. <meta charset = "utf-8">
  6. <style type="text/css">
  7.         #box1 {
  8.                 width: 100px;
  9.                 height: 100px;
  10.                 background-color: red;
  11.                 position: absolute;
  12.         }
  13. </style>
  14. <script type="text/javascript">
  15.         /*
  16.                 BOM
  17.                         浏览器对象模型
  18.                         BOM可以使我们通过JS来操作浏览器
  19.                         在BOM中为我们提供了一组对象，用来完成对浏览器的操作
  20.                        
  21.                         BOM对象
  22.                                 Window：代表的是整个浏览器的窗口，同时window也是网页中的全局对象
  23.                                 Navigator：代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器
  24.                                 Location：代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面
  25.                                 History：代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录
  26.                                                    由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页，
  27.                                                   而且该操作只在当次访问时有效
  28.                                 Screen：代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关的信息
  29.                        
  30.                         这些BOM对象在浏览器中都是作为window对象的属性保存的，
  31.                         可以通过window对象来使用，也可以直接使用
  32.         */       
  33.        
  34.         //console.log(navigator);
  35.         //console.log(location);
  36.         //console.log(history);
  37.                        
  38.         /*
  39.                 Navigator
  40.                         代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器
  41.                         由于历史原因，Navigator对象中的大部分属性都已经不能帮助我们识别浏览器了
  42.                        
  43.                         一般我们只会使用userAgent来判断浏览器的信息，
  44.                         userAgent是一个字符串，这个字符串中包含有用来描述浏览器信息的内容，
  45.                         不同的浏览器会有不同的userAgent
  46.                  
  47.                         火狐的userAgent
  48.                                 Mozilla/5.0 (Windows NT 6.1; WOW64; rv:50.0) Gecko/20100101 Firefox/50.0
  49.                           
  50.                         Chrome的userAgent
  51.                                 Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.82 Safari/537.36
  52.                           
  53.                         IE8
  54.                                 Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)
  55.                          
  56.                         IE9
  57.                                 Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)
  58.                           
  59.                         IE10
  60.                                 Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)
  61.                           
  62.                         IE11
  63.                                 Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; rv:11.0) like Gecko
  64.                                 在IE11中已经将微软和IE相关的标识都已经去除了，所以我们基本已经不能通过UserAgent来识别一个浏览器是否是IE了
  65.         */
  66.                        
  67.         //alert(navigator.appName);
  68.                        
  69.         var ua = navigator.userAgent;
  70.                        
  71.         console.log(ua);
  72.                        
  73.         if(/firefox/i.test(ua)){
  74.                 alert("你是火狐");
  75.         }else if(/chrome/i.test(ua)){
  76.                 alert("你是Chrome");
  77.         }else if(/msie/i.test(ua)){
  78.                 alert("你是IE浏览器");
  79.         }else if("ActiveXObject" in window){
  80.                 alert("你是IE11");
  81.         }
  82.                        
  83.         /*
  84.                 如果通过UserAgent不能判断，还可以通过一些浏览器中特有的对象，来判断浏览器的信息
  85.                 比如：ActiveXObject
  86.         */
  87.         /*if("ActiveXObject" in window){
  88.                 alert("你是IE");
  89.         }else{
  90.                 alert("你不是IE");
  91.         }*/
  92.                        
  93.         /*alert("ActiveXObject" in window);*/
  94. </script>
  95. </head>
  96. <body>
  97.         <div id="box1"></div>
  98. </body>
  99. </html>
复制代码
125 History

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title></title>
  5. <meta charset = "utf-8">
  6. <style type="text/css">
  7.        
  8. </style>
  9. <script type="text/javascript">
  10.         /*
  11.                 History：对象可以用来操作浏览器向前或向后翻页
  12.         */
  13.         window.onload = function(){
  14.                 // 获取按钮对象
  15.                 var btn = document.getElementById("btn");
  16.                                
  17.                 btn.onclick = function(){
  18.                         /*
  19.                                 length：属性，可以获取到当成访问的链接数量
  20.                         */
  21.                         alert(history.length);
  22.                                                
  23.                         /*
  24.                                 back()：可以用来回退到上一个页面，作用和浏览器的回退按钮一样
  25.                         */
  26.                         history.back();
  27.                                                
  28.                         /*
  29.                                 forward()：可以跳转下一个页面，作用和浏览器的前进按钮一样
  30.                         */
  31.                         history.forward();
  32.                                                
  33.                         /*
  34.                                 go()：可以用来跳转到指定的页面
  35.                                         它需要一个整数作为参数
  36.                                                 1:表示向前跳转一个页面 相当于forward()
  37.                                                 2:表示向前跳转两个页面
  38.                                                 -1:表示向后跳转一个页面
  39.                                                 -2:表示向后跳转两个页面
  40.                         */
  41.                         history.go(-2);
  42.                 };
  43.         };
  44. </script>
  45. </head>
  46. <body>
  47.         <button id="btn">点我一下</button>
  48.         <h1>History</h1>
  49.         <a href="01.BOM.html">去BOM</a>        <div id="box1"></div>
  50. </body>
  51. </html>
复制代码
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

徐锦洪

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表