前端
javascript
練習(xí)題
函數(shù)
1.編寫任意個(gè)數(shù)字的求和、差蜂莉、積蜡娶、商的函數(shù)
思路分析：首先求任意個(gè)數(shù)，因此需要一個(gè)能夠獲取函數(shù)傳遞參數(shù)個(gè)數(shù)及值的形參：arguments映穗，方法不一窖张，思路僅供參考
function f1(){
var sum=arguments[0], //將第一個(gè)數(shù)符初值分別給這幾個(gè)變量
cha=arguments[0],
ji=arguments[0],
shang=arguments[0];
for(var i=1;i<arguments.length;i++){ //用arguments獲取用戶傳入的參數(shù)
sum=sum+arguments[i];
cha=cha-arguments[i];
ji=ji*arguments[i];
shang=shang/arguments[i];
}
console.log("he"+sum+"cha"+cha+"ji"+ji+"shang"+shang);
}
f1(1,2,3,4);
2.編寫一個(gè)函數(shù)，計(jì)算任意兩個(gè)數(shù)字之間所能組成的奇數(shù)個(gè)數(shù)蚁滋，數(shù)字必須是個(gè)位數(shù)比如： 計(jì)算0-3之間能組成的奇數(shù)個(gè)是01宿接、21、03辕录、13睦霎、23、31
思路分析：兩個(gè)數(shù)字任意組合走诞，先判斷是否是奇數(shù)副女，然后再排除個(gè)位和十位相同的數(shù)即可
方法：
function f3(x,y){
var count=0;
for(var i=x;i<=y;i++){ //x和y之間的數(shù)任意組合
for(var j=x;j<=y;j++){
var str=Number(i+""+j); //將x和y拼接組成2位的數(shù)再轉(zhuǎn)化為2位的數(shù)字
if(str%2!=0&&i!=j){
console.log(i+""+j);
count++;
}
}
}
console.log(count);
}
f3(0,3);
求斐波那契數(shù)列
1、1蚣旱、2碑幅、3戴陡、5、8沟涨、13恤批、21、34裹赴、55……F(0)=0喜庞，F(xiàn)(1)=1, F(n)=F(n-1)+F(n-2)（n>=2，n∈N*）
方法：
function f6(n){ //求斐波那契數(shù)列
var a1=1;
var a2=1;
for(var i=3;i<=n;i++){
var an=a1+a2; //每一項(xiàng)等于前兩項(xiàng)的和
a1=a2; //每次循環(huán)改變a1和a2使其指向下一次的前兩項(xiàng)
a2=an;
}
return an;
}
console.log(f6(5));
2篮昧、//遞歸求斐波那契數(shù)列
function getFib(x){
if(x==1||x=2){
return 1;
}
return getFib(x-1)+getFib(x-2);
}
console.log(getFib(12));
數(shù)組
1.數(shù)組的選擇排序,冒泡排序
冒泡排序： 思路在代碼中進(jìn)行了注釋赋荆，可以根據(jù)注釋參照思路
var arr3=[1,5,2,6,3,3];
function f4(arr){ //冒泡排序（以從小到大為例）
for(var i=0;i<arr.length-1;i++){ //控制比較的輪數(shù)
for(var j=0;j<arr.length-1-i;j++){ //內(nèi)層每輪比較的次數(shù)
if(arr[j]>arr[j+1]){
var temp=arr[j]; //交換這兩個(gè)值的位置
arr[j]=arr[j+1];
arr[j+1]=temp;
}
}
}
return arr;
}
console.log(f4(arr3));
選擇排序：
function f4(arr){ //選擇排序
//用這個(gè)數(shù)分別和別的數(shù)相比較笋妥，改變的是索引的位置懊昨，每輪結(jié)束后才交換為位置
for(var i=0;i<arr.length-1;i++){ //控制外層比較的輪數(shù)
var minIndex=i; //先假定一個(gè)最小值，定義變量minIndex指向該值的索引
for(var j=i+1;j<arr.length;j++){
if(arr[minIndex]>arr[j]){
minIndex=j; //改變最小索引的指向
}
}
var temp=arr[i]; //每輪比較結(jié)束春宣，將最初假定的最小值和實(shí)際最小值交換
arr[i]=arr[minIndex];
arr[minIndex]=temp;
}
return arr; //將排序后的數(shù)組返回
}
console.log(f4(arr3));
2.判斷數(shù)組中是否存在某個(gè)元素酵颁，返回布爾類型
思路分析：判斷是否存在某個(gè)值，也可以使用indexOf等數(shù)組的方法
方法：列舉一種普通的
var arr1=[1,4,3,6];
function f2(arr,x){
for(var i=0;i<arr.length;i++){
if(arr[i]==x){
return true;
}
}
return false;
}
console.log(f2(arr1,4));
3.編寫函數(shù)將數(shù)組元素去重
方法1：推薦使用 （數(shù)組和對象結(jié)合的方式去重）
var arr1=[1,3,6,6,6,4];
function f3(arr){ //利用數(shù)組和對象結(jié)合的方式去重
var newArr=[];
var obj={};
for(var i=0;i<arr.length;i++){
//把數(shù)組中的元素當(dāng)成對象的屬性
if(obj[arr[i]]==undefined){ //如果第一次出現(xiàn)會(huì)得到undefined
newArr.push(arr[i]); //將第一次出現(xiàn)的值加入到新數(shù)組中
obj[arr[i]]=1; //給obj對象的屬性賦值月帝，使其重復(fù)的值得到的結(jié)果不為undefined
}
}
return newArr;
}
console.log(f3(arr1));
方法2：（索引值比較躏惋，需要注意的是，截取以后數(shù)組長度也發(fā)生了變化嚷辅，因此數(shù)組長度需要 -1）
function noRepeat(arr){
for(var i=0;i<arr.length;i++){ //控制外層循環(huán)
for(var j=i+1;j<arr.length;j++){ //控制內(nèi)層
if(arr[i]==arr[j]){
arr.splice(j,1); //從數(shù)組中刪除元素簿姨，此時(shí)數(shù)組發(fā)生改變
j--; //此時(shí)原數(shù)組的索引都向前減了1，因此j--z再去比較一次
}
}
}
return arr;
}
console.log(noRepeat(arr1));
4.輸入一個(gè)數(shù)簸搞，并按原來的規(guī)律將它插入數(shù)組中
思路分析：可以先進(jìn)行判斷是從大到小扁位，還是從小到大，然后將數(shù)據(jù)進(jìn)入插入
var arr2=[1,3,4,5]趁俊；
function f4(arr,x){
if(arr[0]>arr[arr.length-1]){
arr.push(x); //將傳入的參數(shù)加入到數(shù)組中
arr.sort(function(a,b){ //調(diào)用sort對數(shù)組中的元素排序
return b-a; //從大到小
})
}else {
arr.push(x);
arr.sort(function (a,b){
return a-b; //從小到大
})
}
return arr;
}
console.log(f4(arr1,0));
5.定義一個(gè)含有30個(gè)整型元素的數(shù)組域仇，按順序分別賦予從2開始的偶數(shù)；然后按順序每五個(gè)數(shù)求出一個(gè)平均值寺擂，放在另一個(gè)數(shù)組中并輸出
方法：
function f1(){
var arr1=[]; //用來存放最開始的這些數(shù)字
var arr2=[]; //用來存放平均值
var sum=0;
for(var i=0;i<30;i++){
arr1[i]=(i+1)*2;
sum+=arr1[i];
if((i+1)%5==0){
arr2.push(sum/5);
sum=0; //每求一次平均值暇务，sum要進(jìn)行清零
}
}
console.log(arr2);
}
f1();
6.隨機(jī)點(diǎn)名程序
思路分析：使用math.random()產(chǎn)生0~1之間的隨機(jī)數(shù)，然后根據(jù)索引得到具體值
方法：將人名放入數(shù)組中怔软，生成數(shù)組的隨機(jī)索引值垦细，從而得到對應(yīng)的人名
btn.onclick=function (){
var arr=["張三","李四","王二","張明","李天","王大","崔勇"];
var num1 =Math.floor(Math.random()*arr.length);
var na=arr[num1];
console.log(na);
}
String
1.密碼強(qiáng)度 假設(shè)只有大、小寫字母及數(shù)字
思路分析：可以使用正則表達(dá)式(相對簡單)挡逼，也可以根據(jù)ASCII碼
方法：
var str1 = "123agfdAB";
function f5(str) {
var flag1 = false, //因?yàn)橐袛喽鄠€(gè)分支是否都含有括改，所以定義多個(gè)flag去判斷
flag2 = false,
flag3 = false;
for (var i = 0; i < str.length; i++) {
var code = str.charCodeAt(i);
if (48 <= code && code <= 57) { //數(shù)字的ASCII碼
flag1 = true;
}
if (65 <= code && code <= 90) { //大寫字母的ASCII碼
flag2 = true;
}
if (97 <= code && code <= 122) { //小寫字母的ASCII碼
flag3 = true;
}
}
if (flag1 && flag2 && flag3) { //根據(jù)flag的值去判斷包含幾個(gè)分支
console.log("強(qiáng)");
} else if (flag1 && flag2 || flag1 && flag3 || flag2 && flag3) {
console.log("中");
} else {
console.log("低");
}
}
f5(str1);
2.數(shù)字字母混合驗(yàn)證碼
方法1： 利用字符串中的值隨機(jī)組合生成
var str="123456789ABCDEFGHIG";
function yan(str){
var str1="";
for(var i=0;i<4;i++){
var s =Math.floor(Math.random()*str.length);
var str1=str1+str[s];
}
console.log(str1);
}
yan(str);
方法2：利用ASCII碼
function yan(){
var str="";
while(str.length<4){ //當(dāng)str的長度不滿足重復(fù)執(zhí)行-------生成4位的字符串
var sCode =Math.floor(Math.random()*(90-48+1)+48);//得到的是數(shù)字到大寫字母的ASCII 值
//判斷ASCII碼的值在數(shù)字和字母之間
if(48<=sCode&&sCode<=57||65<=sCode&&sCode<=90){
var str=str+String.fromCharCode(sCode); //將隨機(jī)值進(jìn)行拼接
}
}
console.log(str);
}
yan();
3.已知字符串“a,a,b,c,c,d”，統(tǒng)計(jì)每個(gè)字符出現(xiàn)的次數(shù)挚瘟，結(jié)果顯示 a 2叹谁、b 1饲梭、c 2、d1焰檩，去掉重復(fù)的字符憔涉，使結(jié)果顯示 abcd
方法： 利用數(shù)組和對象結(jié)合的方式，把數(shù)組元素作為對象的屬性
var str = "a,a,b,c,c,d";
function f1(str) {
var arr = str.split(","); //split返回的是分割后的數(shù)組
var obj = {}; //用來存放數(shù)組中的元素
for (var i = 0; i < arr.length; i++) {
if (obj[arr[i]] == undefined) {
obj[arr[i]] = 1; //用1這個(gè)值去表示第一次出現(xiàn)
} else {
obj[arr[i]] = obj[arr[i]] + 1; //出現(xiàn)的次數(shù)
}
}
var s = ""; //讓obj的屬性進(jìn)行拼接
for (var i in obj) {
s += i;
document.write(i + obj[i] + " ");
}
document.write(s); //輸出屬性拼接后的值
}
f1(str);
留言過濾 ：將字符串中指定的字符或字符串替換
var str=“1455-95098888”;
方法1： 替換單個(gè)字符析苫，可以利用字符串的索引對應(yīng)的值進(jìn)行比較 （charAt同）
function f6(str){
for(var i=0;i<str.length;i++){
if(str[i]=="5"){
str=str.replace("5","*"); //返回替換后的字符串兜叨，所以需要定義變量去接收返回的新的字符串
}
}
return str;
}
console.log(f6(str));
方法2： 替換一串，可以用indexOf 衩侥，沒有這個(gè)字符串国旷，返回的結(jié)果為-1
function f7(str){
for(var i=0;i<str.length;i++){
if(str.indexOf("55")!=-1){
str=str.replace("55","*"); //返回替換后的字符串，所以需要定義變量去接收返回的新的字符串
}
}
return str;
}
console.log(f7(str));
方法3： 替換一串茫死，可以用substr跪但，截取字符串進(jìn)行比較，相同再替換
function f8(str){
for(var i=0;i<str.length;i++){
if(str.substr(i,3)=="888"){
str=str.replace("888","*"); //返回替換后的字符串峦萎，所以需要定義變量去接收返回的新的字符串
}
}
return str;
}
console.log(f8(str));
Math 對象
1.編寫一個(gè)函數(shù)屡久，獲得一個(gè)十六進(jìn)制的隨機(jī)顏色的字符串(例如：#20CD4F)
方法：
function f2(){
var str="0123456789abcdef";
var color="#";
for(var i=0;i<6;i++){
var num=Math.floor(Math.random()*str.length);
color=color+str[num];
}
console.log(color);
}
f2();
date對象
數(shù)碼時(shí)鐘
思路分析：將時(shí)分秒的圖片，按照一定規(guī)則命名爱榔，方便后續(xù)根據(jù)時(shí)間設(shè)置圖片路徑
方法：
<div id="pic">
<img src="img/0.png" alt="" />
<img src="img/0.png" alt="" />
<span>時(shí)</span>
<img src="img/0.png" alt="" />
<img src="img/0.png" alt="" />
<span>分</span>
<img src="img/0.png" alt="" />
<img src="img/0.png" alt="" />
<span>秒</span>
</div>
<script>
function f1(){
var str="";
//通過標(biāo)簽獲取所有的圖片存放在變量imgid中
var imgid=document.getElementsByTagName("img");
var oDate = new Date(); //創(chuàng)建時(shí)間對象
var h=oDate.getHours(); //分別去獲取當(dāng)前的時(shí)分秒
var fen=oDate.getMinutes();
var miao= oDate.getSeconds();
var h1=h>=10?h:"0"+h; //保證都是由2位組成
var fen1=fen>=10?fen:"0"+fen;
var miao1=miao>=10?miao:"0"+miao;
str=str+h1+fen1+miao1; //組合成一個(gè)新的字符串
for(var i=0;i<str.length;i++){ //遍歷字符串
//類比src="img/0.png";
imgid[i].src='img/'+str[i]+'.png'; //設(shè)置每個(gè)圖片的src路徑
}
}
setInterval(f1,1000); //定時(shí)器 后一個(gè)參數(shù)以毫秒為單位
函數(shù)的封裝
封裝方法：將函數(shù)作為對象的參數(shù)
eg1：.判斷某年份是否為閏年被环，將日期格式化輸出 “2015|08|24”，獲得某個(gè)月份的天數(shù)详幽，判斷兩個(gè)日期相差的天數(shù)筛欢，獲得N天以后的日期
var dateUtil = {
isLeapYear:function(year){
if(year%4==0&&year%100!=0 || year%400==0){
return true;
}
return false;
},
formatDate:function(date,str){
var year = date.getFullYear();
var month = date.getMonth()+1;
var day = date.getDate();
if(month < 10){
month = "0"+month;
}
if(day < 10){
day = "0" + day;
}
var ss = year+str+month+str+day
return ss;
},
getDays:function(date){
var year = date.getFullYear();
var month = date.getMonth()+1;
switch(month){
case 2:
if(dateUtil.isLeapYear(year)){
return 29;
}
return 28;
break;
case 4:
case 6:
case 9:
case 11:
return 30;
break;
default:
return 31;
}
},
getDiffDays:function(date1,date2){
//兩個(gè)日期相減會(huì)得到一個(gè)相差的毫秒數(shù)
//相差的天時(shí)分秒
var ss = Math.abs((date2-date1)/1000);
var day = Math.floor(ss/24/3600);
var hour = Math.floor(ss/3600%24);
var minute = Math.floor(ss/60%60);
var second = Math.floor(ss%60);
return day+"天"+hour+"時(shí)"+minute+"分"+second+"秒";
},
getNDays:function(n){
var oDate = new Date();
oDate.setDate(oDate.getDate()+n);
return oDate;
}
};
DOM和BOM
創(chuàng)建表格，添加刪除操作
介紹：這是用基本的方式唇聘，更便捷的方法是版姑，使用es6提供的模板字符串，代碼和效率能提高很多
簡單的樣式：
a <input type="text"/>
b <input type="text"/>
c <input type="text"/>
<input type="button" value="添加"/>
<table></table>
js實(shí)現(xiàn)代碼：
var oinput=document.getElementsByTagName("input");
var otable=document.getElementsByTagName("table")[0];
oinput[oinput.length-1].onclick=function(){
var otr=document.createElement("tr");
//創(chuàng)建單元格雳灾，并且將文本的值加到單元格里
for(var i=0;i<oinput.length-1;i++){
var otd=document.createElement("td");
otd.innerHTML=oinput[i].value;
otr.appendChild(otd);
}
//添加刪除按鈕漠酿，并加入到單元格中
var otd = document.createElement("td");
var oSpan = document.createElement("span");
oSpan.innerHTML = "刪除";
otd.appendChild(oSpan);
otr.appendChild(otd);
oSpan.onclick = function(){
//oTable.removeChild(oTr);
otable.removeChild(this.parentNode.parentNode);
}
otable.appendChild(otr);
}
進(jìn)度條
html排版樣式：
<div class="progressBar">
<p style=""></p>
</div>
<div class="progressBar">
<p></p>
</div>
<div class="progressBar">
<p></p>
</div>
js執(zhí)行代碼：
var opp=document.getElementsByTagName("p");
function progress(obj,num){
var count=0;
var timer=setInterval(function(){
count++;
obj.style.width=count+"%";
if(count==num){
clearInterval(timer);
}
},20)
}
progress(opp[0],50);
progress(opp[1],60);
progress(opp[2],80);
簡易年歷
eg1：將數(shù)組中的值輸出
改變樣式可以直接改樣式，也可以修改類名
var okuang=document.getElementById("kuang");
var oli=document.getElementsByTagName("li");
var arr=[11,22,33,44,55];
var index=0; //定義一個(gè)變量用來保存索引值
for(var i=0;i<oli.length;i++){ //遍歷給每個(gè)li添加事件
oli[i].onclick=function(){
for(var j=0;j<oli.length;j++){ //排他功能
oli[j].style.backgroundColor="#666";
oli[j].style.color="#fff";
}
okuang.innerHTML=arr[index]; //此時(shí)不能用arr[i]谎亩，因?yàn)樵邳c(diǎn)擊之前for已經(jīng)執(zhí)行完了炒嘲，此時(shí)i為oli的元素個(gè)數(shù)值
this.style.backgroundColor="red";
this.style.color="#000";
index++;
}
}
解析：
for循環(huán)是在頁面加載的時(shí)候,執(zhí)行完畢了
// for(var k=0;k<5;k++){
// }
// console.log(k);
//事件是在觸發(fā)的時(shí)候,執(zhí)行的
tab切換案例
點(diǎn)擊按鈕換圖片:
var oli=document.getElementsByTagName("li"); //獲取li標(biāo)簽
var oimg=document.getElementsByTagName("img")[0]; //獲取圖片標(biāo)簽
var index=0; //存儲(chǔ)索引值，因?yàn)樵邳c(diǎn)擊按鈕前for已經(jīng)執(zhí)行完了
for(var i=0;i<oli.length;i++){
oli[i].onclick=function (){
oimg.src='images/'+index+'.png';
index++;
}
}
案例
排他功能
一串input
var oinput=document.getElementsByTagName("input");
for(var i=0;i<oinput.length;i++){
oinput[i].onclick=function(){
//先讓所有的變成原來的樣子
for(var j=0;j<oinput.length;j++){
oinput[j].value="晴天";
oinput[j].style.background="#ccc";
}
//再設(shè)置當(dāng)前的樣式
this.value="陰天";
this.style.background="red";
}
}
通過類名修改樣式
var oinput=document.getElementById("btn");
var odiv=document.getElementById("dv");
oinput.onclick=function(){
//判斷是否應(yīng)用了類樣式
if(odiv.className!="cls"){
odiv.className="cls"; //當(dāng)有多個(gè)類名時(shí)需要注意 留著不需要修改的
}else{
odiv.className="dd";
}
};
tab切換
主要就是排他功能的應(yīng)用匈庭，下面對應(yīng)的塊夫凸，選隱藏，找出點(diǎn)擊span時(shí)對應(yīng)的li再讓它顯示
<div class="box" id="box">
<div class="hd">
<span class="current">體育</span>
<span>娛樂</span>
<span>新聞</span>
<span>綜合</span>
</div>
<div class="bd">
<ul>
<li class="current">我是體育模塊</li>
<li>我是娛樂模塊</li>
<li>我是新聞模塊</li>
<li>我是綜合模塊</li>
</ul>
</div>
</div>
<script>
var obox=document.getElementById("box");
var hd=obox.getElementsByTagName("div")[0];
var bd=obox.getElementsByTagName("div")[1];
var oli=bd.getElementsByTagName("li");
var ospan=hd.getElementsByTagName("span");
for(var i=0;i<ospan.length;i++){
ospan[i].setAttribute("index",i); //點(diǎn)擊之前就把索引保存在span標(biāo)簽中
ospan[i].onclick=function(){
//將所有的span樣式移除
for(var j=0;j<ospan.length;j++){
ospan[j].className="";
//ospan[j].removeAttribute("class");
}
// 設(shè)置當(dāng)前的span類樣式
this.className="current";
//先將所有地li隱藏
for(var k=0;k<oli.length;k++){
oli[k].removeAttribute("class");
}
//獲取當(dāng)前被點(diǎn)擊的索引值
var index=this.getAttribute("index");
//當(dāng)前點(diǎn)擊span對應(yīng)的li顯示
oli[index].className="current";
}
}
動(dòng)態(tài)創(chuàng)建列表
<input type="button" value="動(dòng)態(tài)創(chuàng)建列表" id="btn"/>
<div id="dv"></div>
js代碼：
var kungfu=["降龍十八掌", "黯然銷魂掌", "葵花寶典", "九陰真經(jīng)",
"吸星大法", "如來神掌", "化骨綿掌", "玉女心經(jīng)", "極樂神功", "辟邪劍譜"];
var dv=document.getElementById("dv");
var oinput=document.getElementsByTagName("input")[0];
//點(diǎn)擊按鈕創(chuàng)建列表
oinput.onclick=function(){
var oul=document.createElement("ul");
for(var i=0;i<kungfu.length;i++){ //有多少個(gè)數(shù)組元素就創(chuàng)建多少個(gè)li
var oli=document.createElement("li");
dv.appendChild(oul);
oul.appendChild(oli);
oli.innerHTML=kungfu[i]; //給創(chuàng)鍵的li設(shè)置文本和事件
oli.onmouseover=mouseoverHandle;
oli.onmouseout=mouseoutHandle;
}
}
function mouseoverHandle(){
this.style.backgroundColor="red";
}
function mouseoutHandle(){
this.style.backgroundColor="";
}
//如果是循環(huán)的方式添加事件,推薦用命名函數(shù)
//如果不是循環(huán)的方式添加事件,推薦使用匿名函數(shù)
動(dòng)態(tài)創(chuàng)建表格
//點(diǎn)擊按鈕創(chuàng)建表格
var arr=[
{name:"百度",href:"nn1"},
{name:"谷歌",href:"nn2"},
{name:"優(yōu)酷",href:"nn3"},
{name:"土豆",href:"nn4"},
{name:"快播",href:"nn5"},
{name:"愛奇藝",href:"nn6"}
];
var btn=document.getElementById("btn");
var odv=document.getElementById("dv");
btn.onclick=function(){
var otable=document.createElement("table");
otable.cellPadding="0";
otable.cellSpacing="0";
otable.border="1"
//根據(jù)數(shù)組長度創(chuàng)建表格
for(var i=0;i<arr.length;i++){
var otr=document.createElement("tr");
var otd=document.createElement("td");
otd.innerHTML=arr[i].name;
var otd2=document.createElement("td");
otd2.innerHTML=arr[i].href;
odv.appendChild(otable);
otable.appendChild(otr);
otr.appendChild(otd);
otr.appendChild(otd2);
}
}
只創(chuàng)建一個(gè)元素
為了防止不同的人都給同一個(gè)元素添加了相同事件阱持，執(zhí)行次數(shù)過多
方式1： 思路（沒有才去創(chuàng)建）
<input type="button" value="顯示效果" id="btn"/>
<div id="dv"></div>
js代碼：
var btn=document.getElementById("btn");
var odiv=document.getElementById("dv");
btn.onclick=function(){
if(!document.getElementById("an")){
var oinput=document.createElement("input");
oinput.type="button";
oinput.id="an";
oinput.value="按鈕";
odiv.appendChild(oinput);
}
}
方式2：思路（有則刪除夭拌，刪除后再去創(chuàng)建）
js代碼：
btn.onclick=function(){
if(document.getElementById("an")){
odiv.removeChild(document.getElementById("an"));
}
var oinput=document.createElement("input");
oinput.type="button";
oinput.value="按鈕";
oinput.id="an";
odiv.appendChild(oinput);
}
總結(jié)一句話就是：無則創(chuàng)建，有則刪除
模擬百度搜索框 ------重要
思路：每次鍵盤抬起都去獲取用戶輸入的內(nèi)容，并與數(shù)組中的數(shù)據(jù)進(jìn)行比較鸽扁，如果有相同的蒜绽，則獲取提取出來加入到下拉框展示出來
簡單的布局如下：
<div id="box">
<input type="text" id="txt" value="">
<input type="button" value="搜索" id="btn">
</div>
js代碼：
var keyWords = ["小楊才是最純潔的", "小楊才是最帥的", "小段是最猥瑣的", "小超是最齷齪的", "傳智播客是一個(gè)培訓(xùn)機(jī)構(gòu)", "傳說在傳智有個(gè)很帥很純潔的小楊", "蘋果好吃", "蘋果此次召回還是沒有中國"];
var txt=document.getElementById("txt");
var btn=document.getElementById("btn");
//每一次的鍵盤抬起都判斷頁面中有沒有這個(gè)div
txt.onkeyup= function () {
if(document.getElementById("dv")) {
var dv=document.getElementById("dv");
document.getElementById("box").removeChild(dv);
}
//把文本框輸入的內(nèi)容和數(shù)組中的每個(gè)數(shù)據(jù)對比
var text=this.value;
var arr=[]; //用來存儲(chǔ)用戶輸入的內(nèi)容
for(var i=0;i<keyWords.length;i++){
if(keyWords[i].indexOf(text)==0){
arr.push(keyWords[i]);
}
}
//判斷文本框是否為空，空則不用創(chuàng)建div
if(this.value.length==0||arr.length==0){
if(document.getElementById("dv")){
document.getElementById("dv").removeChild("dv");
}
return;
}
//創(chuàng)建div桶现，把div加入id為box的盒子中
var dv=document.createElement("div");
document.getElementById("box").appendChild(dv);
dv.id="dv";
dv.style.width="350px";
dv.style.border="1px solid #ccc";
//循環(huán)遍歷臨時(shí)數(shù)組,創(chuàng)建對應(yīng)的p標(biāo)簽
for(var i=0;i<arr.length;i++){
//創(chuàng)建p標(biāo)簽
var op=document.createElement("p");
dv.appendChild(op);
op.innerHTML=arr[i];
op.onmouseover=function(){
this.style.background="red";
};
op.onmouseout=function(){
this.style.background="";
};
}
};
為同一個(gè)元素綁定多個(gè)事件
對象.addEventListener(“事件類型”,事件處理函數(shù),false);
對象.attachEvent(“有on的事件類型”,事件處理函數(shù))鸿染； 只有ie支持
封裝緩動(dòng)動(dòng)畫函數(shù)
js代碼：
//動(dòng)畫函數(shù)---任意一個(gè)元素移動(dòng)到指定的目標(biāo)位置
function f1(ele,target){
clearInterval(ele.timer); //確保元素只有一個(gè)定時(shí)器
//動(dòng)畫函數(shù)---任意一個(gè)元素移動(dòng)到指定的目標(biāo)位置
ele.timer=setInterval(function(){ //定時(shí)器的id值存儲(chǔ)到對象的一個(gè)屬性中
var cur=ele.offsetLeft; //獲取當(dāng)前元素坐標(biāo)
var step=(target-cur)/10;
step=step>0?Math.ceil(step):Math.floor(step);
cur+=step;
//判斷當(dāng)前移動(dòng)后的位置是否到達(dá)目標(biāo)位置
if(cur==target){
clearInterval(ele.timer); //清理指定元素的定時(shí)器
}
ele.style.left=cur+"px";
},20);
}
封裝動(dòng)畫函數(shù)樱溉，改變?nèi)我舛鄠€(gè)屬性和回調(diào)函數(shù)
js代碼：
function animate(element, json, fn) {
clearInterval(element.timeId);//清理定時(shí)器
element.timeId = setInterval(function () {
var flag = true;//默認(rèn),假設(shè),全部到達(dá)目標(biāo)
//遍歷json對象中的每個(gè)屬性還有屬性對應(yīng)的目標(biāo)值
for (var attr in json) {
if (attr == "opacity") { //判斷這個(gè)屬性attr中是不是opacity
//獲取元素的當(dāng)前的透明度,當(dāng)前的透明度放大100倍
var current = getStyle(element, attr) * 100;
var target = json[attr] * 100;//目標(biāo)的透明度放大100倍
var step = (target - current) / 10;
step = step > 0 ? Math.ceil(step):Math.floor(step);//step<0時(shí)不用加-號(hào)
current += step;//移動(dòng)后的值
element.style[attr] = current / 100;
} else if (attr == "zIndex") { //判斷這個(gè)屬性attr中是不是zIndex
//層級(jí)改變就是直接改變這個(gè)屬性的值
element.style[attr] = json[attr];
} else {
//普通的屬性
//獲取元素這個(gè)屬性的當(dāng)前的值
var current = parseInt(getStyle(element, attr));
var target = json[attr]; //當(dāng)前的屬性對應(yīng)的目標(biāo)值
var step = (target - current) / 10; //移動(dòng)的步數(shù)
step = step > 0 ? Math.ceil(step) : Math.floor(step);
current += step;//移動(dòng)后的值
element.style[attr] = current + "px";
}
if (current != target) { //是否到達(dá)目標(biāo)
flag = false;
}
}
if (flag) {
//清理定時(shí)器
clearInterval(element.timeId);
//所有的屬性到達(dá)目標(biāo)才能使用這個(gè)函數(shù),前提是用戶傳入了這個(gè)函數(shù)
if (fn) {
fn();
}
}
}, 20);
}
完整的輪播圖 --------重要
思路：圖片和小按鈕分別放在不同的盒子里，然后去設(shè)置左右焦點(diǎn)的事件僻澎，和小按鈕的事件猎提，為小按鈕添加事件之前先把索引保存到li的自定義屬性中狭吼。
左右焦點(diǎn)有臨界值酱讶，需要去判斷第一個(gè)和最后一個(gè)
小按鈕需要設(shè)置樣式何暮，及第一個(gè)和的最后一個(gè)轉(zhuǎn)換時(shí)小按鈕對應(yīng)的樣式
簡單的布局代碼：
<div class="all" id='box'>
<div class="screen"><!--相框-->
<ul>
<li><img src="img/1.jpg" width="500" height="200"/></li>
<li><img src="img/2.jpg" width="500" height="200"/></li>
<li><img src="img/3.jpg" width="500" height="200"/></li>
<li><img src="img/4.jpg" width="500" height="200"/></li>
<li><img src="img/5.jpg" width="500" height="200"/></li>
</ul>
<ol> //用來存放小按鈕
</ol>
</div>
<div id="arr"><span id="left"><</span><span id="right">></span></div>
</div>
js代碼：
<script>
var box = document.getElementById("box");
var kuang = box.children[0];
var kwidth = kuang.offsetWidth;
var oul = kuang.children[0];
var ol = kuang.children[1];
var oli = oul.children;
var arr = box.children[1]; //焦點(diǎn)
var lf = document.getElementById("left");
var rg = document.getElementById("right");
box.onmouseover = function () {
arr.style.display = "block";
clearInterval(timer);
}
box.onmouseout = function () {
arr.style.display = "none";
timer=setInterval(clickHandle,2000);
};
//根據(jù)li的個(gè)數(shù)去創(chuàng)建小按鈕
var pic=0;
for(var i=0;i<oli.length;i++){
var list=document.createElement("li");
ol.appendChild(list);
list.setAttribute("index",i);
list.innerHTML=(i+1);
list.onmouseover=function(){
for(var j=0;j<ol.children.length;j++){
ol.children[j].className="";
}
this.className="current";
pic=this.getAttribute("index");
f1(oul,-pic*kwidth);
};
list.onmouseout=function(){
this.className="";
}
}
//設(shè)置ol中第一個(gè)li有背景顏色
ol.children[0].className="current";
//克隆克隆一個(gè)ul中第一個(gè)li,加入到ul中的最后
oul.appendChild(oul.children[0].cloneNode(true));
//自動(dòng)播放
var timer=setInterval(clickHandle,2000);
//右邊的按鈕
rg.onclick=clickHandle;
function clickHandle(){
if(pic==oli.length-1){ //pic中存的是索引值
pic=0;
oul.style.left=0;
}
pic++;
f1(oul,-pic*kwidth);
if(pic==oli.length-1){
ol.children[ol.children.length-1].className="";
ol.children[0].className="current";
}else {
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = ""
}
ol.children[pic].className= "current";
}
}
//左邊的按鈕
lf.onclick=function(){
if(pic==0){
pic=4;
oul.style.left=-pic*kwidth+"px";
}
pic--;
f1(oul,pic*kwidth);
for(var j=0;j<oli.length;j++){
oli[j].className="";
}
this.className="current";
}
//運(yùn)動(dòng)函數(shù)
function f1(ele, target) {
clearInterval(ele.timer);
var current = ele.offsetLeft;
ele.timer = setInterval(function () {
var step = 10;
step = current < target ? step : -step;
current += step;
if (Math.abs(target - current) < Math.abs(step)) {
clearInterval(ele.timer);
ele.style.left = target + "px";
} else {
ele.style.left = current + "px";
}
}, 20);
}
筋頭云案例：
基本布局代碼：
<div class="nav"> //相對定位
<span id="cloud"></span> //絕對定位
<ul id="navBar">
<li>北京校區(qū)</li>
<li>上海校區(qū)</li>
<li>廣州校區(qū)</li>
<li>深圳校區(qū)</li>
<li>武漢校區(qū)</li>
<li>關(guān)于我們</li>
<li>聯(lián)系我們</li>
<li>招賢納士</li>
</ul>
</div>
js代碼：
//勻速動(dòng)畫
function animate(element, target) {
clearInterval(element.timeId); //清理定時(shí)器
element.timeId = setInterval(function () {
var current = element.offsetLeft; //獲取元素的當(dāng)前位置
var step = (target - current) / 10; //移動(dòng)的步數(shù)
step = step > 0 ? Math.ceil(step) : Math.floor(step);
current += step;
element.style.left = current + "px";
if (current == target) {
//清理定時(shí)器
clearInterval(element.timeId);
}
}, 20);
}
var cloud = my$("cloud"); //獲取云彩
var list = my$("navBar").children; //獲取所有的li標(biāo)簽
for (var i = 0; i < list.length; i++) {//給所有的li注冊鼠標(biāo)進(jìn)入,鼠標(biāo)離開,點(diǎn)擊事件
list[i].onmouseover = mouseoverHandle; //鼠標(biāo)進(jìn)入事件
list[i].onclick = clickHandle; //點(diǎn)擊事件
list[i].onmouseout = mouseoutHandle; //鼠標(biāo)離開事件
}
function mouseoverHandle() {//進(jìn)入
animate(cloud, this.offsetLeft);
}
var lastPosition = 0;
function clickHandle() {//點(diǎn)擊
lastPosition = this.offsetLeft;//點(diǎn)擊的時(shí)候,記錄此次點(diǎn)擊的位置
}
function mouseoutHandle() {//離開
animate(cloud, lastPosition);
}
手風(fēng)琴案例
簡單的布局：
<div id="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
js實(shí)現(xiàn)代碼：
<script src="common.js"></script>
<script>
//獲取任意一個(gè)元素的任意一個(gè)屬性的當(dāng)前的值---當(dāng)前屬性的位置值
function getStyle(element, attr) {
return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr] || 0;
}
function animate(element, json, fn) {
clearInterval(element.timeId);//清理定時(shí)器
//定時(shí)器,返回的是定時(shí)器的id
element.timeId = setInterval(function () {
var flag = true;//默認(rèn),假設(shè),全部到達(dá)目標(biāo)
//遍歷json對象中的每個(gè)屬性還有屬性對應(yīng)的目標(biāo)值
for (var attr in json) {
//判斷這個(gè)屬性attr中是不是opacity
if (attr == "opacity") {
//獲取元素的當(dāng)前的透明度,當(dāng)前的透明度放大100倍
var current = getStyle(element, attr) * 100;
//目標(biāo)的透明度放大100倍
var target = json[attr] * 100;
var step = (target - current) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
current += step;//移動(dòng)后的值
element.style[attr] = current / 100;
} else if (attr == "zIndex") { //判斷這個(gè)屬性attr中是不是zIndex
//層級(jí)改變就是直接改變這個(gè)屬性的值
element.style[attr] = json[attr];
} else {
//普通的屬性
//獲取元素這個(gè)屬性的當(dāng)前的值
var current = parseInt(getStyle(element, attr));
//當(dāng)前的屬性對應(yīng)的目標(biāo)值
var target = json[attr];
//移動(dòng)的步數(shù)
var step = (target - current) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
current += step;//移動(dòng)后的值
element.style[attr] = current + "px";
}
//是否到達(dá)目標(biāo)
if (current != target) {
flag = false;
}
}
if (flag) {
//清理定時(shí)器
clearInterval(element.timeId);
//所有的屬性到達(dá)目標(biāo)才能使用這個(gè)函數(shù),前提是用戶傳入了這個(gè)函數(shù)
if (fn) {
fn();
}
}
//測試代碼
console.log("目標(biāo):" + target + ",當(dāng)前:" + current + ",每次的移動(dòng)步數(shù):" + step);
}, 20);
}
//先獲取所有的li標(biāo)簽
var list = my$("box").getElementsByTagName("li");
for (var i = 0; i < list.length; i++) {
list[i].style.backgroundImage = "url(images/" + (i + 1) + ".jpg)";
//鼠標(biāo)進(jìn)入
list[i].onmouseover = mouseoverHandle;
//鼠標(biāo)離開
list[i].onmouseout = mouseoutHandle;
}
//進(jìn)入
function mouseoverHandle() {
for (var j = 0; j < list.length; j++) {
animate(list[j], {"width": 100});//動(dòng)畫效果
}
animate(this, {"width": 800});
}
//離開
function mouseoutHandle() {
for (var j = 0; j < list.length; j++) {
animate(list[j], {"width": 240});//動(dòng)畫效果
}
}
</script>
圖片跟著鼠標(biāo)飛：
//圖片跟著鼠標(biāo)飛,可以在任何的瀏覽器中實(shí)現(xiàn)
//window.event和事件參數(shù)對象e的兼容
//clientX和clientY單獨(dú)的使用的兼容代碼
//scrollLeft和scrollTop的兼容代碼
//pageX,pageY和clientX+scrollLeft 和clientY+scrollTop
//把代碼封裝在一個(gè)函數(shù)
//把代碼放在一個(gè)對象中
var evt={
//window.event和事件參數(shù)對象e的兼容
getEvent:function (evt) {
return window.event||evt;
},
//可視區(qū)域的橫坐標(biāo)的兼容代碼
getClientX:function (evt) {
return this.getEvent(evt).clientX;
},
//可視區(qū)域的縱坐標(biāo)的兼容代碼
getClientY:function (evt) {
return this.getEvent(evt).clientY;
},
//頁面向左卷曲出去的橫坐標(biāo)
getScrollLeft:function () {
return window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft||0;
},
//頁面向上卷曲出去的縱坐標(biāo)
getScrollTop:function () {
return window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop||0;
},
//相對于頁面的橫坐標(biāo)(pageX或者是clientX+scrollLeft)
getPageX:function (evt) {
return this.getEvent(evt).pageX? this.getEvent(evt).pageX:this.getClientX(evt)+this.getScrollLeft();
},
//相對于頁面的縱坐標(biāo)(pageY或者是clientY+scrollTop)
getPageY:function (evt) {
return this.getEvent(evt).pageY?this.getEvent(evt).pageY:this.getClientY(evt)+this.getScrollTop();
}
};
//最終的代碼
document.onmousemove=function (e) {
my$("im").style.left=evt.getPageX(e)+"px";
my$("im").style.top=evt.getPageY(e)+"px";
};
滾動(dòng)條案例
api第七天案例
鋼琴版導(dǎo)航條：
css樣式：
* {
margin: 0;
padding: 0;
list-style: none;
}
.nav {
width: 900px;
height: 60px;
background-color: black;
margin: 0 auto;
}
.nav li {
width: 100px;
height: 60px;
/*border: 1px solid yellow;*/
float: left;
position: relative;
overflow: hidden;
}
.nav a {
position: absolute;
width: 100%;
height: 100%;
font-size: 24px;
color: blue;
text-align: center;
line-height: 60px;
text-decoration: none;
z-index: 2;
}
.nav span {
position: absolute;
width: 100%;
height: 100%;
background-color: yellow;
top: 60px;
}
jq實(shí)現(xiàn)代碼： 需要引入jq文件
$(function () {
//給li注冊鼠標(biāo)進(jìn)入事件,讓li下面的span top：0 播放音樂
$(".nav li").mouseenter(function () {
$(this).children("span").stop().animate({top: 0});
//播放音樂
var idx = $(this).index();
$(".nav audio").get(idx).load();
$(".nav audio").get(idx).play();
}).mouseleave(function () {
$(this).children("span").stop().animate({top: 60});
});
//節(jié)流閥 ：按下的時(shí)候，觸發(fā)婆赠，如果沒彈起绵脯，不讓觸發(fā)下一次
//1. 定義一個(gè)flag
var flag = true;
//按下1-9這幾個(gè)數(shù)字鍵，能觸發(fā)對應(yīng)的mouseenter事件
$(document).on("keydown", function (e) {
if(flag) {
flag = false;
//獲取到按下的鍵
var code = e.keyCode;
if(code >= 49 && code <= 57){
//觸發(fā)對應(yīng)的li的mouseenter事件
$(".nav li").eq(code - 49).mouseenter();
}
}
});
$(document).on("keyup", function (e) {
flag = true;
//獲取到按下的鍵
var code = e.keyCode;
if(code >= 49 && code <= 57){
//觸發(fā)對應(yīng)的li的mouseenter事件
$(".nav li").eq(code - 49).mouseleave();
}
});
//彈起的時(shí)候页藻，觸發(fā)mouseleave事件
});
事件
鍵盤控制div移動(dòng)
如果需要在頁面中移動(dòng)桨嫁，要將元素脫離文檔流（否則會(huì)影響頁面布局）
<div style="position: absolute;background-color:pink;width: 60px;height: 60px;"></div>
js實(shí)現(xiàn)代碼：
var odiv=document.getElementsByTagName("div")[0];
document.onkeydown=function(e){
var evt=e||event;
var x=odiv.offsetLeft; //獲取div的坐標(biāo)值
var y=odiv.offsetTop;
var code=evt.keyCode; //獲取鍵盤碼
switch (code){ //當(dāng)按下方向鍵，執(zhí)行對應(yīng)的功能
case 38:
odiv.style.left=x+"px";
odiv.style.top=y-10+"px";
break;
case 40:
odiv.style.left=x+"px";
odiv.style.top=y+10+"px";
break;
case 37:
odiv.style.left=x-10+"px";
odiv.style.top=y+"px";
break;
case 39:
odiv.style.left=x+10+"px";
odiv.style.top=y+"px";
break;
}
}
鼠標(biāo)跟隨特效：
js實(shí)現(xiàn)代碼：
for(var i=0;i<10;i++){ //創(chuàng)建10個(gè)div份帐，并加入到頁面中
var dv=document.createElement("div");
document.body.appendChild(dv);
}
var odiv=document.getElementsByTagName("div");
document.onmousemove=function(e){
var evt=e||event;
var x=evt.clientX; //獲取鼠標(biāo)的坐標(biāo)
var y=evt.clientY;
odiv[0].style.left=x+"px"; //讓第一個(gè)跟隨鼠標(biāo)移動(dòng)
odiv[0].style.top=y+"px";
//讓后一個(gè)跟隨前一個(gè)移動(dòng)
for(var i=odiv.length-1;i>0;i--){
odiv[i].style.left=odiv[i-1].style.left;
odiv[i].style.top=odiv[i-1].style.top;
}
}
事件委托機(jī)制 ----------重要
eg：點(diǎn)擊按鈕往ul中添加li，使添加的li也有相同的事件
var obtn=document.getElementById("btn");
var olist=document.getElementById("list"); //獲取ul
var oli=olist.children; //獲取ul的子節(jié)點(diǎn)li
olist.onclick=function(e){
var evt=e||event;
var tar=evt.target||evt.srcElement; //獲取事件源
if(tar.nodeName.toLowerCase()=="li"){ 判斷事件源是不是是該執(zhí)行目標(biāo)
console.log(tar.innerHTML); //此時(shí)不能用this楣导，因?yàn)閠his指向的是ul
}
}
obtn.onclick=function(){
for(var i=0;i<4;i++){
var lli=document.createElement("li");
lli.innerHTML="aaaa";
olist.appendChild(lli);
}
}
拖拽效果
var odiv=document.getElementsByTagName("div")[0];
odiv.onmousedown=function(e){ //按下鼠標(biāo)的事件
var evt=e||event;
var lf=evt.offsetX;
var tp=evt.offsetY;
document.onmousemove=function(e){ //鼠標(biāo)移動(dòng)事件
var evt=e||event;
var x=evt.clientX-lf; //讓鼠標(biāo)一直在按下的那個(gè)位置
var y=evt.clientY-tp;
//設(shè)置元素只能在可視區(qū)域內(nèi)移動(dòng)
if(x<=0){
x=0;
}
if(x>=document.documentElement.clientWidth-odiv.offsetWidth){
x=document.documentElement.clientWidth-odiv.offsetWidth
}
if(y<=0){
y=0;
}
if(y>=document.documentElement.clientHeight-odiv.offsetHeight){
y=document.documentElement.clientHeight-odiv.offsetHeight;
}
odiv.style.left=x+"px"; //讓元素跟著鼠標(biāo)移動(dòng)
odiv.style.top=y+"px";
}
document.onmouseup=function(){ //鼠標(biāo)抬起事件
document.onmousemove=null;
}
}
九宮格
js代碼：
var obox=document.getElementById("box");
//創(chuàng)建結(jié)構(gòu)
for(var i=0;i<3;i++){ //控制外層的行數(shù)
for(var j=0;j<3;j++){ //控制內(nèi)層
var odiv=document.createElement("div");
obox.appendChild(odiv);
/* var r=Math.floor(Math.random()*256);
var g=Math.floor(Math.random()*256);
var b=Math.floor(Math.random()*256);*/
odiv.style.backgroundColor="rgb("+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+")"; //字符串拼接
odiv.style.left=j*(odiv.offsetWidth+10)+"px";
odiv.style.top=i*(odiv.offsetHeight+10)+"px";
}
}
var strarr=["a","b","c","d","e","f","g","h","i","m"];
var child=obox.children;
//給每個(gè)小塊加上文字
for(var i=0;i<child.length;i++){
child[i].innerHTML=strarr[i];
}
//拖拽
for(var i=0;i<child.length;i++){
child[i].onmousedown=function(e){
var evt=e||event;
var lf=evt.offsetX;
var tp=evt.offsetY;
var current=this; //將this保存current中 废境，因?yàn)樯舷轮赶虻膖his不同
//因?yàn)橥蟿?dòng)的時(shí)候原位置，還需要有東西筒繁，所以才克隆
var clone=current.cloneNode(); //克隆一個(gè)當(dāng)前的元素噩凹，并添加到盒子里
clone.style.border="1px dashed #000";
// obox.appendChild(clone); //因?yàn)樘砑又罂寺〉乃饕谧詈螅?// 后面需要進(jìn)行距離比較，所以需要將克隆節(jié)點(diǎn)和當(dāng)前節(jié)點(diǎn)進(jìn)行替換
obox.replaceChild(clone,current); //用克隆的節(jié)點(diǎn)替換當(dāng)前節(jié)點(diǎn)
obox.appendChild(current); //把當(dāng)前節(jié)點(diǎn)加到盒子里
current.style.zIndex=1;
document.onmousemove=function(e){
var evt=e||event;
var x= e.clientX-lf-obox.offsetLeft;
var y= e.clientY-tp-obox.offsetTop;
//當(dāng)前對象的坐標(biāo)：隨著鼠標(biāo)移動(dòng)
current.style.left=x+"px";
current.style.top=y+"px";
return false; //取消默認(rèn)行為
}
document.onmouseup=function(){
//將當(dāng)前的這個(gè)和剩下所有的進(jìn)行比較毡咏，找出距離最近的
//將當(dāng)前放到距離最近的位置驮宴，最近的那個(gè)放到克隆的位置
var arr=[];
var newarr=[];
//以為此時(shí)當(dāng)前節(jié)點(diǎn)的索引在最后，不需要和自身比較呕缭，所以去掉最后一個(gè)索引
for(var i=0;i<child.length-1;i++){
var wid=current.offsetLeft-child[i].offsetLeft;
var hei=current.offsetTop-child[i].offsetTop;
var juli=Math.sqrt(Math.pow(wid,2)+Math.pow(hei,2));
arr.push(juli);
newarr.push(juli);
}
arr.sort(function(a,b){
return a-b;
})
var min=arr[0];
var minindex=newarr.indexOf(min);
//交換位置：當(dāng)前的坐標(biāo)為最小距離對應(yīng)的位置堵泽，最小值的放在克隆所在的位置
current.style.left=child[minindex].style.left;
current.style.top=child[minindex].style.top;
child[minindex].style.left=clone.style.left;
child[minindex].style.top=clone.style.top;
obox.removeChild(clone); //交換位置之后將克隆的節(jié)點(diǎn)刪除
document.onmousemove=null;
document.onmouseup=null;
}
}
}
軌跡
js代碼：
var odiv = document.getElementsByTagName("div")[0];
var arr=[]; //用來保存鼠標(biāo)移動(dòng)時(shí)的坐標(biāo)位置
document.onmousedown = function (e) {
var evt1 = e || event;
var x=evt1.clientX;
var y=evt1.clientY;
arr.push({pagex:x,pagey:y});
document.onmousemove=function(e){
var evt = e || event;
var x = evt.clientX;
var y = evt.clientY;
arr.push({pagex:x,pagey:y}); //采用對象數(shù)組存儲(chǔ)，因?yàn)樽鴺?biāo)成對好進(jìn)行操作
return false; //取消瀏覽器的默認(rèn)行為
//console.log(arr);
}
document.onmouseup=function(){
var timer=setInterval(function(){
odiv.style.left=arr[0].pagex+"px";
odiv.style.top=arr[0].pagey+"px";
arr.splice(0,1); //讓元素坐標(biāo)始終從0開始恢总，splice會(huì)改變原數(shù)組長度
if(arr.length==0){ //當(dāng)數(shù)組長度為0迎罗，說明保存的坐標(biāo)執(zhí)行完了
clearInterval(timer);
}
},20);
document.onmousemove=null;
}
}
cookie
一周內(nèi)免登錄
樣式代碼：
<form action="">
姓名：<input type="text" id="usename"/><br />
密碼：<input type="text" i="mima"/><br />
一周內(nèi)免登陸<input type="checkbox" />
<input type="button" id="btn" value="登錄"/><br />
</form>
js功能代碼：
var input=document.getElementsByTagName("input");
if(getCookie("usename")){ //判端cookie是否有數(shù)據(jù)
input[0].value=getCookie("usename");
input[1].value=getCookie("password");
input[2].checked=true;
}
input[3].onclick=function(){
if(input[2].checked){
setCookie("usename",input[0].value,1);
setCookie("password",input[1].value,1);
}else{
removeCookie("usename");
removeCookie("password");
}
}
//將函數(shù)作為對象的方法進(jìn)行封裝
function setCookie(name,value,n){
var date=new Date();
date.setDate(date.getDate()+n);
//name+"="+value+";"+"expires"+"="+odate;
document.cookie=name+"="+value+";"+"expires"+"="+date;
}
function getCookie(name){
var str=document.cookie;
var arr=str.split(";");
for(var i=0;i<arr.length;i++){
var newArr=arr[i].split("=");
if(newArr[0]==name){
return newArr[1];
}
}
}
function removeCookie(name){
setCookie(name, 11, -2);
}
購物車
產(chǎn)品頁面js代碼：
<script type="text/javascript">
//商品數(shù)據(jù) 后臺(tái)傳過來
var data = [{
"id":10001,
"title":"蒙牛",
"price":60,
"imgUrl":"img/photo1.jpg"
},{
"id":10002,
"title":"婚紗照",
"price":19999,
"imgUrl":"img/photo2.jpg"
},{
"id":10003,
"title":"加濕器",
"price":100,
"imgUrl":"img/photo3.jpg"
}];
//生成結(jié)構(gòu)
var oUl = document.getElementById("productList");
var str = "";
for(var i = 0; i < data.length; i++){
str += "<li><img src='"+data[i].imgUrl+"'><p>"+data[i].title+"</p><p>"+data[i].price+"</p><input class='addBtn' type='button' data-id='"+data[i].id+"' value='加入購物車'></li>";
}
oUl.innerHTML = str;
//加入購物車
var cartNum = document.getElementById("cartNum");
var oNum = cartNum.children[0];
var count = 0;
var addBtns = document.getElementsByClassName("addBtn");
//定義一個(gè)對象，去保存id和數(shù)量 判斷cookie里有沒有存過數(shù)據(jù)片仿，有就用纹安，沒有就賦值為{}
if(getCookie("cart")){
var obj = JSON.parse(getCookie("cart"));//將json字符串轉(zhuǎn)換成對象的
}else{
var obj = {};
}
//取所有購物車商品數(shù)量
for(var i in obj){
count += obj[i];
}
oNum.innerHTML = count;
for(var i = 0; i < addBtns.length; i++){
addBtns[i].onclick = function(){
//存數(shù)據(jù)時(shí) 存id:num cart {"10001":1,"10002":3}
//考慮如果取到加入購物車的商品id
var prodId = this.getAttribute("data-id");
if(obj[prodId]==undefined){
obj[prodId] = 1;
}else{
obj[prodId]++;
}
//把這個(gè)對象存到cookie
//console.log(obj);
var objToStr = JSON.stringify(obj);//將js對象（數(shù)組，對象）轉(zhuǎn)換成JSON格式的字符串
setCookie("cart",objToStr,7);
//顯示購物籃中的數(shù)量
oNum.innerHTML = ++count;
}
}
</script>
cart頁面的js代碼：
<script type="text/javascript">
/*var data = [{
"id":10001,
"title":"蒙牛",
"price":60,
"imgUrl":"img/photo1.jpg"
},{
"id":10002,
"title":"婚紗照",
"price":19999,
"imgUrl":"img/photo2.jpg"
},{
"id":10003,
"title":"加濕器",
"price":100,
"imgUrl":"img/photo3.jpg"
}];*/
var data = {"10001":{
"id":10001,
"title":"蒙牛",
"price":60,
"imgUrl":"img/photo1.jpg"
},"10002":{
"id":10002,
"title":"婚紗照",
"price":19999,
"imgUrl":"img/photo2.jpg"
},"10003":{
"id":10003,
"title":"加濕器",
"price":100,
"imgUrl":"img/photo3.jpg"
}};
var oList = document.getElementById("cartList");
var obj = {};
if(getCookie("cart")){
obj = JSON.parse(getCookie("cart"));
}
var str = "";
for(var i in obj){
/*for(var j = 0; j < data.length; j++){
if(i==data[j].id){
str += "<li><img src='"+data[j].imgUrl+"'><span>"+data[j].title+"</span><span>"+data[j].price+"</span><span>"+obj[i]+"</span></li>"
}
}*/
str += "<li><img src='"+data[i].imgUrl+"'><span>"+data[i].title+"</span><span>"+data[i].price+"</span><span>"+obj[i]+"</span></li>"
}
oList.innerHTML = str;
</script>
正則表達(dá)式
表單驗(yàn)證
簡單的布局：
<div class="container" id="dv">
<label for="qq">Q Q</label><input type="text" id="qq"><span></span><br/>
<label>手機(jī)</label><input type="text" id="phone"><span></span><br/>
<label>郵箱</label><input type="text" id="e-mail"><span></span><br/>
<label>座機(jī)</label><input type="text" id="telephone"><span></span><br/>
<label>姓名</label><input type="text" id="fullName"><span></span><br/>
</div>
js代碼：
checkInput(my$("qq"),/^\d{5,11}$/); //qq的
checkInput(my$("phone"),/^\d{11}$/); //手機(jī)
checkInput(my$("e-mail"),/^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}$/); //郵箱
checkInput(my$("telephone"),/^\d{3,4}[-]\d{7,8}$/); //座機(jī)號(hào)碼
checkInput(my$("fullName"),/^[\u4e00-\u9fa5]{2,6}$/); //中文名字
//通過正則表達(dá)式驗(yàn)證當(dāng)前的文本框是否匹配并顯示結(jié)果
function checkInput(input,reg) {
//文本框注冊失去焦點(diǎn)的事件
input.onblur=function () {
if(reg.test(this.value)){
this.nextElementSibling.innerText="正確了";
this.nextElementSibling.style.color="green";
}else{
this.nextElementSibling.innerText="讓你得瑟,錯(cuò)了吧";
this.nextElementSibling.style.color="red";
}
};
}
運(yùn)動(dòng)
圓周運(yùn)動(dòng)
簡單的布局： 一個(gè)小球圍繞大球轉(zhuǎn)動(dòng)
<div id="box"> 相對定位
<div id="circal"></div> 子對定位 //注意小球的margin值
</div>
js實(shí)現(xiàn)代碼： //思路：讓球的坐標(biāo)隨角度變化而變化
var box=document.getElementById("box");
var circal=document.getElementById("circal");
var count=0;
var r=box.offsetWidth/2;
var timer=setInterval(function(){
count++;
var x=r+r*Math.cos(count*Math.PI/180);
//x=r+r*cosa; math中用的是弧度值 記住了
var y=r-r*Math.sin(count*Math.PI/180);
circal.style.left=x+"px";
circal.style.top=y+"px";
},20);
平拋運(yùn)動(dòng)
簡單的布局：
<div id="ball"></div>
js代碼： //利用平拋的原理，讓球的位置發(fā)生改變
var ball=document.getElementById("ball");
var count=0;
var timer=setInterval(function(){
//x=vt;y=0.5*10*t*t;
count++;
var t=count*0.02;
var x=30*t;
var y=0.5*10*t*t;
ball.style.left=x+"px";
ball.style.top=y+"px";
if(x>600||y>600){
clearInterval(timer);
}
},20);
拋物線運(yùn)動(dòng)
簡單的布局
<div id="ball"></div>
<div id="cart"></div>
js實(shí)現(xiàn)代碼： 思路：先求出拋物線函數(shù)厢岂，然后再確定球的位置坐標(biāo)
var ball=document.getElementById("ball");
var cart=document.getElementById("cart");
var count=0;
var timer=setInterval(function(){
count+=2;
var x1=ball.offsetLeft;
var y1=ball.offsetTop;
var x2=cart.offsetLeft;
var y2=cart.offsetTop;
//假設(shè)拋物線過原點(diǎn) y=ax*x+b*x+c; a給定的值光督，c=0;
var a=0.0005;
var b=((y2-y1)-a*(x2-x1)*(x2-x1))/(x2-x1); //相當(dāng)于拋物線函數(shù)求出來了
var x=count;
var y=a*x*x+b*x;
ball.style.left=x1+x+"px";
ball.style.top=y1+y+"px";
if(ball.offsetLeft>=x2){
clearInterval(timer);
}
},20);
效果案例
startMove.js
function startMove(obj, json, fn) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var flag = true; //假設(shè)所有屬性都達(dá)到目標(biāo)值
for(var attr in json) {
var iTarget = json[attr];
if(attr == "opacity"){
var iCur = parseInt(getStyle(obj, attr)*100);
}else{
var iCur = parseInt(getStyle(obj, attr));
}
var iSpeed = (iTarget - iCur) / 7;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if(attr == "opacity"){
obj.style.opacity = (iCur + iSpeed)/100;
obj.style.filter = "alpha(opacity="+(iCur + iSpeed)+")";
}else{
obj.style[attr] = iCur + iSpeed + "px";
}
//只要有一個(gè)達(dá)到目標(biāo)值，定時(shí)器就會(huì)被清除,會(huì)導(dǎo)致部分屬性沒有達(dá)到目標(biāo)值
//所有屬性都達(dá)到目標(biāo)值時(shí)塔粒，清除定時(shí)器
if(iCur != iTarget) { //假設(shè)是否成立由此判斷
flag = false;
}
}
if(flag) { //如果假設(shè)成立可帽，清除定時(shí)器
clearInterval(obj.timer);
if(fn) {
fn();
}
}
}, 20)
}
//獲取屬性值
function getStyle(obj, attr) {
if(obj.currentStyle) {
return obj.currentStyle[attr];
}
return getComputedStyle(obj, null)[attr];
輪播圖
css樣式
<style type="text/css">
body,ul,li{
padding: 0;
margin: 0;
}
li{
list-style: none;
}
img{
display: block;
border: none;
}
#scrollBanner{
width: 900px;
height: 300px;
overflow: hidden;
position: relative;
}
#scrollList {
position: absolute;
height: 300px;
}
#scrollList li{
float: left;
width: 900px;
height: 300px;
}
#scrollList img{
width: 900px;
height: 300px;
}
#btns div{
position: absolute;
top: 50%;
width: 50px;
height: 50px;
margin-top: -25px;
background: #000;
opacity: .3;
line-height: 50px;
text-align: center;
font-size: 50px;
color: white;
cursor: pointer;
}
#btns div:first-child{
left:50px;
}
#btns div:last-child{
right:50px;
}
#nums{
position: absolute;
bottom: 20px;
right: 20px;
}
#nums li{
float: left;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
background: white;
color: red;
cursor: pointer;
margin:0 10px;
border-radius: 50%;
}
#nums li.hover,#nums li:hover{
background: red;
color: white;
}
</style>
html布局
<div id="scrollBanner">
<ul id="scrollList">
<li><img src="img/1.jpg"></li>
<li><img src="img/2.jpg"></li>
<li><img src="img/3.jpg"></li>
<li><img src="img/1.jpg"></li>
</ul>
<div id="btns">
<div><</div>
<div>></div>
</div>
<ul id="nums">
<li class="hover">1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
js實(shí)現(xiàn)代碼
<script src="startMove.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var oScrollBanner = document.getElementById("scrollBanner");
var oScrollList = document.getElementById("scrollList");
var aList =oScrollList.children;
var perWidth = aList[0].offsetWidth;
oScrollList.style.width = perWidth * aList.length + "px";
var i = 0;
var timer = setInterval(function(){
move();
},3000);
function move(){
i++;
if(i==aList.length){
oScrollList.style.left = 0;
i = 1;
}
if(i==-1){
oScrollList.style.left = -perWidth * (aList.length-1) + "px";
i = aList.length - 2;
}
//控制角標(biāo)的變化
for(var j = 0; j < aNumsList.length; j++){
aNumsList[j].className = "";
}
if(i==aList.length - 1){
aNumsList[0].className = "hover";
}else{
aNumsList[i].className = "hover";
}
startMove(oScrollList,{left:-perWidth*i});
}
//左右按鈕實(shí)現(xiàn)圖片切換
var oBtns = document.getElementById("btns");
var oPrev = oBtns.children[0];
var oNext = oBtns.children[1];
oNext.onclick = function(){
move();
}
oPrev.onclick = function(){
i-=2;
move();
}
oScrollBanner.onmouseover = function(){
clearInterval(timer);
}
oScrollBanner.onmouseout = function(){
timer = setInterval(function(){
move();
},3000);
}
//角標(biāo)變化
var oNums = document.getElementById("nums");
var aNumsList = oNums.children;
for(let j = 0; j < aNumsList.length; j++){
aNumsList[j].onmouseover = function(){
i = j-1;
move();
}
}
</script>
星級(jí)評價(jià)
html代碼：
<ul>
<li></li> //css樣式給li加的背景圖
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
js代碼：
var aLi = document.getElementsByTagName('li');
var flag = false;
var index = 0; //表示點(diǎn)擊了哪個(gè)星星
for(let i = 0; i < aLi.length; i++){
aLi[i].onmouseover = function(){
for(var j = 0; j < aLi.length; j++){
//用的是背景圖，改變定位信息即可
aLi[j].style.backgroundPosition = "0 0";
}
for(var j = 0; j <= i; j++){
aLi[j].style.backgroundPosition = "0 -28px";
}
}
aLi[i].onmouseout = function(){
for(var j = 0; j < aLi.length; j++){
aLi[j].style.backgroundPosition = "0 0";
}
if(flag){
for(var j = 0; j <= index; j++){
aLi[j].style.backgroundPosition = "0 -28px";
}
}
}
aLi[i].onclick = function(){
flag = true;
index = i;
}
}
放大鏡
css代碼：
<style type="text/css">
body,ul,li{
margin: 0;
padding: 0;
}
body{
height: 1000px;
}
ul,li{
list-style: none;
}
img{
display: block;
border: none;
}
#zoomBox{
position: relative;
margin: 20px;
width: 400px;
border: 1px solid #CECECE;
}
#midArea img{
width: 400px;
height: 400px;
}
#midArea{
cursor: move;
}
#zoom{
display: none;
position: absolute;
width: 200px;
height: 200px;
background: yellow;
opacity: .5;
}
#bigArea{
display: none;
position: absolute;
left: 400px;
top: -1px;
border: 1px solid #CECECE;
width: 400px;
height: 400px;
overflow: hidden;
}
#bigArea img{
position: absolute;
width: 800px;
height: 800px;
}
#smallArea ul{
display: flex;
height: 100px;
width: 400px;
border-top: 1px solid #CECECE;
align-items: center;
justify-content: space-around;
}
#smallArea li{
border: 2px solid white;
padding: 6px;
}
#smallArea li:hover,#smallArea li.hover{
border: 2px solid red;
}
#smallArea img{
width: 60px;
height: 60px;
}
</style>
html布局代碼
<div id="zoomBox">
<div id="midArea">
<img src="img/m01.jpg">
<div id="zoom"></div>
</div>
<div id="bigArea">
<img src="img/m01.jpg">
</div>
<div id="smallArea">
<ul>
<li class="hover"><img src="img/m01.jpg"></li>
<li><img src="img/m02.jpg"></li>
<li><img src="img/m03.jpg"></li>
<li><img src="img/m04.jpg"></li>
<li><img src="img/m05.jpg"></li>
</ul>
</div>
</div>
js實(shí)現(xiàn)代碼
var oMidArea = document.getElementById("midArea");
var oZoom = document.getElementById("zoom");
var oBigArea = document.getElementById("bigArea");
var oZoomBox = document.getElementById("zoomBox");
var oBigImg = oBigArea.children[0];
var oSmallArea = document.getElementById("smallArea");
var aSmallList = oSmallArea.children[0].children;
var oMidImg = oMidArea.children[0];
oMidArea.onmouseover = function(){
oZoom.style.display = "block";
oBigArea.style.display = "block";
}
oMidArea.onmouseout = function(){
oZoom.style.display = "none";
oBigArea.style.display = "none";
}
oMidArea.onmousemove = function(e){
//控制放大鏡的移動(dòng)
var evt = e || event;
var x = evt.pageX - oZoomBox.offsetLeft - oZoom.offsetWidth/2;
var y = evt.pageY - oZoomBox.offsetTop - oZoom.offsetHeight/2;
if(x <= 0){
x = 0;
}
if(x >= oMidArea.offsetWidth - oZoom.offsetWidth){
x = oMidArea.offsetWidth - oZoom.offsetWidth;
}
if(y <= 0){
y = 0;
}
if(y >= oMidArea.offsetHeight - oZoom.offsetHeight){
y = oMidArea.offsetHeight - oZoom.offsetHeight;
}
oZoom.style.left = x + "px";
oZoom.style.top = y + "px";
//控制大圖的移動(dòng)
oBigImg.style.left = - oZoom.offsetLeft/oMidArea.offsetWidth * oBigImg.offsetWidth + "px";
oBigImg.style.top = - oZoom.offsetTop/oMidArea.offsetHeight * oBigImg.offsetHeight + "px";
}
//點(diǎn)擊縮略圖 切圖片
for(let i = 0; i < aSmallList.length; i++){
aSmallList[i].onclick = function(){
for(var j = 0; j < aSmallList.length; j++){
aSmallList[j].className = "";
}
aSmallList[i].className = "hover";
oMidImg.src = aSmallList[i].children[0].src;
oBigImg.src = aSmallList[i].children[0].src;
}
}
定時(shí)器案例
循環(huán)打印5,6,7,8,9,10,9,8,7,6,5,6,7…循環(huán)輸出
var a=4;
var b=1;
setInterval(function(){
a=a+b;
if(a==10){
b=-1;
}else if(a==5){
b=1;
}
console.log(a);
},500);
ajax
ajax的基本封裝 ----必須掌握
function ajax(url,fn){
if(window.XMLHttpRequest){
var xhr = new XMLHttpRequest();
}else{
var xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open("get",url,true);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
var data = xhr.responseText;
fn(data);
}
}
}
}
ajax的完整封裝
function ajax(obj){
//obj -> type url data success
var str = "";
for(var key in obj.data){
str += key+"="+obj.data[key]+"&";
}
//str = str.substring(0,str.length-1);
str = str.replace(/&$/,"");
if(window.XMLHttpRequest){
var xhr = new XMLHttpRequest();
}else{
var xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
if(obj.type.toUpperCase()=="GET"){
if(obj.data){
var url = obj.url + "?" + str;
}else{
var url = obj.url;
}
xhr.open("get",url,true);
xhr.send();
}
if(obj.type.toUpperCase()=="POST"){
xhr.open("post",obj.url,true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(str);
}
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
var data = xhr.responseText;
obj.success(data);
}
}
}
}
頁碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
#list{
width: 500px;
}
#list li{
border-bottom: 1px solid #ccc;
height: 40px;
line-height: 40px;
list-style: none;
}
#btm{
margin-top: 20px;
}
#btm li{
float: left;
margin: 0 10px;
border:1px solid #ccc;
list-style: none;
background: orange;
padding: 0 6px;
}
#osp span{
display: inline-block;
padding: 0 10px;
margin: 0 5px;
background: red;
}
</style>
</head>
<body>
<ul id="list"></ul>
<ul id="btm">
<li>上一頁</li>
<li>首頁</li>
<li id="osp"></li>
<li>下一頁</li>
<li>尾頁</li>
</ul>
<script src="ajax.js"></script>
<script>
var list=document.getElementById("list");
var btm=document.getElementById("btm");
var oli=btm.children;
var osp=document.getElementById("osp");
ajax("data.json",foo);
function foo(data){
data=JSON.parse(data);
var tatalnums=data.length;
var pernums=5;
var numsp=Math.ceil(tatalnums/pernums); //得到具體的頁數(shù)
//創(chuàng)建具體的頁碼數(shù)字
var str="";
for(var i=0;i<numsp;i++){
str+=`<span>${i+1}</span>`;
}
osp.innerHTML=str;
//默認(rèn)顯示第一頁的內(nèi)容
index=0;
click(index);
//上一頁事件
var index=0;
oli[0].onclick=function(){
index--;
if(index<=0){
index=0;
}
click(index);
}
function click(index){
var str1="";
for(var i=index*pernums;i<Math.min(data.length,(index+1)*pernums);i++){
str1+=`<li>${data[i]}</li>`;
}
list.innerHTML=str1;
}
//首頁
oli[1].onclick=function(){
index=0;
click(index);
}
//下一頁
oli[oli.length-2].onclick=function(){
index++;
if(index>=numsp-1){
index=numsp-1;
}
click(index);
}
//尾頁
oli[oli.length-1].onclick=function(){
index=numsp-1;
click(index);
}
//具體頁
var ospan=osp.children;
for(var i=0;i<ospan.length;i++){
ospan[i].index=i;
ospan[i].onclick=function(){
index=this.index;
click(index);
}
}
}
</script>
</body>
</html>
data.json數(shù)據(jù)：
["111","2222","3333","2222","3333","2222","3333","2222","3333","2222","3333","2222","3333","2222","3333","2222","3333","2222","3333","2222","3333","2222","4444","2222","3333","55555","3333","2222","3333","2222","3333","2222","6666"]
1
自動(dòng)補(bǔ)全
html樣式代碼
<input type="text" name="txt" id="txt" />
<ul id="list"></ul>
js代碼：
var oTxt = document.getElementById("txt");
var oList = document.getElementById("list");
oTxt.oninput = function(){
ajax({
type:"post",
url:"index.php",
data:{"kw":oTxt.value},
success:function(data){
data = JSON.parse(data);
var str = "";
for(var i = 0; i < data.length; i++){
str += `<li>${data[i]}</li>`;
}
oList.innerHTML = str;
}
})
}
index.php文件代碼：
<?php
$kw = $_POST["kw"];
$arr = ["a","aa","aba","aaaa","aaaaaaaaa"];
$newArr = [];
foreach($arr as $val){
if($kw == substr($val,0,strlen($kw))){
array_push($newArr,$val);
}
}
$json = json_encode($newArr);
echo $json;
?>
jsonp -------百度接口
html結(jié)構(gòu)代碼
搜索<input type="text" id="txt">
<ul id="list">
</ul>
js代碼
<script type="text/javascript">
var oTxt = document.getElementById("txt");
var oList = document.getElementById("list");
//給文本框添加輸入事件
oTxt.oninput = function(){
//jsonp請求窗怒，得到的是callback包裹的函數(shù)
var oScript = document.createElement("script");
oScript.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+oTxt.value+"&cb=aa";
document.body.appendChild(oScript);
document.body.removeChild(oScript);
}
//接收傳來的數(shù)據(jù)并進(jìn)行處理
function aa(data){
data = data.s;
var str = "";
data.forEach(function(item){
str += `<li><a >${item}</a></li>`;
})
oList.innerHTML = str;
}
</script>
promise
promise-ajax的封裝
function ajax(url){
//創(chuàng)建promise對象
var promise = new Promise(function(resolve,reject){
//創(chuàng)建ajax對象
if(window.XMLHttpRequest){
var xhr = new XMLHttpRequest();
}else{
var xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open("get",url,true);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
var data = xhr.responseText;
resolve(data);
}else{
reject();
}
}
}
})
return promise; //返回promise對象
}
紅綠燈
html結(jié)構(gòu)代碼
<ul id="traffic" class="">
<li id="green"></li>
<li id="yellow"></li>
<li id="red"></li>
</ul>
css樣式代碼：
ul {
position: absolute;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/*畫3個(gè)圓代表紅綠燈*/
ul>li {
width: 40px;
height: 40px;
border-radius: 50%;
opacity: 0.2;
display: inline-block;
}
/*執(zhí)行時(shí)改變透明度*/
ul.red>#red,
ul.green>#green,
ul.yellow>#yellow {
opacity: 1.0;
}
/*紅綠燈的三個(gè)顏色*/
#red {
background: red;
}
#yellow {
background: yellow;
}
#green {
background: green;
}
js實(shí)現(xiàn)代碼：
function timeout(timer) {
return function() {
return new Promise(function(resolve, reject) {
setTimeout(resolve, timer)
})
}
}
var green = timeout(1000);
var yellow = timeout(1000);
var red = timeout(1000);
var traffic = document.getElementById("traffic");
(function restart() {
'use strict' //嚴(yán)格模式
traffic.className = 'green';
green().then(function() {
traffic.className = 'yellow';
return yellow();
})
.then(function() {
traffic.className = 'red';
return red();
}).then(function() {
restart()
})
})();
閉包案例
編寫一個(gè)求和函數(shù)sum映跟，使輸入sum(2)(3)或輸入sum(2,3)，輸出結(jié)果相同
可以傳入多個(gè)參數(shù)
function sum(){
var num = arguments[0];
if(arguments.length==1){
return function(sec){
return num+sec;
}
}else{
var num = 0;
for(var i = 0;i<arguments.length;i++){
num = num + arguments[i];
}
return num;
}
}
遞歸----深拷貝
function deepCopy(obj){
if(Array.isArray(obj)){
var newobj=[];
}else{
var newobj={};
}
for(var i in obj){
if(typeof obj[i]=="object"){
newobj[i]=deepCopy(obj[i]);
}else{
newobj[i]=obj[i];
}
}
return newobj;
}
觀察者模式案例
觀察者模式（發(fā)布-訂閱模式）：其定義對象間一種一對多的依賴關(guān)系扬虚，當(dāng)一個(gè)對象的狀態(tài)發(fā)生改變時(shí)努隙，所有依賴于它的對象都將得到通知
var observer = {
regist:function(eventName,callback){
if(!this.obj){
this.obj = {};
}
if(!this.obj[eventName]){
this.obj[eventName] = [callback];
}else{
this.obj[eventName].push(callback);
}
},
emit:function(eventName){
for(var i = 0; i < this.obj[eventName].length; i++){
this.obj[eventName][i]();
// this.obj[eventName][i](arguments[n]); 有參數(shù)的
}
},
remove:function(eventName,callback){
for(var i = 0; i < this.obj[eventName].length; i++){
if(this.obj[eventName][i] == callback){
this.obj[eventName].splice(i,1);
}
}
}
}
//給三個(gè)模塊注冊事件
observer.regist("loginSuccess",function(){
console.log("用戶信息模塊接收到了登錄成功的消息，做出了響應(yīng)");
})
observer.regist("loginSuccess",function(){
console.log("購物車模塊接收到了登錄成功的消息辜昵，做出了響應(yīng)");
})
observer.regist("loginSuccess",function(){
console.log("消息模塊接收到了登錄成功的消息荸镊，做出了響應(yīng)");
})
observer.emit("loginSuccess"); //廣播
JQ
全選和反選：
簡單的布局：
<input type="checkbox" id="checkAll">全選
<input type="checkbox" id="checkOther">反選
<ul>
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
</ul>
jq代碼： 思路：下面的狀態(tài)和全選的狀態(tài)一致，和反選的狀態(tài)相反的
$(function(){
//全選
$("#checkAll").click(function(){
//讓li 下的input的狀態(tài)和當(dāng)前的這個(gè)保持一致
$("li input").prop("checked",$(this).prop("checked"));
});
//反選
$("#checkOther").click(function(){
//遍歷下面的每一個(gè)堪置，讓它的狀態(tài)和它當(dāng)前的狀態(tài)相反
$("li input").each(function(){
$(this).prop("checked",!$(this).prop("checked"));
})
});
//下方
$("li input").click(function(){
//根據(jù)選中狀態(tài)的長度判斷下方是否都選上了
if($("li input:checked").length == $("li input").length){
$("#checkAll").prop("checked",true);
}else{
$("#checkAll").prop("checked",false);
}
})
})
手風(fēng)琴
html結(jié)構(gòu)
<div id="acc">
<ul>
<li class="active">
<h3 class="active">紅玫瑰</h3>
<div><img src="img/bg1.jpg"></div>
</li>
<li>
<h3>白玫瑰</h3>
<div><img src="img/bg2.jpg"></div>
</li>
<li>
<h3>白玫瑰</h3>
<div><img src="img/bg3.jpg"></div>
</li>
<li>
<h3>白玫瑰</h3>
<div><img src="img/bg4.jpg"></div>
</li>
<li class="last">
<h3>白玫瑰</h3>
<div><img src="img/bg5.jpg"></div>
</li>
</ul>
</div>
JQ代碼
<script src="jquery-1.11.0.js"></script>
<script>
$(function(){
$("#acc li").on("mouseenter",function(){
$(this).stop().animate({"width":434}).find("h3").addClass("active")
.end().siblings().stop().animate({"width":50}).find("h3").removeClass("active")
})
})
</script>
多級(jí)下拉菜單
html結(jié)構(gòu)
<ul>
<li>主題市場
<ul>
<li>運(yùn)動(dòng)派
<ul>
<li>三級(jí)菜單a</li>
<li>三級(jí)菜單b</li>
<li>三級(jí)菜單c</li>
<li>三級(jí)菜單d</li>
</ul>
</li>
<li>有車族
<ul>
<li>三級(jí)
<ul>
<li>四級(jí)</li>
<li>四級(jí)</li>
<li>四級(jí)</li>
</ul>
</li>
<li>三級(jí)</li>
<li>三級(jí)</li>
<li>三級(jí)</li>
</ul>
</li>
<li>生活家</li>
</ul>
</li>
<li>特色購物
<ul>
<li>淘寶二手</li>
<li>拍賣會(huì)</li>
<li>愛逛街</li>
<li>全球購</li>
<li>淘女郎</li>
</ul>
</li>
<li>優(yōu)惠促銷
<ul>
<li>天天特價(jià)</li>
<li>免費(fèi)試用</li>
<li>清倉</li>
<li>1元起拍</li>
</ul>
</li>
<li>工具</li>
</ul>
JQ代碼： 用了多種方式躬存，練習(xí)jq的用法
<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<script type="text/javascript">
$(function(){
//給每一個(gè)有ul(有子菜單)的li添加一個(gè)圖標(biāo)
//添加點(diǎn)擊事件,展開收縮
//$("li:has(ul)").css("list-style-image","url(img/plus.gif)")
$("li:has(ul)").addClass("plus")
//鏈?zhǔn)秸{(diào)用
.click(function(e){
//e.stopPropagation();
//$(this).css("list-style-image","url(img/minus.gif)");
//$(this).toggleClass('minus');
if($(e.target).children().length){
if($(this).children().is(":hidden")){
$(this).css("list-style-image","url(img/minus.gif)");
}else{
$(this).css("list-style-image","url(img/plus.gif)");
}
$(this).children().slideToggle();
}
return false;
})
})
</script>
輪播案例
html
<div id="main">
<div class="pic">
<ul>
<li style="background: url(img/bg1.jpg);">
<img class="img1" src="img/text1.png"/>
<img class="img2" src="img/con1.png"/>
</li>
<li style="background: url(img/bg2.jpg);">
<img class="img1" src="img/text2.png"/>
<img class="img2" src="img/con2.png"/>
</li>
<li style="background: url(img/bg3.jpg);">
<img class="img1" src="img/text3.png"/>
<img class="img2" src="img/con3.png"/>
</li>
<li style="background: url(img/bg4.jpg);">
<img class="img1" src="img/text4.png"/>
<img class="img2" src="img/con4.png"/>
</li>
<li style="background: url(img/bg5.jpg);">
<img class="img1" src="img/text5.png"/>
<img class="img2" src="img/con5.png"/>
</li>
</ul>
</div>
<div class="nav">
<ul>
<li class="select"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
JQ代碼
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<script type="text/javascript">
$(function(){
$(".pic li").eq(0).find(".img1").stop().animate({"left":0},1000)
.next().show().stop().animate({"left":0},1000);
var i = 0;
var timer = setInterval(function(){
i++;
if(i==$(".pic li").length){
i = 0;
}
$(".pic li").eq(i).fadeIn().find(".img1").stop().animate({"left":0},1000)
.next().show().stop().animate({"left":0},1000)
//.parent().siblings().fadeOut().find(".img1").css("left",-760).next().hide().css("left",-20);
//移除樣式也可以用這種方法 .parent().siblings().fadeOut().children().removeAttr("style");
$(".nav li").eq(i).addClass("select").siblings().removeClass("select");
},2000);
})
</script>
樓梯
html結(jié)構(gòu)
<div id="floorNav">
<ul>
<li>1F<span>服飾</span></li>
<li>2F<span>美妝</span></li>
<li>3F<span>手機(jī)</span></li>
<li>4F<span>家電</span></li>
<li>5F<span>數(shù)碼</span></li>
<li>6F<span>運(yùn)動(dòng)</span></li>
<li>7F<span>居家</span></li>
<li>8F<span>母嬰</span></li>
<li>9F<span>食品</span></li>
<li>10F<span>圖書</span></li>
<li>11F<span>服務(wù)</span></li>
<li>TOP</li>
</ul>
</div>
<div id="header"></div>
<div id="content">
<ul>
<li style="background: #8B0000;">服飾</li>
<li style="background: #123;">美妝</li>
<li style="background: #667;">手機(jī)</li>
<li style="background: #558;">家電</li>
<li style="background: #900;">數(shù)碼</li>
<li style="background: #456;">運(yùn)動(dòng)</li>
<li style="background: #789;">居家</li>
<li style="background: #234;">母嬰</li>
<li style="background: #567;">食品</li>
<li style="background: #887;">圖書</li>
<li style="background: #980;">服務(wù)</li>
</ul>
</div>
<div id="footer"></div>
js代碼
<script src="jquery-1.11.0.js"></script>
<script>
//滾動(dòng)到某值讓小nav顯示
$(function(){
var flag=true;
$(window).scroll(function(){
if(flag){
//滾動(dòng)條的顯示與隱藏
var scrolltop=$(this).scrollTop();
if(scrolltop>300){
$("#floorNav").fadeIn();
}else{
$("#floorNav").fadeOut();
}
//隨著滾動(dòng)顯示對應(yīng)的內(nèi)容
//判斷offset.top-outheight/2和scrolltop的值
$("#content li").each(function(){
if(scrolltop>=$(this).offset().top-$(this).outerWidth()/2){
var index=$(this).index();
$("#floorNav li").eq(index).addClass("hover").siblings().removeClass("hover");
}
})
}
})
//給每個(gè)小nav注冊點(diǎn)擊事件,不包含最后一個(gè)
$("#floorNav li:not(:last)").click(function(){
flag=false;
var index= $(this).index();
$("#floorNav li").eq(index).addClass("hover").siblings().removeClass("hover");
$("html,body").stop().animate({"scrollTop":$("#content li").eq(index).offset().top},800,function(){
flag=true;
});
})
//回到頂部的事件
$("#floorNav li:last").click(function(){
$("html,body").stop().animate({"scrollTop":0});
})
})
</script>
商城后臺(tái)接口
先建數(shù)據(jù)庫，建好之后舀锨，開始接口的操作
1.創(chuàng)建連接數(shù)據(jù)庫的接口 conn.php
<?php
//防止中文亂碼
header("content-type:text/html;charset=utf-8");
//連接數(shù)據(jù)庫
$conn=new mysqli("localhost","root","","work2");
//判斷是否連接成功
if($conn->connect_error){
die("連接失敗".$conn->connect_error);
}
2.創(chuàng)建注冊接口 register.php
//我的用戶表是 users
用戶名不能重復(fù)
請求方式：get岭洲，post都支持
參數(shù) ：用戶名 usename ，密碼 password
<?php
header("content-type:text/html;charset=utf-8");
//連接數(shù)據(jù)庫
include_once "connect.php";
//接收數(shù)據(jù)
$usename=$_REQUEST["usename"];
$pwd=$_REQUEST["password"];
//先判斷數(shù)據(jù)庫中是否有相同的數(shù)據(jù)坎匿，如果有則插入失敗盾剩，無則插入成功
$sq="select usename from users where usename=$usename";
$result=$conn->query($sq);
if ($result->num_rows>0){
$data=array('msg'=>'注冊失敗','code'=>'0');
echo json_encode($data,JSON_UNESCAPED_UNICODE);
}else{
//讓插入的數(shù)據(jù)從1開始
$sq="alter table users auto_increment=1";
$conn->query($sq);
//插入數(shù)據(jù)庫中的表
$sql="insert into users (usename,pwd) values
('$usename','$pwd')";
//執(zhí)行,返回?cái)?shù)據(jù)
$conn->query($sql);
$data=array('msg'=>'注冊成功','code'=>'1');
//將數(shù)組轉(zhuǎn)成json字符串
echo json_encode($data,JSON_UNESCAPED_UNICODE);
}
3.創(chuàng)建登錄接口 login.php
必須先注冊才能登錄
請求方式：get，post 都支持
參數(shù)：用戶名 usename
<?php
header("content-type:text/html;charset=utf-8");
include_once "connect.php";
$usename=$_REQUEST["usename"];
$sql="select usename from users where usename=$usename";
$result=$conn->query($sql);
$sql1="select id from users where usename=$usename";
$result1=$conn->query($sql1);
if($result->num_rows>0){
while ($row=$result1->fetch_assoc()) {
$oid = $row["id"];
}
$data=array("code"=>"1",
"msg"=>"ok",
"data"=>array("token"=>"$oid")
);
echo json_encode($data,JSON_UNESCAPED_UNICODE);
}else{
echo "0"; //登錄失敗替蔬，先注冊再登錄
}
4.商品列表接口 protects.php
//我的產(chǎn)品表是protects
無需參數(shù)
<?php
header("content-type:text/html;charset=utf-8");
include_once "connect.php";
$sql ="select * from protects";
$result=$conn->query($sql);
if($result->num_rows){
$prot=[];
$data=[]; //不用多個(gè)數(shù)組嵌套只能獲取到一組數(shù)組
while ($row=$result->fetch_assoc()){
//將數(shù)據(jù)庫中的數(shù)據(jù)添加到data數(shù)組中
Array_push($data,[
"pid"=>$row["pid"],
"pname"=>$row["pname"],
"pimg"=>$row["pimg"],
"pchar"=>$row["pchar"]
]);
}
//循環(huán)完之后告私，再將data添加到最外層prot數(shù)組中
$prot["msg"]="查詢成功";
$prot["data"]=$data;
echo json_encode($prot,JSON_UNESCAPED_UNICODE);
}
5.詳情頁接口 details.php
參數(shù)：商品的 pid
請求方式：get，post 都支持
<?php
header("content-type:text/html;charset=utf-8");
include_once "connect.php";
$id=$_REQUEST["id"];
//獲取一整條數(shù)據(jù)承桥，select 字段 where 獲取的就是一個(gè)字段值
$sql="select * from protects where pid=$id";
$result=$conn->query($sql);
if($result->num_rows){
$data=[];
while($row=$result->fetch_assoc()){
Array_push($data,[
"pid"=>$row["pid"],
"pname"=>$row["pname"],
"pimg"=>$row["pimg"],
"pchar"=>$row["pchar"]
]);
}
$data=json_encode($data,JSON_UNESCAPED_UNICODE);
echo $data;
}
6.添加購物車的接口 add-protect.php
請求方式：get驻粟，post都支持
參數(shù)：用戶 uid ，商品 pid ,添加商品的數(shù)量 numbers
<?php
header("content-type:text/html;charset=utf-8");
include_once "connect.php";
//添加商品凶异，用戶id蜀撑，商品id，商品數(shù)量
$uid=$_REQUEST["uid"];
$pid=$_REQUEST["pid"];
$numbers=$_REQUEST["numbers"];
$data1=["code"=>"1","msg"=>"加入成功"];
$data1=json_encode($data1,JSON_UNESCAPED_UNICODE);
$data2=["code"=>"0","msg"=>"加入失敗".$conn->error];
$data2=json_encode($data2,JSON_UNESCAPED_UNICODE);
//先判斷數(shù)據(jù)庫中是否有這條數(shù)據(jù)
$sql1="select * from uplink where uid=$uid and pid=$pid";
$result=$conn->query($sql1);
//如果有這條數(shù)據(jù)唠帝，只需修改數(shù)據(jù)值屯掖，無，則新插入進(jìn)去
if($result->num_rows){
$sql3="select numbers from uplink where uid=$uid and pid=$pid";
$res=$conn->query($sql3);
while ($row1=$res->fetch_assoc()){
$resnum=$row1["numbers"];
}
$numbers=$numbers+$resnum;
$sql2="update uplink set numbers=$numbers where uid=$uid and pid=$pid";
if ($conn->query($sql2)){
echo $data1;
}else{
echo $data2;
}
}else{
$sq="alter table users auto_increment=0";
$conn->query($sq);
//字段值用 , 分開襟衰，再錯(cuò)錘死你
$sql="insert into uplink (uid,pid,numbers) values
('$uid','$pid','$numbers')";
if($conn->query($sql)){
echo $data1;
}else{
echo $data2;
}
}
7.獲取購物車列表的接口 cart-list.php
請求方式：get贴铜，post 都支持
參數(shù)： 用戶 uid
<?php
header("content-type:text/html;charset=utf-8");
include_once "connect.php";
//獲取購物車列表, 用戶id
$uid=$_REQUEST["uid"];
/*$sql1="alter table uplink add constraint fk_pid foreign
key (pid) references protects(pid)";
$conn->query($sql1);*/
/*多表查詢時(shí)，需給子表添加外鍵約束，如果表已經(jīng)創(chuàng)建好绍坝，在軟件的SQL面板中運(yùn)行下方的代碼
* alter table 子表明 add constraint fk_pid foreign
key (pid) references protects(pid)
//子表 //主表
* */
//兩個(gè)表聯(lián)合查詢徘意，先從主表中查，再從子表中查
$sql="select * from protects u
join uplink p on u.pid=p.pid where uid=$uid
";
/* //將表中的字段求和轩褐，對該欄賦個(gè)別名 group by 分組
* $sql="select pid,sum(numbers) as numbers from uplink where uid=$uid group by pid";*/
/*$sql="select pid,numbers from uplink where uid=$uid";*/
$result=$conn->query($sql);
if($result->num_rows){
// $wrap=[];
$data=[];
$pid=[];
while ($row=$result->fetch_assoc()){
Array_push($data,[
"pid"=>$row["pid"],
"numbers"=>$row["numbers"],
"pname"=>$row["pname"],
"pimg"=>$row["pimg"],
"pchar"=>$row["pchar"]
]);
}
$wrap["data"]=$data;
$wrap["msg"]="查詢成功";
$wrap=json_encode($wrap,JSON_UNESCAPED_UNICODE);
echo $wrap;
}else{
echo "查詢失敗.$conn->error";
}
8.修改購物車的接口 modifycart.php
請求方式：get椎咧，post 都支持
參數(shù)：用戶 uid , 商品 pid ,修改的商品數(shù)目(>0 增加,<0 減少, =0 刪除)
<?php
header("content-type:text/html;charset=utf-8");
include_once "connect.php";
//修改購物車， 用戶id把介，商品id勤讽，修改的商品數(shù)目(>0 增加,<0 減少, =0 刪除)
$uid=$_REQUEST["uid"];
$pid=$_REQUEST["pid"];
$nums=$_REQUEST["nums"];
$sql="select * from uplink where uid=$uid and pid=$pid";
$result=$conn->query($sql);
if($result->num_rows){
$sql1="select numbers from uplink where uid=$uid and pid=$pid";
if($nums>0){
$res1=$conn->query($sql1);
while ($row1=$res1->fetch_assoc()){
$resnum1=$row1["numbers"];
}
$resnum1=$resnum1+$nums;
$sql2="update uplink set numbers=$resnum1 where uid=$uid and pid=$pid";
if($conn->query($sql2)){
$data=["code"=>"1","msg"=>"修改成功 + "];
echo json_encode($data,JSON_UNESCAPED_UNICODE);
}else{
$data=["code"=>"0","msg"=>"修改失敗.$conn->error"];
echo json_encode($data,JSON_UNESCAPED_UNICODE);
}
}else if($nums<0){
$res1=$conn->query($sql1);
while ($row1=$res1->fetch_assoc()){
$resnum1=$row1["numbers"];
}
$resnum1=$resnum1+$nums;
$sql2="update uplink set numbers=$resnum1 where uid=$uid and pid=$pid";
if($conn->query($sql2)){
$data=["code"=>"1","msg"=>"修改成功 - "];
echo json_encode($data,JSON_UNESCAPED_UNICODE);
}
}else if($nums==0){
//等于0 ，直接刪除該數(shù)據(jù)
$sql3="delete from uplink where uid=$uid and pid=$pid";
if($conn->query($sql3)){
$data=["code"=>"1","msg"=>"修改成功,該條數(shù)據(jù)已刪除"];
echo json_encode($data,JSON_UNESCAPED_UNICODE);
}
}
}else{
echo "購物車還沒有該商品哦";
}
復(fù)制于qq_43101321的博客
