javascript小练手
1、做一个小图标在界面中通过按钮可以变大 变小 变色 变圆
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>改变图片</title> <style> .box{//设置显示的盒子的属性 width:100px; height:100px; background-color: red; } button{//设置你的按钮的属性 width:20px; height:20px; font-size: 5px; /*background-color: green;*/ } </style> </head> <body> <button type="button" id="big">变大</button> <button type="button" id="small">变小</button> <button type="button" id="changeColor">变色</button> <button type="button" id="circle">变圆</button> <div class="box" id="hezi"></div> <script type="text/javascript"> window.onload = function(){ function $(id){ //把获取id封装成一个函数 return document.getElementById(id); } $('big').onclick = function(){//id为big的那个按钮对盒子进行操作 $('hezi').style.width = '300px'; $('hezi').style.height = '400px'; } $('small').onclick = function(){ $('hezi').style.width = '50px'; $('hezi').style.height = '50px'; } $('changeColor').onclick = function(){ // $('hezi').style.color = 'yellow'; //错误的写法 你上面定义的是background这也应该是background $('hezi').style.backgroundColor = 'yellow'; } $('circle').onclick = function(){ $('hezi').style.borderRadius = '50%'; //变圆就是设置成50% } } </script> </body> </html>
2、当你的鼠标移动到一个图片上的时候会替换成另外一个图片 当移走的时候又会变成另外一个
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>替换界面图片</title> </head> <body> <div class="box"> <img src="./2_01.png" alt="照相机" id="ca" title="哈哈哈"> </div> <script> window.onload = function(){ var oImg = document.getElementById('ca'); oImg.onmouseover = function(){ oImg.src = './2_02.png'; var myDate = new Date(); // console.log(myDate.toLocaleString()); // oImg.title = myDate.toLocaleString(); console.log(myDate.toLocaleString()); oImg.title = myDate.toLocaleString(); } oImg.onmouseout = function(){ oImg.src = './2_01.png'; } } </script> </body> </html>
3、实现购物车
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } .box{ width: 500px; height: 400px; margin: 100px auto; background-color: rgba(255,255,255,0.4); position: relative; } .car{ /*这个是购物车的顶部显示的位置*/ width: 150px; height: 30px; background-color: #fff; padding-left: 30px; position: absolute; /*父相子绝 定位*/ left: 130px; top: 3px; z-index: 3; border: 1px solid green; } .shop{ /*下部的大的空白部分*/ width: 310px; height: 70px; background-color: #fff; position: absolute; top:33px; left: 0; display: none; /*先不显示这个盒子马上放在javascript来控制显示*/ } div.c{ border-bottom-width: 0; } div.t{ border: 1px solid green; } </style> </head> <body> <div class="box"> <div class="car" id="myCar">我的购物车</div> <div class="shop t" id="shop"></div> </div> <script type="text/javascript"> var myCar = document.getElementById('myCar'); var shop = document.getElementById('shop'); myCar.onmouseover = function(){ //onmouseenter 防止有冒泡现象 因为有 冒泡的话点击其他的也会有反应 // 阻止默认事件 a标签的默认事件 // e.preventDefault() // 阻止冒泡 shop.style.display = 'block'; //这个是你的鼠标停留的时候就显示出来这个块 上面已经设置这个块不显示了 myCar.className +=' c'; //创建一个类名并且加上这个类 因为上面设置了这个类的信息你要加上这个类名 } myCar.onmouseout = function(){ //当你的鼠标离开的时候 shop.style.display = 'none'; myCar.removeAttribute('class'); myCar.className = 'car'; } </script> </body> </html>
4、 建立一个模态框
建立一个点击叉号就显示 然后再点击插好就退出的界面
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{ padding: 0; margin: 0; } html,body{ height: 100%; } #box{ width: 100%; height: 100%; background: rgba(0,0,0,.3); } #content{ position: relative; top: 150px; width: 400px; height: 200px; line-height: 200px; text-align: center; color: red; background-color: #fff; margin: auto; } #span1{ position: absolute; background-color: red; top: 0; right: 0; width: 30px; height: 30px; line-height: 30px; text-align: center; color: #fff; } </style> </head> <body> <button id="btn">弹出</button> <script> window.onload = function(){ var oBtn = document.getElementById('btn'); //创建模态框 let oDiv = document.createElement('div'); var oP = document.createElement('p'); var oSpan = document.createElement('span'); //设置属性 oDiv.id = 'box'; oP.id = 'content'; oSpan.id = 'span1'; oP.innerText = '模态框弹出'; oSpan.innerText = 'X'; //追加元素 oDiv.appendChild(oP); oP.appendChild(oSpan); //上面是创造一个块 div 然后再创造一个p标签 和一个span标签对这些标签规划一些属性 然后把span标签 加入p标签内 p再加入span标签内 oBtn .onclick = function(){ this.parentNode.insertBefore(oDiv,oBtn); //当点击的时候把你创建的这个内容给插入进去 显示出来 } oSpan.onclick = function(){ //移除你显示的那个模块 移除oDiv oDiv.parentNode.removeChild(oDiv) } } </script> </body> </html>
5、用javascript来模拟一个a标签的块内换颜色
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> button { margin: 10px; width: 100px; height: 40px; cursor: pointer; } .current { background-color: red; } </style> </head> <body> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>按钮4</button> <button>按钮5</button> <script> //需求:鼠标放到哪个button上,改button变成黄色背景(添加类) var btnArr = document.getElementsByTagName("button"); //绑定事件 for(var i=0;i<btnArr.length;i++){ // 要为每一个按钮绑定事件,所以用到了for循环 btnArr[i].onmouseover = function () { //【重要】排他思想:先把所有按钮的className设置为空,然后把我(this)这个按钮的className设置为current //排他思想和for循环连用 for(var j=0;j<btnArr.length;j++){ btnArr[j].className = ""; } this.className = "current"; //【重要】核心代码 } } //鼠标离开current时,还原背景色 for(var i=0;i<btnArr.length;i++){ //要为每一个按钮绑定事件,所以用到了for循环 btnArr[i].onmouseout = function () { //鼠标离开任何一个按钮时,就把按钮的背景色还原 this.className = ""; } } </script> </body> </html>
6、tab栏选项卡
就是你的中心内容会跟着你选择的点击而改变
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } ul{ list-style: none; } #tab{ width: 480px; margin: 20px auto; border: 1px solid red; } ul{ width: 100%; overflow: hidden; } ul li{ float: left; width: 160px; height: 60px; line-height: 60px; text-align: center; background-color: #cccccc; } ul li a{ text-decoration: none; color:black; } li.active{ background-color: red; } p{ display: none; height: 200px; text-align: center; line-height: 200px; background-color: red; } p.active{ display: block; } </style> </head> <body> <div id="tab"> <ul> <li class="active"> <a href="#">首页</a> </li> <li> <a href="#">新闻</a> </li> <li> <a href="#">图片</a> </li> </ul> <p class="active">首页内容</p> <p>新闻内容</p> <p>图片内容</p> </div> </body> <script type="text/javascript"> window.onload = function(){ // //需求:鼠标放到上面的li上,li本身变色(添加类),对应的p也显示出来(添加类); //思路:1.点亮上面的盒子。 2.利用索引值显示下面的盒子。 // 预解释 变量提升 // var a; // console.log(a); // { // a = 1; // } // console.log(a); var tabli = document.getElementsByTagName('li'); var tabContent = document.getElementsByTagName('p') // js的一个坑 for(let i = 0; i < tabli.length; i++){ // 绑定索引值(新增一个自定义属性:index属性) // tabli[i].index = i; tabli[i].onclick = function(){ // 1.点亮上面的盒子。 2.利用索引值显示下面的盒子。(排他思想) for(var j = 0; j < tabli.length; j++){ tabli[j].className = ''; tabContent[j].className = ''; } this.className = 'active'; console.log(i); tabContent[i].className = 'active';//【重要代码】 } } } </script> </html>