js练习例题

黄色的海绵宝宝

已于 2022-07-04 19:15:27 修改

阅读量759

点赞数

文章标签： javascript 前端 java

于 2022-07-02 23:42:19 首次发布

本文链接：https://blog.csdn.net/m0_70552412/article/details/125578619

版权

6.28

1.tab复用

效果图：

2.常用鼠标事件

效果图：

6.29

1.图片跟随鼠标移动

<title></title>
       <style type="text/css">
           img{
               position: fixed;
               left: 0px;
               top: 0px;
           }
       </style>
   </head>
   <body>
       <img src="icon_2.png" >
       <script type="text/javascript">
           var img = document.querySelector('img');
           // mousemove鼠标移动事件
           document.addEventListener('mousemove',function(e){
               var pagex = e.pageX-20+'px';
               var pagey = e.pageY-20+'px';
               // console.log(pagex,pagey);
               img.style.left = pagex;
               img.style.top = pagey;
           })
       </script>

效果图

2.常用的键盘事件

   <title></title>
   </head>
   <body>
       <script type="text/javascript">
           document.addEventListener('keyup',function(){
               console.log('键盘按键松开了');
           })

           // document.addEventListener('keydown',function(){
           //    console.log('键盘按下了');
           // })

           document.addEventListener('keypress',function(){
               console.log('键盘按下了,但是不识别ctrl和shift键盘');
           })
       </script>

3.键盘事件小练习

</head>
   <body>
       用户信息：<span class="ustxt"></span><br>
       <input type="text" id="username">
       <input type="button" name="" id="btn" value="提交信息" />

       
       <script type="text/javascript">
           var ustxt = document.querySelector('.ustxt');
           var username = document.querySelector('#username');
           var btn = document.querySelector('#btn');
           //给按钮加点击事件
           // btn.onclick = function(){
           //    // msg获得的是表单输入的内容
           //    var msg = username.value;
           //    // 将获得的内容写入span标签中
           //    ustxt.innerText = msg;
           // }

           // 按回车键添加用户信息
           // enter回车键对应的ASCII码值是13
           // ASCII码值可以用keycode获得

           username.addEventListener('keyup',function(e){
               // console.log(e.keyCode);
               if(e.keyCode==13){
                   var msg = username.value;
                   ustxt.innerText = msg;
               }
           })

       </script>

效果图：

4.Window常用对象

</head>
   <body>
       <span>页面信息内容</span>
       <script type="text/javascript">
           // window最为顶级对象一般可以忽略不写
           // window.alert('window里面的一个方法');
           // alert('window里面的一个方法');

           window.onload = function(){
               console.log('页面以加载完成，包括图片视频 css文件等等');
           }

           window.addEventListener('DOMContentLoaded',function(){
               console.log('仅dom加载完成，不包括图片css文件等等');
           })

           window.addEventListener('resize',function(){
               alert('浏览器窗口大小改变了');
           })
       </script>

效果图：1

2.

6.30

1.定时器

<span>5s后自动消失</span>
       <script type="text/javascript">
           // setTimeout 延迟多少毫秒后执行函数仅执行一次
           // 1000毫秒等于1秒
           // var span = document.querySelector('span');
           // var time1 = setTimeout(function(){
           //    span.style.display = 'none';
           // },5000)
           // var time2 = setTimeout(function(){
           //    alert('5s到了');
           // },5000)

           // // 清除定时器
           // clearTimeout(time1);
           //注意先设置定时器才能设置清除


           // setInterval 每隔一段事件执行函数会一直执行
           var i=0;
           // setInterval(function(){
           //    i++;
           //    console.log(i);
           // },1000)

           var myinterval = setInterval(function(){
               i++;
               console.log(i);
           },1000)

           setTimeout(function(){
               clearInterval(myinterval);//清除定时器
           },5000)

       </script>

效果图：

2.倒计时效果

