當(dāng)前位置：
首頁(yè) >
前端技术
> javascript
>内容正文
javascript
前端JavaScripts基础知识点
生活随笔
收集整理的這篇文章主要介紹了
前端JavaScripts基础知识点
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
1放大鏡
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>$美少女戰(zhàn)士$</title><style>.smallBox {position: relative;width: 400px;height: 250px;margin-left: 100px;margin-top: 100px;float: left;}.smallBox img {width: 400px;}.bigBox {position: relative;width: 800px;height: 500px;margin-left: 50px;margin-top: 100px;float: left;border: 1px solid #ccc ;overflow: hidden;}.move {position: absolute;left:0;top:0;width: 120px;height: 120px;background-color: rgba(234,23,56,0.4);}#bigPic {position: absolute;left: 0;top:0;}</style>
</head>
<body>
<!--小盒子-->
<div class="smallBox"><img src="images/2-small.jpg" alt="" id="smallPic"><div class="move"></div>
</div>
<div class="bigBox"><img src="images/2-big.jpg" alt="" id="bigPic">
</div><script>window.onload = function () {/** 1:陰影塊隨著鼠標(biāo)動(dòng)---》獲取鼠標(biāo)位置** */console.log(document.body)var img = document.getElementsByClassName('move')[0]var bigBox = document.getElementById('bigPic')console.log(img.offsetWidth);document.function(e){}document.onmousemove = function (e) {//獲取鼠標(biāo)坐標(biāo) 事件對(duì)象 e 保存著事件的具體信息img.style.left = e.clientX-100 -img.offsetWidth/2+'px' ;img.style.top = e.clientY-100-img.offsetHeight/2+'px';// alert(img.style.left,img.style.top)if (parseInt(img.style.left)<0){img.style.left=0}if (parseInt(img.style.left)>280){img.style.left=280+'px'}if (parseInt(img.style.top)<0){img.style.top=0}if (parseInt(img.style.top)>130){img.style.top=130+'px'}bigBox.style.left=-parseInt(img.style.left)*(480/280)+'px'bigBox.style.top=-parseInt(img.style.top)*(250/130)+'px'console.log(e.clientX,e.clientY)}}</script>
</body>
</html>
2樣式操作
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>$美少女戰(zhàn)士$</title><style>.smallBox {position: relative;width: 400px;height: 250px;margin-left: 100px;margin-top: 100px;float: left;}.smallBox img {width: 400px;}.bigBox {position: relative;width: 800px;height: 500px;margin-left: 50px;margin-top: 100px;float: left;border: 1px solid #ccc ;overflow: hidden;}.move {position: absolute;left:0;top:0;width: 120px;height: 120px;background-color: rgba(234,23,56,0.4);}#bigPic {position: absolute;left: 0;top:0;}</style> </head> <body> <!--小盒子--> <div class="smallBox"><img src="images/2-small.jpg" alt="" id="smallPic"><div class="move"></div> </div> <div class="bigBox"><img src="images/2-big.jpg" alt="" id="bigPic"> </div><script>window.onload = function () {/** 1:陰影塊隨著鼠標(biāo)動(dòng)---》獲取鼠標(biāo)位置** */console.log(document.body)var img = document.getElementsByClassName('move')[0]var bigBox = document.getElementById('bigPic')console.log(img.offsetWidth);document.function(e){}document.onmousemove = function (e) {//獲取鼠標(biāo)坐標(biāo) 事件對(duì)象 e 保存著事件的具體信息img.style.left = e.clientX-100 -img.offsetWidth/2+'px' ;img.style.top = e.clientY-100-img.offsetHeight/2+'px';// alert(img.style.left,img.style.top)if (parseInt(img.style.left)<0){img.style.left=0}if (parseInt(img.style.left)>280){img.style.left=280+'px'}if (parseInt(img.style.top)<0){img.style.top=0}if (parseInt(img.style.top)>130){img.style.top=130+'px'}bigBox.style.left=-parseInt(img.style.left)*(480/280)+'px'bigBox.style.top=-parseInt(img.style.top)*(250/130)+'px'console.log(e.clientX,e.clientY)}}</script> </body> </html>3、省市聯(lián)動(dòng)
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>$美少女戰(zhàn)士$</title> </head> <body><select name="province" id="province"><option value="0">北京</option><option value="1">河南省</option><option value="2">河北省</option><option value="3">廣東省</option> </select><select name="city" id="city">//不能提前寫好 </select> <script src="獲取元素.js"></script> <script>window.onload = function () {//1:下拉列表改變 onchange 給你要改變那個(gè)列表加 //下拉列表改變onchange給你要改變那個(gè)列表加//2:數(shù)據(jù) 城市數(shù)組var str = ''; //空串var cities = [['朝陽(yáng)區(qū)','海淀區(qū)','大興區(qū)'],['洛陽(yáng)市','開封市','鄭州市'],['張家口市','石家莊市','保定市'],['東莞市','珠海市','深圳市'] ];my$('#province').onchange = function () {//在改變之后 str清空// onchange改變時(shí)下拉列表改變時(shí)str = '';//1:遍歷對(duì)應(yīng)的市 ---文字/*得到被選中的元素 檢測(cè)那個(gè)元素有selected屬性 *///seleccted選中的默認(rèn)被選中selected默認(rèn)被選中selectedfor(var i =0;i<this.options.length;i++){if(this.options[i].selected){var index = this.options[i].value}// options選擇期權(quán) options選擇期權(quán)options選擇}console.log(index)for(var i = 0;i<cities.length;i++){if(i == index ){ //?var cs = cities[index]/* console.log(cities[index])*///遍歷每一個(gè)城市 裝到option標(biāo)簽里for(var j= 0;j<cities[index].length;j++){//拼接字符串str+="<option value="+ j+">"+ cities[index][j]+" </option>"}console.log(str)}}my$('#city').innerHTML = str;for(var i=0;i<cities.length;i++){if(i==index){var cs=cities[index]for ( var j=0;j<cities[index].length;j++){str+='<option value'}}}//2:option標(biāo)簽//3:追加到name=city的下拉列表里}//初始化函數(shù)function init() {for (var i=0;i<cities[0].length;i++){var o=document.createElement('option')o.innerText=cities[0][i];my$('#city').appendChild(o)}}init(); } </script> </body> </html>4、插入節(jié)點(diǎn)
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>$美少女戰(zhàn)士$</title> </head> <body> <button id="btn">刪除節(jié)點(diǎn)</button> <div class="fa"><span class="gege"></span><!--<p></p>--><span class="last"></span> </div> <script src="獲取元素.js"></script> <script>//插入節(jié)點(diǎn) 兄弟關(guān)系 之前 之后var myp = document.createElement('p')myp.innerText = '我是p元素'//起了類名myp.setAttribute('class','myp') //insertBefore(創(chuàng)建的節(jié)點(diǎn),參考節(jié)點(diǎn))my$('.fa').insertBefore(myp,my$('.last'));my$('#btn').onclick = function () {//移除元素 父元素.removeChild('子元素')my$('.fa').removeChild( my$('.myp'))} </script> </body> </html>5、節(jié)點(diǎn)添加操作
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>$美少女戰(zhàn)士$</title> </head> <body> <button id="btn">刪除節(jié)點(diǎn)</button> <div class="fa"><span class="gege"></span><!--<p></p>--><span class="last"></span> </div> <script src="獲取元素.js"></script> <script>//插入節(jié)點(diǎn) 兄弟關(guān)系 之前 之后var myp = document.createElement('p')myp.innerText = '我是p元素'//起了類名myp.setAttribute('class','myp') //insertBefore(創(chuàng)建的節(jié)點(diǎn),參考節(jié)點(diǎn))my$('.fa').insertBefore(myp,my$('.last'));my$('#btn').onclick = function () {//移除元素 父元素.removeChild('子元素')my$('.fa').removeChild( my$('.myp'))} </script> </body> </html>6、定時(shí)器
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>$美少女戰(zhàn)士$</title> </head> <body> <script>//1:永久定時(shí) 返回 定時(shí)器標(biāo)識(shí) 整數(shù)//window.setInterval(function(){// 每隔多長(zhǎng)時(shí)間執(zhí)行的代碼// }, 1000(ms))//2: 一次性定時(shí) 返回 定時(shí)器標(biāo)識(shí) 整數(shù)/** setTimeout(function(){1s之后執(zhí)行一次},1000)*** */var i =0;/* var timer1 = window.setInterval(function () {i++;console.log(i)if(i===10){//清除定時(shí)器 clearInterval(標(biāo)識(shí))clearInterval(timer1)}},1000) */var timer2 = window.setTimeout(function () {console.log('我是一次性定時(shí)器 ，執(zhí)行一次')//clearTimeout(timer2)},2000)/* var timer2 = window.setInterval(function () {i++;console.log(i)if(i===10){//清除定時(shí)器 clearInterval(標(biāo)識(shí))}},1000)*/</script> </body> </html>總結(jié)
以上是生活随笔為你收集整理的前端JavaScripts基础知识点的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 前端JavaScript基础知识点
- 下一篇： 前端JavaScripts基础知识点轮播