- 服饰
- 美妆
- 手机
- 家电
- 数码
- 运动
- 居家
- 母婴
- 食品
- 图书
- 服务
JavaScript练习题
js练习题
主要记录了学习中感觉有意思的题型,主要写了函数，数组，对象，js效果，以下代码逻辑均为自己编写的思维逻辑，问题解决方法不唯一，我的代码仅供参考
函数
1.编写任意个数字的求和、差、积、商的函数
思路分析：首先求任意个数，因此需要一个能够获取函数传递参数个数及值的形参：arguments，方法不一，思路仅供参考
function f1(){
var sum=arguments[0], //将第一个数符初值分别给这几个变量
cha=arguments[0],
ji=arguments[0],
shang=arguments[0];
for(var i=1;i2.编写一个函数，计算任意两个数字之间所能组成的奇数个数，数字必须是个位数比如： 计算0-3之间能组成的奇数个是01、21、03、13、23、31
思路分析：两个数字任意组合，先判断是否是奇数，然后再排除个位和十位相同的数即可
方法：
function f3(x,y){
var count=0;
for(var i=x;i<=y;i++){ //x和y之间的数任意组合
for(var j=x;j<=y;j++){
var str=Number(i+""+j); //将x和y拼接组成2位的数再转化为2位的数字
if(str%2!=0&&i!=j){
console.log(i+""+j);
count++;
}
}
}
console.log(count);
}
f3(0,3);
求斐波那契数列
1、1、2、3、5、8、13、21、34、55……F(0)=0，F(1)=1, F(n)=F(n-1)+F(n-2)（n>=2，n∈N*）
方法：
function f6(n){ //求斐波那契数列
var a1=1;
var a2=1;
for(var i=3;i<=n;i++){
var an=a1+a2; //每一项等于前两项的和
a1=a2; //每次循环改变a1和a2使其指向下一次的前两项
a2=an;
}
return an;
}
console.log(f6(5));
//递归求斐波那契数列
Eg:function getFib(x){
if(x==1||x=2){
return 1;
}
return getFib(x-1)+getFib(x-2);
}
console.log(getFib(12));
数组
1.数组的选择排序,冒泡排序
冒泡排序： 思路在代码中进行了注释，可以根据注释参照思路
var arr3=[1,5,2,6,3,3];
function f4(arr){ //冒泡排序（以从小到大为例）
for(var i=0;iarr[j+1]){
var temp=arr[j]; //交换这两个值的位置
arr[j]=arr[j+1];
arr[j+1]=temp;
}
}
}
return arr;
}
console.log(f4(arr3));
选择排序：
function f4(arr){ //选择排序
//用这个数分别和别的数相比较，改变的是索引的位置，每轮结束后才交换为位置
for(var i=0;iarr[j]){
minIndex=j; //改变最小索引的指向
}
}
var temp=arr[i]; //每轮比较结束，将最初假定的最小值和实际最小值交换
arr[i]=arr[minIndex];
arr[minIndex]=temp;
}
return arr; //将排序后的数组返回
}
console.log(f4(arr3));
2.判断数组中是否存在某个元素，返回布尔类型
思路分析：判断是否存在某个值，也可以使用indexOf等数组的方法
方法：列举一种普通的
var arr1=[1,4,3,6];
function f2(arr,x){
for(var i=0;iconsole.log(f2(arr1,4));
3.编写函数将数组元素去重
方法1：推荐使用 （数组和对象结合的方式去重）
var arr1=[1,3,6,6,6,4];
function f3(arr){ //利用数组和对象结合的方式去重
var newArr=[];
var obj={};
for(var i=0;i方法2：（索引值比较，需要注意的是，截取以后数组长度也发生了变化，因此数组长度需要 -1）
function noRepeat(arr){
for(var i=0;i4.输入一个数，并按原来的规律将它插入数组中
思路分析：可以先进行判断是从大到小，还是从小到大，然后将数据进入插入
var arr2=[1,3,4,5]；
function f4(arr,x){
if(arr[0]>arr[arr.length-1]){
arr.push(x); //将传入的参数加入到数组中
arr.sort(function(a,b){ //调用sort对数组中的元素排序
return b-a; //从大到小
})
}else {
arr.push(x);
arr.sort(function (a,b){
return a-b; //从小到大
})
}
return arr;
}
console.log(f4(arr1,0));
5.定义一个含有30个整型元素的数组，按顺序分别赋予从2开始的偶数；然后按顺序每五个数求出一个平均值，放在另一个数组中并输出
方法：
function f1(){
var arr1=[]; //用来存放最开始的这些数字
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要进行清零
}
}
console.log(arr2);
}
f1();
6.随机点名程序
思路分析：使用math.random()产生0~1之间的随机数，然后根据索引得到具体值
方法：将人名放入数组中，生成数组的随机索引值，从而得到对应的人名
btn.onclick=function (){
var arr=["张三","李四","王二","张明","李天","王大","崔勇"];
var num1 =Math.floor(Math.random()*arr.length);
var na=arr[num1];
console.log(na);
}
String
1.密码强度 假设只有大、小写字母及数字
思路分析：可以使用正则表达式(相对简单)，也可以根据ASCII码
方法：
var str1 = "123agfdAB";
function f5(str) {
var flag1 = false, //因为要判断多个分支是否都含有，所以定义多个flag去判断
flag2 = false,
flag3 = false;
for (var i = 0; i < str.length; i++) {
var code = str.charCodeAt(i);
if (48 <= code && code <= 57) { //数字的ASCII码
flag1 = true;
}
if (65 <= code && code <= 90) { //大写字母的ASCII码
flag2 = true;
}
if (97 <= code && code <= 122) { //小写字母的ASCII码
flag3 = true;
}
}
if (flag1 && flag2 && flag3) { //根据flag的值去判断包含几个分支
console.log("强");
} else if (flag1 && flag2 || flag1 && flag3 || flag2 && flag3) {
console.log("中");
} else {
console.log("低");
}
}
f5(str1);
2.数字字母混合验证码
方法1： 利用字符串中的值随机组合生成
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){ //当str的长度不满足重复执行-------生成4位的字符串
var sCode =Math.floor(Math.random()*(90-48+1)+48);//得到的是数字到大写字母的ASCII 值
//判断ASCII码的值在数字和字母之间
if(48<=sCode&&sCode<=57||65<=sCode&&sCode<=90){
var str=str+String.fromCharCode(sCode); //将随机值进行拼接
}
}
console.log(str);
}
yan();
3.已知字符串“a,a,b,c,c,d”，统计每个字符出现的次数，结果显示 a 2、b 1、c 2、d1，去掉重复的字符，使结果显示 abcd
方法： 利用数组和对象结合的方式，把数组元素作为对象的属性
var str = "a,a,b,c,c,d";
function f1(str) {
var arr = str.split(","); //split返回的是分割后的数组
var obj = {}; //用来存放数组中的元素
for (var i = 0; i < arr.length; i++) {
if (obj[arr[i]] == undefined) {
obj[arr[i]] = 1; //用1这个值去表示第一次出现
} else {
obj[arr[i]] = obj[arr[i]] + 1; //出现的次数
}
}
var s = ""; //让obj的属性进行拼接
for (var i in obj) {
s += i;
document.write(i + obj[i] + " ");
}
document.write(s); //输出属性拼接后的值
}
f1(str);
留言过滤 ：将字符串中指定的字符或字符串替换
var str=“1455-95098888”;
方法1： 替换单个字符，可以利用字符串的索引对应的值进行比较 （charAt同）
function f6(str){
for(var i=0;i方法2： 替换一串，可以用indexOf ，没有这个字符串，返回的结果为-1
function f7(str){
for(var i=0;i方法3： 替换一串，可以用substr，截取字符串进行比较，相同再替换
function f8(str){
for(var i=0;iMath 对象
1.编写一个函数，获得一个十六进制的随机颜色的字符串(例如：#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对象
数码时钟
思路分析：将时分秒的图片，按照一定规则命名，方便后续根据时间设置图片路径
方法：
时
分
秒
图片跟着鼠标飞：
//图片跟着鼠标飞,可以在任何的浏览器中实现
//window.event和事件参数对象e的兼容
//clientX和clientY单独的使用的兼容代码
//scrollLeft和scrollTop的兼容代码
//pageX,pageY和clientX+scrollLeft 和clientY+scrollTop
//把代码封装在一个函数
//把代码放在一个对象中
var evt={
//window.event和事件参数对象e的兼容
getEvent:function (evt) {
return window.event||evt;
},
//可视区域的横坐标的兼容代码
getClientX:function (evt) {
return this.getEvent(evt).clientX;
},
//可视区域的纵坐标的兼容代码
getClientY:function (evt) {
return this.getEvent(evt).clientY;
},
//页面向左卷曲出去的横坐标
getScrollLeft:function () {
return window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft||0;
},
//页面向上卷曲出去的纵坐标
getScrollTop:function () {
return window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop||0;
},
//相对于页面的横坐标(pageX或者是clientX+scrollLeft)
getPageX:function (evt) {
return this.getEvent(evt).pageX? this.getEvent(evt).pageX:this.getClientX(evt)+this.getScrollLeft();
},
//相对于页面的纵坐标(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";
};
滚动条案例
api第七天案例
钢琴版导航条：
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实现代码： 需要引入jq文件
$(function () {
//给li注册鼠标进入事件,让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});
});
//节流阀 ：按下的时候，触发，如果没弹起，不让触发下一次
//1. 定义一个flag
var flag = true;
//按下1-9这几个数字键，能触发对应的mouseenter事件
$(document).on("keydown", function (e) {
if(flag) {
flag = false;
//获取到按下的键
var code = e.keyCode;
if(code >= 49 && code <= 57){
//触发对应的li的mouseenter事件
$(".nav li").eq(code - 49).mouseenter();
}
}
});
$(document).on("keyup", function (e) {
flag = true;
//获取到按下的键
var code = e.keyCode;
if(code >= 49 && code <= 57){
//触发对应的li的mouseenter事件
$(".nav li").eq(code - 49).mouseleave();
}
});
//弹起的时候，触发mouseleave事件
});
事件
键盘控制div移动
如果需要在页面中移动，要将元素脱离文档流（否则会影响页面布局）
js实现代码：
var odiv=document.getElementsByTagName("div")[0];
document.onkeydown=function(e){
var evt=e||event;
var x=odiv.offsetLeft; //获取div的坐标值
var y=odiv.offsetTop;
var code=evt.keyCode; //获取键盘码
switch (code){ //当按下方向键，执行对应的功能
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;
}
}
鼠标跟随特效：
js实现代码：
for(var i=0;i<10;i++){ //创建10个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; //获取鼠标的坐标
var y=evt.clientY;
odiv[0].style.left=x+"px"; //让第一个跟随鼠标移动
odiv[0].style.top=y+"px";
//让后一个跟随前一个移动
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;
}
}
事件委托机制 ----------重要
eg：点击按钮往ul中添加li，使添加的li也有相同的事件
var obtn=document.getElementById("btn");
var olist=document.getElementById("list"); //获取ul
var oli=olist.children; //获取ul的子节点li
olist.onclick=function(e){
var evt=e||event;
var tar=evt.target||evt.srcElement; //获取事件源
if(tar.nodeName.toLowerCase()=="li"){ 判断事件源是不是是该执行目标
console.log(tar.innerHTML); //此时不能用this，因为this指向的是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){ //按下鼠标的事件
var evt=e||event;
var lf=evt.offsetX;
var tp=evt.offsetY;
document.onmousemove=function(e){ //鼠标移动事件
var evt=e||event;
var x=evt.clientX-lf; //让鼠标一直在按下的那个位置
var y=evt.clientY-tp;
//设置元素只能在可视区域内移动
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"; //让元素跟着鼠标移动
odiv.style.top=y+"px";
}
document.onmouseup=function(){ //鼠标抬起事件
document.onmousemove=null;
}
}
九宫格
js代码：
var obox=document.getElementById("box");
//创建结构
for(var i=0;i<3;i++){ //控制外层的行数
for(var j=0;j<3;j++){ //控制内层
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;
//给每个小块加上文字
for(var i=0;i轨迹
js代码：
var odiv = document.getElementsByTagName("div")[0];
var arr=[]; //用来保存鼠标移动时的坐标位置
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}); //采用对象数组存储，因为坐标成对好进行操作
return false; //取消浏览器的默认行为
//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); //让元素坐标始终从0开始，splice会改变原数组长度
if(arr.length==0){ //当数组长度为0，说明保存的坐标执行完了
clearInterval(timer);
}
},20);
document.onmousemove=null;
}
}
cookie
一周内免登录
样式代码：
js功能代码：
var input=document.getElementsByTagName("input");
if(getCookie("usename")){ //判端cookie是否有数据
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");
}
}
//将函数作为对象的方法进行封装
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购物车
产品页面js代码：
cart页面的js代码：
正则表达式
表单验证
简单的布局：
js代码：
checkInput(my$("qq"),/^\d{5,11}$/); //qq的
checkInput(my$("phone"),/^\d{11}$/); //手机
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}$/); //座机号码
checkInput(my$("fullName"),/^[\u4e00-\u9fa5]{2,6}$/); //中文名字
//通过正则表达式验证当前的文本框是否匹配并显示结果
function checkInput(input,reg) {
//文本框注册失去焦点的事件
input.onblur=function () {
if(reg.test(this.value)){
this.nextElementSibling.innerText="正确了";
this.nextElementSibling.style.color="green";
}else{
this.nextElementSibling.innerText="让你得瑟,错了吧";
this.nextElementSibling.style.color="red";
}
};
}
运动
圆周运动
简单的布局： 一个小球围绕大球转动
相对定位
子对定位 //注意小球的margin值
js实现代码： //思路：让球的坐标随角度变化而变化
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);
平抛运动
简单的布局：
js代码： //利用平抛的原理，让球的位置发生改变
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);
抛物线运动
简单的布局
js实现代码： 思路：先求出抛物线函数，然后再确定球的位置坐标
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;
//假设抛物线过原点 y=ax*x+b*x+c; a给定的值，c=0;
var a=0.0005;
var b=((y2-y1)-a*(x2-x1)*(x2-x1))/(x2-x1); //相当于抛物线函数求出来了
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; //假设所有属性都达到目标值
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";
}
//只要有一个达到目标值，定时器就会被清除,会导致部分属性没有达到目标值
//所有属性都达到目标值时，清除定时器
if(iCur != iTarget) { //假设是否成立由此判断
flag = false;
}
}
if(flag) { //如果假设成立，清除定时器
clearInterval(obj.timer);
if(fn) {
fn();
}
}
}, 20)
}
//获取属性值
function getStyle(obj, attr) {
if(obj.currentStyle) {
return obj.currentStyle[attr];
}
return getComputedStyle(obj, null)[attr];
}
轮播图
css样式
html布局
<
>
- 1
- 2
- 3
js实现代码
星级评价
html代码：
//css样式给li加的背景图
js代码：
var aLi = document.getElementsByTagName('li');
var flag = false;
var index = 0; //表示点击了哪个星星
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代码：
html布局代码
js实现代码
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){
//控制放大镜的移动
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";
//控制大图的移动
oBigImg.style.left = - oZoom.offsetLeft/oMidArea.offsetWidth * oBigImg.offsetWidth + "px";
oBigImg.style.top = - oZoom.offsetTop/oMidArea.offsetHeight * oBigImg.offsetHeight + "px";
}
//点击缩略图 切图片
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;
}
}
定时器案例
循环打印5,6,7,8,9,10,9,8,7,6,5,6,7…循环输出
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);
}
}
}
}
页码
- 上一页
- 首页
- 下一页
- 尾页
data.json数据：
["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"]
自动补全
html样式代码
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 += `${data[i]} `;
}
oList.innerHTML = str;
}
})
}
index.php文件代码：
jsonp -------百度接口
html结构代码
搜索
js代码
promise
promise-ajax的封装
function ajax(url){
//创建promise对象
var promise = new Promise(function(resolve,reject){
//创建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结构代码
css样式代码：
ul {
position: absolute;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/*画3个圆代表红绿灯*/
ul>li {
width: 40px;
height: 40px;
border-radius: 50%;
opacity: 0.2;
display: inline-block;
}
/*执行时改变透明度*/
ul.red>#red,
ul.green>#green,
ul.yellow>#yellow {
opacity: 1.0;
}
/*红绿灯的三个颜色*/
#red {
background: red;
}
#yellow {
background: yellow;
}
#green {
background: green;
}
js实现代码：
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' //严格模式
traffic.className = 'green';
green().then(function() {
traffic.className = 'yellow';
return yellow();
})
.then(function() {
traffic.className = 'red';
return red();
}).then(function() {
restart()
})
})();
闭包案例
编写一个求和函数sum，使输入sum(2)(3)或输入sum(2,3)，输出结果相同
可以传入多个参数
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递归----深拷贝
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;
}
观察者模式案例
观察者模式（发布-订阅模式）：其定义对象间一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知
eg：
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]); 有参数的
}
},
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);
}
}
}
}
//给三个模块注册事件
observer.regist("loginSuccess",function(){
console.log("用户信息模块接收到了登录成功的消息，做出了响应");
})
observer.regist("loginSuccess",function(){
console.log("购物车模块接收到了登录成功的消息，做出了响应");
})
observer.regist("loginSuccess",function(){
console.log("消息模块接收到了登录成功的消息，做出了响应");
})
observer.emit("loginSuccess"); //广播
JQ
全选和反选：
简单的布局：
全选
反选
jq代码： 思路：下面的状态和全选的状态一致，和反选的状态相反的
$(function(){
//全选
$("#checkAll").click(function(){
//让li 下的input的状态和当前的这个保持一致
$("li input").prop("checked",$(this).prop("checked"));
});
//反选
$("#checkOther").click(function(){
//遍历下面的每一个，让它的状态和它当前的状态相反
$("li input").each(function(){
$(this).prop("checked",!$(this).prop("checked"));
})
});
//下方
$("li input").click(function(){
//根据选中状态的长度判断下方是否都选上了
if($("li input:checked").length == $("li input").length){
$("#checkAll").prop("checked",true);
}else{
$("#checkAll").prop("checked",false);
}
})
})
手风琴
html结构
-
红玫瑰
-
白玫瑰
-
白玫瑰
-
白玫瑰
-
白玫瑰
JQ代码
多级下拉菜单
html结构
- 主题市场
- 运动派
- 三级菜单a
- 三级菜单b
- 三级菜单c
- 三级菜单d
- 有车族
- 三级
- 四级
- 四级
- 四级
- 三级
- 三级
- 三级
- 生活家
- 特色购物
- 淘宝二手
- 拍卖会
- 爱逛街
- 全球购
- 淘女郎
- 优惠促销
- 天天特价
- 免费试用
- 清仓
- 1元起拍
- 工具
JQ代码： 用了多种方式，练习jq的用法
轮播案例
html
JQ代码
楼梯
html结构
js代码
商城后台接口
先建数据库，建好之后，开始接口的操作
1.创建连接数据库的接口 conn.php
connect_error){
die("连接失败".$conn->connect_error);
}
2.创建注册接口 register.php
//我的用户表是 users
用户名不能重复
请求方式：get，post都支持
参数 ：用户名 usename ，密码 password
query($sq);
if ($result->num_rows>0){
$data=array('msg'=>'注册失败','code'=>'0');
echo json_encode($data,JSON_UNESCAPED_UNICODE);
}else{
//让插入的数据从1开始
$sq="alter table users auto_increment=1";
$conn->query($sq);
//插入数据库中的表
$sql="insert into users (usename,pwd) values
('$usename','$pwd')";
//执行,返回数据
$conn->query($sql);
$data=array('msg'=>'注册成功','code'=>'1');
//将数组转成json字符串
echo json_encode($data,JSON_UNESCAPED_UNICODE);
}
3.创建登录接口 login.php
必须先注册才能登录
请求方式：get，post 都支持
参数：用户名 usename
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
//我的产品表是protects
无需参数
query($sql);
if($result->num_rows){
$prot=[];
$data=[]; //不用多个数组嵌套只能获取到一组数组
while ($row=$result->fetch_assoc()){
//将数据库中的数据添加到data数组中
Array_push($data,[
"pid"=>$row["pid"],
"pname"=>$row["pname"],
"pimg"=>$row["pimg"],
"pchar"=>$row["pchar"]
]);
}
//循环完之后，再将data添加到最外层prot数组中
$prot["msg"]="查询成功";
$prot["data"]=$data;
echo json_encode($prot,JSON_UNESCAPED_UNICODE);
}
5.详情页接口 details.php
参数：商品的 pid
请求方式：get，post 都支持
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都支持
参数：用户 uid ，商品 pid ,添加商品的数量 numbers
"1","msg"=>"加入成功"];
$data1=json_encode($data1,JSON_UNESCAPED_UNICODE);
$data2=["code"=>"0","msg"=>"加入失败".$conn->error];
$data2=json_encode($data2,JSON_UNESCAPED_UNICODE);
//先判断数据库中是否有这条数据
$sql1="select * from uplink where uid=$uid and pid=$pid";
$result=$conn->query($sql1);
//如果有这条数据，只需修改数据值，无，则新插入进去
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);
//字段值用 , 分开，再错锤死你
$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 都支持
参数： 用户 uid
query($sql1);*/
/*多表查询时，需给子表添加外键约束，如果表已经创建好，在软件的SQL面板中运行下方的代码
* alter table 子表明 add constraint fk_pid foreign
key (pid) references protects(pid)
//子表 //主表
* */
//两个表联合查询，先从主表中查，再从子表中查
$sql="select * from protects u
join uplink p on u.pid=p.pid where uid=$uid
";
/* //将表中的字段求和，对该栏赋个别名 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 都支持
参数：用户 uid , 商品 pid ,修改的商品数目(>0 增加,<0 减少, =0 删除)
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 ，直接删除该数据
$sql3="delete from uplink where uid=$uid and pid=$pid";
if($conn->query($sql3)){
$data=["code"=>"1","msg"=>"修改成功,该条数据已删除"];
echo json_encode($data,JSON_UNESCAPED_UNICODE);
}
}
}else{
echo "购物车还没有该商品哦";
}
到此完成的后台接口实现完毕。 ！！！