<body>
       
       <p>距离活动还剩<span>0</span> 天<span>0</span> 时<span>0</span> 分<span>0</span> 秒</p>
       <script>

           function showTime(){
               var spans = document.querySelectorAll('span');
               //设置活动截至的时间的毫秒数
               var endTime = new Date('2022-07-03 14:00:00').getTime();
               console.log(endTime);
               var newTime = new Date().getTime();
               //获得现在到活动截至时相差的秒数
               var diffTime = (endTime - newTime)/1000;
               console.log(diffTime);

               var day = parseInt(diffTime/60/60/24);
               console.log(day);
               var hours =parseInt(diffTime/60/60%24);
               var minutes= parseInt(diffTime/60%60);
               var seconds= parseInt(diffTime%60);
                   spans[0].innerText =day;
               spans[1].innerText = hours;
               spans[2].innerText = minutes;
               spans[3].innerText = seconds;
           }

           //设置定时器
           setInterval(showTime,1000);

       </script>

效果图：

3.倒计时发送消息

<body>
       <input type="text">
       <input type="button" id="btn" value="发送信息">

       <script type="text/javascript">
           var btn = document.querySelector('#btn');
           btn.onclick = function(){
               //设置5秒倒计时
               var time = 5;
               var setTime = setInterval(function(){

                   if(time==0){
                       //清理定时器
                       clearInterval(setTime);
                       btn.disabled = false;
                       btn.value = '发送信息';
                   }else{
                       //禁用按钮
                       btn.disabled = true;
                       // 将时间赋值给按钮
                       btn.value = time;
                       time--;
                   }

               },1000)
           }
       </script>

效果图：

4.this指向问题

<body>
       <input type="button" name="" id="btn" value="点击执行" />

       <script type="text/javascript">
           // 01全局作用域下的this
           //再全局下直接打印 this指向的是窗口顶级对象window
           console.log('全局：',this);
           function demo(){
               console.log('demo:',this);//window
               // 这里的函数其实也是再全局下调用的相当于window.demo() 所以打印的结果还是window
           }
           demo();

           // 02 对象里面的this 指向
           //通过字面量形式创建一个对象
           var person = {
               realname:'张三',
               age:20,
               say:function(){
                   console.log('说话');
                   console.log(this);//指向的是当前对象本身 person
               }
           };
           console.log(person.realname);
           person.say();

           // 03构造函数里面的this指向问题
           function Person(realname,age){
               this.realname = realname;
               this.age = age;
               this.say = function(){
                   console.log('说话');
                   console.log(this);//构造函数里面的this 指向的是实例化的这个对象
                   // 实例化指的是 new出来的实例
               }
           }
           var p1 = new Person('李四',22);
           var p2 = new Person('王武',23);
           p1.say();
           p2.say();
       //通过 01 02 03 总结再普通函数里的this 通常指向是那个调用它的对象
       // 即谁调用 this指向谁

       // 04 再定时器里面的this指向
       var btn= document.querySelector('#btn');
       btn.onclick = function(){
           console.log(this);//btn对象
           setTimeout(function(){
               console.log(this);//定时器是window调用的所以这里打印的是window
           },1000)
       }

效果图：

5.location对象

<body>
       
       <input type="button" name="" id="btn" value="点击跳转到百度" />
       <script>
           var btn = document.querySelector('#btn');
           btn.onclick = function(){
               //获得的是本地的路径地址注意路径中有中文时中文会通过urlcode加密处理
               console.log(location.href);

               location.href = 'http://www.baidu.com';

               console.log(location.host);//获取域名
               console.log(location.port);//获取端口号
               console.log(location.pathname);//获取路径
               console.log(location.hash);//获取锚链接信息

           }
       </script>

效果图：

6.小练习

效果图：

7.1

1.js的执行机制

   <body>

       <script type="text/javascript">
           // console.log(1);
           // function demo(){
           //    console.log(2);
           // }

           // console.log(3);
           // //以上的代码 log1 2是主线程的依次执行
           // log3是异步任务它先进入任务队列中等1 2执行完了我们调用函数的时候它才执行

           console.log(1);

           document.onclick =function(){
               console.log('click');
           }

           setTimeout(function(){
               console.log(3);
           },3000)

           console.log(2);
       </script>

2.location常见方法

<body>
       <input type="button" name="" id="btn" value="点击页面跳转" />
       <a href="javascript:;" οnclick="getreplace()">跳转qn页面</a>
       <a href="javascript:;" οnclick="getreload()">点击刷新页面</a>
       <script type="text/javascript">
           // location方法
           var btn = document.querySelector('#btn');
           btn.onclick = function(){
               //跳转页面
               location.assign('http://www.baidu.com');
           }
           //跳转页面后无法后退
           function getreplace(){
           location.replace('qn.html');
           }
           //刷新页面
           function getreload(){
               location.reload();
           }

           // navigator对象可以判断登陆的类型移动端还是网页端
           if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
                       console.log("手机端");
           } else {
                       console.log("PC端");
           }
       </script>

效果图：

7.4

1.登录框效果

.bg{
               width: 100%;
               height: 100%;
           position: fixed;
               top: 0px;
               left:0px;
               background: rgb(0,0,0,.4);
               z-index: 9998;
               display: none;
           }
           .login{
               width: 600px;
               height: 300px;
               position: fixed;
               top:50%;
               left:50%;
               transform: translate(-50%,-50%);
               z-index: 9999;
               background: #fff;
               display: none;

           }
           .title{
           height: 45px;
           line-height: 45px;
           text-align: center;
           border-bottom: 1px solid #DCDCDC;
           position: relative;
           cursor: move;
           }
           .content p{
               text-align: center;
               line-height: 45px;
           }
           .title a{
               display: block;
               position: fixed;
               top:2px;
               right: 5px;
               z-index: 9999;
           }
       </style>
   </head>
   <body>
       

       <a href="javascript:;" id="loginA">注册/登录</a>
       
       <div class="login">
       <div class="title">
               用户登录 <a href="javascript:;" id="close">关闭</a>

           </div> <div class="content">
               <p> 用户名：<input type="text" value="" /></p>
               <p> 密码：<input type="password" value="" /></p>
               <p> <input type="button" value="提交" /></p>
           </div>

       </div>
       <div class="bg"></div>
       <script type="text/javascript">
           var loginA = document.querySelector('#loginA');
           var loginDiv = document.querySelector('.login');
           var close = document.querySelector('#close');
           var title = document.querySelector('.title');
           var bgDiv = document.querySelector('.bg');

           //显示登录框
           loginA.addEventListener('click',function(){
               loginDiv.style.display = 'block';
               bgDiv.style.display = 'block';
           })

           //隐藏登陆框
           close.addEventListener('click',function(){
               loginDiv.style.display = 'none';
               bgDiv.style.display = 'none';
           })

           //移动登录框
           //添加鼠标按下时事件发生
           title.addEventListener('mousedown',function(e){
               //获得鼠标在登陆框上的位置
               //注意 offset获得的距离不计算 translate偏移的距离所以这里我们自己减去偏移的一半距离
               // var x =e.pageX - (loginDiv.offsetLeft-300);
               // var y = e.pageY - (loginDiv.offsetTop-150);
               // console.log(e.pageX,loginDiv.offsetLeft);
               // console.log(x,y);
               console.log(e.target)
               var x =e.pageX - (loginDiv.offsetLeft);
               var y = e.pageY - (loginDiv.offsetTop);

               //计算鼠标移动时登陆框需要移动的距离
               document.addEventListener('mousemove',move);
               function move(e){
                   var newX = e.pageX - x;
                   var newY = e.pageY - y;
                   // loginDiv.style.left = newX +300+'px';
                   // loginDiv.style.top = newY +150+'px';
                   loginDiv.style.left = newX+'px';
                   loginDiv.style.top = newY+'px';
               }

               //清除 mousemove移动事件
               document.addEventListener('mouseup',function(){
                   document.removeEventListener('mousemove',move);
               })

           })
       </script>