精华内容
下载资源
问答
  • JavaScript练习题

    万次阅读 多人点赞 2018-10-12 20:43:34
    js练习题 主要记录了学习中感觉有意思的题型,一下代码逻辑均为自己编写的思维逻辑,问题解决方法不唯一,我的代码仅供参考 函数 1.编写任意个数字的求和、差、积、商的函数 function f1(){ var sum=arguments...

    js练习题

    主要记录了学习中感觉有意思的题型,主要写了函数,数组,对象,js效果,以下代码逻辑均为自己编写的思维逻辑,问题解决方法不唯一,我的代码仅供参考

    函数

    1.编写任意个数字的求和、差、积、商的函数

    思路分析:首先求任意个数,因此需要一个能够获取函数传递参数个数及值的形参:arguments,方法不一,思路仅供参考

    function f1(){
        var sum=arguments[0],   //将第一个数符初值分别给这几个变量
                cha=arguments[0],
                ji=arguments[0],
                shang=arguments[0];
        for(var i=1;i<arguments.length;i++){   //用arguments获取用户传入的参数
        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);
    //第二种利用es6语法
    function f1(...args) {
            var sum = args[0],
            cha = args[0],
            ji = args[0],
            shang = args[0]
    
            for(var i=1;i<args.length;i++){
                sum += args[i]
                cha -= args[i]
                ji *= args[i]
                shang /= args[i]
            }
    
            console.log("he"+sum+"cha"+cha+"ji"+ji+"shang"+shang);
        }
    
    
    

    2.编写一个函数,计算任意两个数字之间所能组成的奇数个数,数字必须是个位数比如: 计算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;i<arr.length-1;i++){ //控制比较的轮数
            for(var j=0;j<arr.length-1-i;j++){ //内层每轮比较的次数
                if(arr[j]>arr[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;i<arr.length-1;i++){  //控制外层比较的轮数
            var minIndex=i;  //先假定一个最小值,定义变量minIndex指向该值的索引
            for(var j=i+1;j<arr.length;j++){
                if(arr[minIndex]>arr[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;i<arr.length;i++){
              if(arr[i]==x){
                  return true;
              }
          }
          return false;
      }
    

    console.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<arr.length;i++){
            //把数组中的元素当成对象的属性
            if(obj[arr[i]]==undefined){  //如果第一次出现会得到undefined
                newArr.push(arr[i]);  //将第一次出现的值加入到新数组中
                obj[arr[i]]=1;  //给obj对象的属性赋值,使其重复的值得到的结果不为undefined
            }
        }
        return newArr;
    }
    console.log(f3(arr1));
    

    方法2:(索引值比较,需要注意的是,截取以后数组长度也发生了变化,因此数组长度需要 -1)

    function noRepeat(arr){
        for(var i=0;i<arr.length;i++){ //控制外层循环
            for(var j=i+1;j<arr.length;j++){ //控制内层
                if(arr[i]==arr[j]){
                    arr.splice(j,1); //从数组中删除元素,此时数组发生改变
                    j--;  //此时原数组的索引都向前减了1,因此j--z再去比较一次
                }
            }
        }
        return arr;
    }
    console.log(noRepeat(arr1));
    

    4.输入一个数,并按原来的规律将它插入数组中

    思路分析:可以先进行判断是从大到小,还是从小到大,然后将数据进入插入
    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码
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MIuAr2Dc-1641448645408)(C:\Users\ADMINI~1\AppData\Local\Temp\1534321070789.png)]

    方法:

    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.数字字母混合验证码

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wipt0Zpc-1641448645411)(C:\Users\ADMINI~1\AppData\Local\Temp\1534320082195.png)]

    方法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] + "&nbsp;");
        }
        document.write(s);   //输出属性拼接后的值
    }
    f1(str);
    

    留言过滤 :将字符串中指定的字符或字符串替换

    var str=“1455-95098888”;

    方法1: 替换单个字符,可以利用字符串的索引对应的值进行比较 (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 ,没有这个字符串,返回的结果为-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,截取字符串进行比较,相同再替换

    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.编写一个函数,获得一个十六进制的随机颜色的字符串(例如:#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对象

    数码时钟

    思路分析:将时分秒的图片,按照一定规则命名,方便后续根据时间设置图片路径
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QB3SJGo1-1641448645412)(C:\Users\ADMINI~1\AppData\Local\Temp\1534337010463.png)]

    方法:

    <div id="pic">
        <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>
        <img src="img/0.png" alt="" />
        <img src="img/0.png" alt="" />
        <span>秒</span>
    </div>
    
    <script>
        function f1(){
            var str="";
            //通过标签获取所有的图片存放在变量imgid中
            var imgid=document.getElementsByTagName("img");
            var oDate = new Date(); //创建时间对象
            var h=oDate.getHours();  //分别去获取当前的时分秒
            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;  //组合成一个新的字符串
            for(var i=0;i<str.length;i++){  //遍历字符串
                //类比src="img/0.png";
                imgid[i].src='img/'+str[i]+'.png'; //设置每个图片的src路径
            }
        }
        setInterval(f1,1000);  //定时器  后一个参数以毫秒为单位
    

    函数的封装

    封装方法:将函数作为对象的参数

    eg1:.判断某年份是否为闰年,将日期格式化输出 “2015|08|24”,获得某个月份的天数,判断两个日期相差的天数,获得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){
          //两个日期相减会得到一个相差的毫秒数
          //相差的天时分秒
          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+"时"+minute+"分"+second+"秒";
       },
       getNDays:function(n){
          var oDate = new Date();
          oDate.setDate(oDate.getDate()+n);
          return oDate;
       }
    };
    

    DOM和BOM

    创建表格,添加删除操作

    介绍:这是用基本的方式,更便捷的方法是,使用es6提供的模板字符串,代码和效率能提高很多
    简单的样式:

    a <input type="text"/>
    b <input type="text"/>
    c <input type="text"/>
    <input type="button" value="添加"/>
    <table></table>
    

    js实现代码:

    var oinput=document.getElementsByTagName("input");
    var otable=document.getElementsByTagName("table")[0];
    oinput[oinput.length-1].onclick=function(){
        var otr=document.createElement("tr");
        //创建单元格,并且将文本的值加到单元格里
        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);
    }
    

    进度条

    html排版样式:

    <div class="progressBar">
        <p style=""></p>
    </div>
    <div class="progressBar">
        <p></p>
    </div>
    <div class="progressBar">
        <p></p>
    </div>
    

    js执行代码:

    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:将数组中的值输出

    改变样式可以直接改样式,也可以修改类名

    var okuang=document.getElementById("kuang");
    var oli=document.getElementsByTagName("li");
    var arr=[11,22,33,44,55];
    var index=0;   //定义一个变量用来保存索引值
    for(var i=0;i<oli.length;i++){  //遍历给每个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];  //此时不能用arr[i],因为在点击之前for已经执行完了,此时i为oli的元素个数值
            this.style.backgroundColor="red";
            this.style.color="#000";
            index++;
        }
    }
    
    解析:
    for循环是在页面加载的时候,执行完毕了
    //  for(var k=0;k<5;k++){
    //  }
    //  console.log(k);
      //事件是在触发的时候,执行的
    

    tab切换案例

    点击按钮换图片:

    var oli=document.getElementsByTagName("li"); //获取li标签
    var oimg=document.getElementsByTagName("img")[0];  //获取图片标签
    var index=0;  //存储索引值,因为在点击按钮前for已经执行完了
        for(var i=0;i<oli.length;i++){  
            oli[i].onclick=function (){
                oimg.src='images/'+index+'.png';
                index++;
            }
        }
    

    hei案例

    排他功能

    一串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";
            }
            //再设置当前的样式
            this.value="阴天";
            this.style.background="red";
        }
    }
    

    通过类名修改样式

    var oinput=document.getElementById("btn");
    var odiv=document.getElementById("dv");
    oinput.onclick=function(){
        //判断是否应用了类样式
        if(odiv.className!="cls"){
            odiv.className="cls";  //当有多个类名时需要注意  留着不需要修改的
        }else{
            odiv.className="dd";
        }
    };
    

    tab切换

    主要就是排他功能的应用,下面对应的块,选隐藏,找出点击span时对应的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); //点击之前就把索引保存在span标签中
            ospan[i].onclick=function(){
                //将所有的span样式移除
                for(var j=0;j<ospan.length;j++){
                    ospan[j].className="";
                    //ospan[j].removeAttribute("class");
                }
               // 设置当前的span类样式
            this.className="current";
    
               //先将所有地li隐藏
               for(var k=0;k<oli.length;k++){
                    oli[k].removeAttribute("class");
               }
                //获取当前被点击的索引值
                var index=this.getAttribute("index");
                //当前点击span对应的li显示
                oli[index].className="current";
            }
        }
    

    动态创建列表

    <input type="button" value="动态创建列表" id="btn"/>
    <div id="dv"></div>
    

    js代码:

    var kungfu=["降龙十八掌", "黯然销魂掌", "葵花宝典", "九阴真经",
        "吸星大法", "如来神掌", "化骨绵掌", "玉女心经", "极乐神功", "辟邪剑谱"];
    var dv=document.getElementById("dv");
    var oinput=document.getElementsByTagName("input")[0];
    //点击按钮创建列表
    oinput.onclick=function(){
        var oul=document.createElement("ul");
        for(var i=0;i<kungfu.length;i++){ //有多少个数组元素就创建多少个li
            var oli=document.createElement("li");
            dv.appendChild(oul);
            oul.appendChild(oli);
            oli.innerHTML=kungfu[i];  //给创键的li设置文本和事件
            oli.onmouseover=mouseoverHandle;
            oli.onmouseout=mouseoutHandle;
        }
    }
        function mouseoverHandle(){
            this.style.backgroundColor="red";
        }
    function mouseoutHandle(){
        this.style.backgroundColor="";
    }
    //如果是循环的方式添加事件,推荐用命名函数
    //如果不是循环的方式添加事件,推荐使用匿名函数
    

    动态创建表格

    //点击按钮创建表格
        var arr=[
            {name:"百度",href:"nn1"},
            {name:"谷歌",href:"nn2"},
            {name:"优酷",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"
            //根据数组长度创建表格
            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);
            }
        }
    
    

    只创建一个元素

    为了防止不同的人都给同一个元素添加了相同事件,执行次数过多

    方式1: 思路(没有才去创建)

    <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:思路(有则删除,删除后再去创建)

    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);
      }
    

    总结一句话就是:无则创建,有则删除

    模拟百度搜索框 ------重要

    思路:每次键盘抬起都去获取用户输入的内容,并与数组中的数据进行比较,如果有相同的,则获取提取出来加入到下拉框展示出来

    简单的布局如下:

    <div id="box">
      <input type="text" id="txt" value="">
      <input type="button" value="搜索" id="btn">
    </div>
    

    js代码:

    var keyWords = ["小杨才是最纯洁的", "小杨才是最帅的", "小段是最猥琐的", "小超是最龌龊的", "传智播客是一个培训机构", "传说在传智有个很帅很纯洁的小杨", "苹果好吃", "苹果此次召回还是没有中国"];
    var txt=document.getElementById("txt");
        var btn=document.getElementById("btn");
    
        //每一次的键盘抬起都判断页面中有没有这个div
        txt.onkeyup= function () {
            if(document.getElementById("dv")) {
                var dv=document.getElementById("dv");
                document.getElementById("box").removeChild(dv);
            }
                //把文本框输入的内容和数组中的每个数据对比
                var text=this.value;
                var arr=[];  //用来存储用户输入的内容
                for(var i=0;i<keyWords.length;i++){
                    if(keyWords[i].indexOf(text)==0){
                        arr.push(keyWords[i]);
                    }
                }
                //判断文本框是否为空,空则不用创建div
                if(this.value.length==0||arr.length==0){
                    if(document.getElementById("dv")){
                        document.getElementById("dv").removeChild("dv");
                    }
                    return;
                }
                //创建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";
                //循环遍历临时数组,创建对应的p标签
                for(var i=0;i<arr.length;i++){
                    //创建p标签
                    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="";
                    };
                }
            };
    

    为同一个元素绑定多个事件

    对象.addEventListener(“事件类型”,事件处理函数,false);

    对象.attachEvent(“有on的事件类型”,事件处理函数); 只有ie支持

    封装缓动动画函数

    js代码:

    //动画函数---任意一个元素移动到指定的目标位置
    function f1(ele,target){
        clearInterval(ele.timer);  //确保元素只有一个定时器
    //动画函数---任意一个元素移动到指定的目标位置
        ele.timer=setInterval(function(){  //定时器的id值存储到对象的一个属性中
            var cur=ele.offsetLeft; //获取当前元素坐标
            var step=(target-cur)/10;
            step=step>0?Math.ceil(step):Math.floor(step);
            cur+=step;
            //判断当前移动后的位置是否到达目标位置
            if(cur==target){
                clearInterval(ele.timer);  //清理指定元素的定时器
            }
            ele.style.left=cur+"px";
        },20);
    }
    

    封装动画函数,改变任意多个属性和回调函数

    js代码:

     function animate(element, json, fn) {
        clearInterval(element.timeId);//清理定时器
        element.timeId = setInterval(function () {
          var flag = true;//默认,假设,全部到达目标
          //遍历json对象中的每个属性还有属性对应的目标值
          for (var attr in json) {
            if (attr == "opacity") { //判断这个属性attr中是不是opacity
              //获取元素的当前的透明度,当前的透明度放大100倍
              var current = getStyle(element, attr) * 100;
              var target = json[attr] * 100;//目标的透明度放大100倍
              var step = (target - current) / 10;
              step = step > 0 ? Math.ceil(step):Math.floor(step);//step<0时不用加-号
              current += step;//移动后的值
              element.style[attr] = current / 100;
            } else if (attr == "zIndex") { //判断这个属性attr中是不是zIndex
              //层级改变就是直接改变这个属性的值
              element.style[attr] = json[attr];
            } else {
              //普通的属性
              //获取元素这个属性的当前的值
              var current = parseInt(getStyle(element, attr));
              var target = json[attr];  //当前的属性对应的目标值
              var step = (target - current) / 10; //移动的步数
              step = step > 0 ? Math.ceil(step) : Math.floor(step);
              current += step;//移动后的值
              element.style[attr] = current + "px";
            }
            if (current != target) {   //是否到达目标
              flag = false;
            }
          }
          if (flag) {
            //清理定时器
            clearInterval(element.timeId);
            //所有的属性到达目标才能使用这个函数,前提是用户传入了这个函数
            if (fn) {
              fn();
            }
          }
        }, 20);
      }
    

    完整的轮播图 --------重要

    思路:图片和小按钮分别放在不同的盒子里,然后去设置左右焦点的事件,和小按钮的事件,为小按钮添加事件之前先把索引保存到li的自定义属性中。

    左右焦点有临界值,需要去判断第一个和最后一个

    小按钮需要设置样式,及第一个和的最后一个转换时小按钮对应的样式

    简单的布局代码:

    <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">&lt;</span><span id="right">&gt;</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]; //焦点
        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);
        };
        
        //根据li的个数去创建小按钮
        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="";
            }
        }
        
       //设置ol中第一个li有背景颜色
        ol.children[0].className="current";
    //克隆克隆一个ul中第一个li,加入到ul中的最后
        oul.appendChild(oul.children[0].cloneNode(true));
        //自动播放
        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";
    }
        //运动函数
        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>北京校区</li>
        <li>上海校区</li>
        <li>广州校区</li>
        <li>深圳校区</li>
        <li>武汉校区</li>
        <li>关于我们</li>
        <li>联系我们</li>
        <li>招贤纳士</li>
      </ul>
    </div>
    

    js代码:

    //匀速动画
    function animate(element, target) {
      clearInterval(element.timeId);  //清理定时器
      element.timeId = setInterval(function () {
        var current = element.offsetLeft;  //获取元素的当前位置
        var step = (target - current) / 10; //移动的步数
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        current += step;
        element.style.left = current + "px";
        if (current == target) {
          //清理定时器
          clearInterval(element.timeId);
        }
       }, 20);
    }
    
    var cloud = my$("cloud");  //获取云彩
    var list = my$("navBar").children;  //获取所有的li标签
    for (var i = 0; i < list.length; i++) {//给所有的li注册鼠标进入,鼠标离开,点击事件
      list[i].onmouseover = mouseoverHandle; //鼠标进入事件
      list[i].onclick = clickHandle;  //点击事件
      list[i].onmouseout = mouseoutHandle;  //鼠标离开事件
    }
    function mouseoverHandle() {//进入
      animate(cloud, this.offsetLeft);
    }
    var lastPosition = 0;
    function clickHandle() {//点击
      lastPosition = this.offsetLeft;//点击的时候,记录此次点击的位置
    }
    function mouseoutHandle() {//离开
      animate(cloud, lastPosition);
    }
    
    

    手风琴案例

    简单的布局:

    <div id="box">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    

    js实现代码:

    <script src="common.js"></script>
    <script>
    
      //获取任意一个元素的任意一个属性的当前的值---当前属性的位置值
      function getStyle(element, attr) {
        return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr] || 0;
      }
      function animate(element, json, fn) {
        clearInterval(element.timeId);//清理定时器
        //定时器,返回的是定时器的id
        element.timeId = setInterval(function () {
          var flag = true;//默认,假设,全部到达目标
          //遍历json对象中的每个属性还有属性对应的目标值
          for (var attr in json) {
            //判断这个属性attr中是不是opacity
            if (attr == "opacity") {
              //获取元素的当前的透明度,当前的透明度放大100倍
              var current = getStyle(element, attr) * 100;
              //目标的透明度放大100倍
              var target = json[attr] * 100;
              var step = (target - current) / 10;
              step = step > 0 ? Math.ceil(step) : Math.floor(step);
              current += step;//移动后的值
              element.style[attr] = current / 100;
            } else if (attr == "zIndex") { //判断这个属性attr中是不是zIndex
              //层级改变就是直接改变这个属性的值
              element.style[attr] = json[attr];
            } else {
              //普通的属性
              //获取元素这个属性的当前的值
              var current = parseInt(getStyle(element, attr));
              //当前的属性对应的目标值
              var target = json[attr];
              //移动的步数
              var step = (target - current) / 10;
              step = step > 0 ? Math.ceil(step) : Math.floor(step);
              current += step;//移动后的值
              element.style[attr] = current + "px";
            }
            //是否到达目标
            if (current != target) {
              flag = false;
            }
          }
          if (flag) {
            //清理定时器
            clearInterval(element.timeId);
            //所有的属性到达目标才能使用这个函数,前提是用户传入了这个函数
            if (fn) {
              fn();
            }
          }
          //测试代码
          console.log("目标:" + target + ",当前:" + current + ",每次的移动步数:" + step);
        }, 20);
      }
    
      //先获取所有的li标签
      var list = my$("box").getElementsByTagName("li");
      for (var i = 0; i < list.length; i++) {
        list[i].style.backgroundImage = "url(images/" + (i + 1) + ".jpg)";
        //鼠标进入
        list[i].onmouseover = mouseoverHandle;
        //鼠标离开
        list[i].onmouseout = mouseoutHandle;
      }
      //进入
      function mouseoverHandle() {
        for (var j = 0; j < list.length; j++) {
          animate(list[j], {"width": 100});//动画效果
        }
        animate(this, {"width": 800});
      }
      //离开
      function mouseoutHandle() {
        for (var j = 0; j < list.length; j++) {
          animate(list[j], {"width": 240});//动画效果
        }
      }
    
    
    </script>
    

    图片跟着鼠标飞:

     //图片跟着鼠标飞,可以在任何的浏览器中实现
      //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移动

    如果需要在页面中移动,要将元素脱离文档流(否则会影响页面布局)

    <div style="position: absolute;background-color:pink;width: 60px;height: 60px;"></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<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中 ,因为上下指向的this不同
                //因为拖动的时候原位置,还需要有东西,所以才克隆
                var clone=current.cloneNode(); //克隆一个当前的元素,并添加到盒子里
                    clone.style.border="1px dashed #000";
    //            obox.appendChild(clone);  //因为添加之后克隆的索引在最后,
    // 后面需要进行距离比较,所以需要将克隆节点和当前节点进行替换
                obox.replaceChild(clone,current);  //用克隆的节点替换当前节点
                obox.appendChild(current);  //把当前节点加到盒子里
                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;
                    //当前对象的坐标:随着鼠标移动
                    current.style.left=x+"px";
                    current.style.top=y+"px";
                    return false;  //取消默认行为
                }
                document.onmouseup=function(){
                    //将当前的这个和剩下所有的进行比较,找出距离最近的
                    //将当前放到距离最近的位置,最近的那个放到克隆的位置
                    var arr=[];
                    var newarr=[];
                    //以为此时当前节点的索引在最后,不需要和自身比较,所以去掉最后一个索引
                    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);
    
                    //交换位置:当前的坐标为最小距离对应的位置,最小值的放在克隆所在的位置
                    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); //交换位置之后将克隆的节点删除
                    document.onmousemove=null;
                    document.onmouseup=null;
                }
            }
        }
    

    轨迹

    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

    一周内免登录

    样式代码:

    <form action="">
        姓名:<input type="text" id="usename"/><br />
        密码:<input type="text" i="mima"/><br />
        一周内免登陆<input type="checkbox" />
        <input type="button" id="btn" value="登录"/><br />
    </form>
    

    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<arr.length;i++){
                 var newArr=arr[i].split("=");
                 if(newArr[0]==name){
                      return newArr[1];
                 }
             }
         }
        function removeCookie(name){
            setCookie(name, 11, -2);
        }
    

    购物车

    产品页面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 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");
    //定义一个对象,去保存id和数量 判断cookie里有没有存过数据,有就用,没有就赋值为{}
    if(getCookie("cart")){
       var obj = JSON.parse(getCookie("cart"));//将json字符串转换成对象的
    }else{
       var obj = {};
    }
    //取所有购物车商品数量
    for(var i in obj){
       count += obj[i];
    }
    oNum.innerHTML = count;
    
    for(var i = 0; i < addBtns.length; i++){
       addBtns[i].onclick = function(){
          //存数据时 存id:num cart {"10001":1,"10002":3}
          //考虑如果取到加入购物车的商品id
          var prodId = this.getAttribute("data-id");
          if(obj[prodId]==undefined){
             obj[prodId] = 1;
          }else{
             obj[prodId]++;
          }
          
          //把这个对象存到cookie
          
          //console.log(obj);
          
          var objToStr = JSON.stringify(obj);//将js对象(数组,对象)转换成JSON格式的字符串
          
          setCookie("cart",objToStr,7);
          
          //显示购物篮中的数量
          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>
    
    

    正则表达式

    表单验证

    简单的布局:

    <div class="container" id="dv">
      <label for="qq">Q Q</label><input type="text" id="qq"><span></span><br/>
      <label>手机</label><input type="text" id="phone"><span></span><br/>
      <label>邮箱</label><input type="text" id="e-mail"><span></span><br/>
      <label>座机</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}$/);    //手机
      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";
          }
        };
      }
    
    
    
    

    运动

    圆周运动

    简单的布局: 一个小球围绕大球转动

    <div id="box">   相对定位
        <div id="circal"></div>  子对定位  //注意小球的margin值
    </div>    
    

    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);
    

    平抛运动

    简单的布局:

    <div id="ball"></div>
    

    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);
    

    抛物线运动

    简单的布局

    <div id="ball"></div>
    <div id="cart"></div>
    

    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样式

    <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>&lt;</div>
    					<div>&gt;</div>
    				</div>
    				<ul id="nums">
    					<li class="hover">1</li>
    					<li>2</li>
    					<li>3</li>
    				</ul>
    		</div>
    

    js实现代码

    <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;
    				}
    				
    				//控制角标的变化
    				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});
    			}
    			
    			//左右按钮实现图片切换
    			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);
    			}
    			//角标变化
    			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>
    
    

    星级评价

    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; //表示点击了哪个星星
    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实现代码

    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);
    			}
    		}
    	}
    }
    

    页码

    <!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); //得到具体的页数
    	
    		//创建具体的页码数字
    		var str="";
    		for(var i=0;i<numsp;i++){
    			str+=`<span>${i+1}</span>`;
    		}
    		osp.innerHTML=str;
    		
    		//默认显示第一页的内容
    		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数据:

    ["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样式代码

    <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结构代码

    搜索<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包裹的函数
          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);
       }
      //接收传来的数据并进行处理
       function aa(data){
          data = data.s;
          var str = "";
          data.forEach(function(item){
             str += `<li><a href="https://www.baidu.com/s?wd=${item}">${item}</a></li>`;
          })
          oList.innerHTML = str;
          }
    </script>
    

    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结构代码

    <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个圆代表红绿灯*/
    
        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<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;
    			}
    

    观察者模式案例

    观察者模式(发布-订阅模式):其定义对象间一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知

    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

    全选和反选:

    简单的布局:

    <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代码: 思路:下面的状态和全选的状态一致,和反选的状态相反的

    $(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结构

    <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>
    

    多级下拉菜单

    html结构

    <ul>
    			<li>主题市场
    				<ul>
    					<li>运动派
    						<ul>
    							<li>三级菜单a</li>
    							<li>三级菜单b</li>
    							<li>三级菜单c</li>
    							<li>三级菜单d</li>
    						</ul>
    					</li>
    					<li>有车族
    						<ul>
    							<li>三级
    								<ul>
    									<li>四级</li>
    									<li>四级</li>
    									<li>四级</li>
    								</ul>
    							</li>
    							<li>三级</li>
    							<li>三级</li>
    							<li>三级</li>
    						</ul>
    					</li>
    					<li>生活家</li>
    				</ul>
    			</li>
    			<li>特色购物
    				<ul>
    					<li>淘宝二手</li>
    					<li>拍卖会</li>
    					<li>爱逛街</li>
    					<li>全球购</li>
    					<li>淘女郎</li>
    				</ul>
    			</li>
    			<li>优惠促销
    				<ul>
    					<li>天天特价</li>
    					<li>免费试用</li>
    					<li>清仓</li>
    					<li>1元起拍</li>
    				</ul>
    			</li>
    			<li>工具</li>
    		</ul>
    

    JQ代码: 用了多种方式,练习jq的用法

    <script type="text/javascript" src="js/jquery-1.11.0.js"></script>
    		<script type="text/javascript">
    			
    			$(function(){
    				//给每一个有ul(有子菜单)的li添加一个图标
    				//添加点击事件,展开收缩
    				//$("li:has(ul)").css("list-style-image","url(img/plus.gif)")
    				$("li:has(ul)").addClass("plus")
    				//链式调用
    				.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结构

    <div id="floorNav">
        <ul>
            <li>1F<span>服饰</span></li>
            <li>2F<span>美妆</span></li>
            <li>3F<span>手机</span></li>
            <li>4F<span>家电</span></li>
            <li>5F<span>数码</span></li>
            <li>6F<span>运动</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>服务</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;">手机</li>
            <li style="background: #558;">家电</li>
            <li style="background: #900;">数码</li>
            <li style="background: #456;">运动</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;">服务</li>
        </ul>
    </div>
    <div id="footer"></div>
    

    js代码

    <script src="jquery-1.11.0.js"></script>
    <script>
        //滚动到某值让小nav显示
        $(function(){
            var flag=true;
            $(window).scroll(function(){
                if(flag){
                //滚动条的显示与隐藏
                var scrolltop=$(this).scrollTop();
                if(scrolltop>300){
                    $("#floorNav").fadeIn();
                }else{
                    $("#floorNav").fadeOut();
                }
    
                //随着滚动显示对应的内容
                //判断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");
    
                        }
                    })
                }
            })
    
            //给每个小nav注册点击事件,不包含最后一个
            $("#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>
    

    商城后台接口

    先建数据库,建好之后,开始接口的操作

    1.创建连接数据库的接口 conn.php

    <?php
    //防止中文乱码
    header("content-type:text/html;charset=utf-8");
    //连接数据库
    $conn=new mysqli("localhost","root","","work2");
    //判断是否连接成功
    if($conn->connect_error){
        die("连接失败".$conn->connect_error);
    }
    

    2.创建注册接口 register.php

    //我的用户表是 users

    用户名不能重复

    请求方式:get,post都支持

    参数 :用户名 usename ,密码 password

    <?php
    header("content-type:text/html;charset=utf-8");
    //连接数据库
    include_once "connect.php";
    //接收数据
    $usename=$_REQUEST["usename"];
    $pwd=$_REQUEST["password"];
    
    //先判断数据库中是否有相同的数据,如果有则插入失败,无则插入成功
    $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{
     	//让插入的数据从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

    <?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

    //我的产品表是protects

    无需参数

    <?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=[];  //不用多个数组嵌套只能获取到一组数组
        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 都支持

    <?php
    header("content-type:text/html;charset=utf-8");
    include_once "connect.php";
    $id=$_REQUEST["id"];
    //获取一整条数据,select 字段 where 获取的就是一个字段值
    $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都支持

    参数:用户 uid ,商品 pid ,添加商品的数量 numbers

    <?php
    
    header("content-type:text/html;charset=utf-8");
    include_once "connect.php";
    
    //添加商品,用户id,商品id,商品数量
    
    $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);
    //先判断数据库中是否有这条数据
    $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

    <?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);*/
    /*多表查询时,需给子表添加外键约束,如果表已经创建好,在软件的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 删除)

    <?php
    header("content-type:text/html;charset=utf-8");
    include_once "connect.php";
    
    //修改购物车, 用户id,商品id,修改的商品数目(>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 "购物车还没有该商品哦";
    }
    
    

    到此完成的后台接口实现完毕。 !!!

    展开全文
  • 第三讲硬盘练习题1

    2021-07-16 08:02:28
    《计算机组装与维护》硬盘练习题第五讲硬盘练习题一、填空1、硬盘接口可划分为____ ___、_____ __2种类型。2、存储设备除了软驱、硬盘外,还包括____ ___、和__ _____。二、选择题1、磁盘存储器的主要技术指标有多项...

    《计算机组装与维护》硬盘练习题

    第五讲硬盘练习题

    一、填空

    1、硬盘接口可划分为____ ___、_____ __2种类型。

    2、存储设备除了软驱、硬盘外,还包括____ ___、和__ _____。

    二、选择题

    1、磁盘存储器的主要技术指标有多项,下面不属于硬盘指标的是_______。

    A.存储容量

    B.单碟容量

    C.转速

    D.带宽

    2、目前移动硬盘接口方大多采用的是__________。

    A. USB接口

    B.SATA接口

    C. IDE接口

    http://doc.docsou.com接口

    3、硬盘中信息记录介质被称为_______。

    A.磁道

    B.磁头

    C.磁头臂

    D.磁盘

    4、目前市场上出售的硬盘主要接口类型有_________。

    A.SATA

    B.IDE

    C.PCI

    D.AGP

    5、计算机在往硬盘上写数据时寻道是从______磁道开始。

    A.外

    B.内

    C.0

    D.1

    6、磁盘上的磁道是_________。

    A.记录密度不同的同心圆

    B.记录密度相同的同心圆

    C. 一条阿基米德螺线

    D. 两条阿基米德螺线

    7、目前市场上用于个人计算机的硬盘的尺寸是_________。A.5.25英寸 B3.5英寸 C.2.5英寸 D.1.8英寸

    8、下列参数哪一项与磁盘的存取速度无关_________。

    A.转速

    B.缓存区的大小

    C.NTFS

    D.平均寻道时间

    9.关于硬盘的数据连接线,下列说法正确的是_________。

    A.对于IDE类型的硬盘,有40芯的硬盘连接线和80芯的硬盘连接线。

    B.IDE类型的硬盘连接线和SATA类型的硬盘连接线相同。

    C.IDE类型的硬盘连接线和SATA类型的硬盘连接线虽然不同,但可以插在主板上的同一个插槽中。

    D.SATA类型的硬盘连接线比IDE类型的硬盘连接线宽。

    10、生产硬盘的著名厂商主要有_________。

    A.希捷

    B.日立

    C.三星 E.迈拓

    11.硬盘和软盘是常见的两种存储媒体,目前在第一次使用时____。

    A.都必须先进行格式化 B.可直接使用,不必进行格式化

    C.只有软盘才必须先进行格式化 D.只有硬盘才必须进行格式化12._____操作易损坏硬盘,故不应经常使用。

    A.高级格式化 B.低级格式化 C.硬盘分区 D.向硬盘拷贝文件

    13.硬盘的读写速度比软盘快得多,容量与软盘相比____。

    A.大得多 B.小得多 C.差不多 D.小一些

    14. 硬盘驱动器____。

    A.全封闭,耐震性好,不易损坏 B.不易碎,不象显示器那样要

    展开全文
  • UML建模练习题

    千次阅读 2020-11-09 14:18:20
    迭代实现剩余的低风险和容易的元素,并且准备部署 移交:把软件部署到用户环境,发布产品 移交阶段是把产品交到用户手中,主要包括市场,包装,安装,配置,用户社区支持,改正错误, etc. beta测试,部署. 9. 用例和...

    UML

    UML建模

    1. UML的三个主要的特性

    • UML是一种语言 ,一种表示方法 ,本身不包含任何方法论的部分
    • UML是用来建模的 ,不用用于编程而是用于建模的
    • UML是统一的标准

    2. UML是一种方法论吗?

    • UML不是方法论它仅仅是一种描述模型的标准语言,虽然渗透了许多方法论的基础概念,但是却没有在标准中给出完整的方法指南。

    4. 应用UML的三种方式

    • UML作为草图:用于探索问题或解决方案空间的复杂部分
    • UML作为蓝图:对已有代码做反向工程导出详细的设计图(前向工程)
    • UML作为编程语言: 用UML完成软件系统的规范,代码可自动生成

    4. 应用UML时可以从三个视角描述

    • 概念透视图:用图来描述现实世界或关注领域中的事物
    • 规格说明透视图:用图描述 软件抽象或具有规格说明和接口的构件,但不特定于某种语言的实现
    • 实现透视图:用图描述特定技术实现软件

    5. 构造型的作用是什么?

    • 构造型用来定义一些特定于某个领域或某个系统的构造块
    • 用来扩展建模元素,增加建模元素的定义

    6. 敏捷开发的定义

    • 敏捷开发是一种以人为核心、迭代、循序渐进的开发方法。在敏捷开发中,软件项目的构建被切分成多个子项目,各个子项目的成果都是经过测试,具备集成可运行的特征,换而言之,就是把一个大项目分为多个相互联系,但也可独立运行的小项目,分别完成,在此过程中软件一直处于可使用状态

    7. 解释主动类的概念,并说明它建模的意义

    • 主动类的实例称为主动对象,
    • 一个主动对象拥有一个控制线程并且能够发起控制活动;它不在别的线程、堆栈或状态机内运行,具有独立的控制期。从某种意义上说,它就是一个线程。

    8. 什么是UP,UP的科目有那些,UP项目将其工作和迭代组织为四个阶段

    • UP(Unified Process)是OO系统的流行和有效的迭代软件开发过程,一种标准的分析和设计方法,保证在软件开发过程中所有必须的任务被理解和完成
    • 科目:业务建模、需求、设计、分析、环境
    • 阶段:
    1. 初始:获取项目的基础,生命期目标

    初始阶段不是需求阶段,而是可行性阶段,做足够的调查以决策:继续或停止.陈述项目的生命周期目标,考虑所有涉众(stakeholder)的需求,范围和边界,接受准则,建立小部分需求.大致的愿景,业务案列(business case),模糊的估计.

    1. 细化:进行软件架构,生命期架构

    通过分析决定风险,项目的稳定愿景,稳定的架构和资源的花费.
    精化的愿景,迭代实现核心架构,解决高风险,辨识重要的需求和范围,更实际的估计.

    1. 构造:构造软件,初始运作功能

    构造阶段是制造过程。它强调管理资源和优化花费,计划和质量。此阶段被分为几个迭代.迭代实现剩余的低风险和容易的元素,并且准备部署

    1. 移交:把软件部署到用户环境,发布产品

    移交阶段是把产品交到用户手中,主要包括市场,包装,安装,配置,用户社区支持,改正错误, etc.
    beta测试,部署.

    9. 用例和使用场景之间是什么关系 ?与协作又是什么关系?

    • 用例是由一组用例实例组成的,
    • 用例实例也就是常说的场景,
    • 而协作是用例的实现。

    10. 敏捷UP方法在组织需求时主要的关键制品有那几个?

    1. 用例模型:一组使用系统的典型场景。主要用于功能需求。
    2. 补充性规格说明:基本上是用例之外的所有内容。主要用于所有非功能需求,也用来记录没有表示为用例的功能特性。
    3. 词汇表:以最简单的形式定义重要的术语。
    4. 设想:概括了高阶需求和项目的业务案例,是简短的执行概要文档。
    5. 业务规则:通常描述了凌驾于某一软件项目的需求或政策。

    11. 候选用例选择的判断准则

    • 老板测试:业务价值可量化
    • EBP测试:基本业务过程测试
    • 规模测试:用例通常由多个步骤组成,避免因其规模较小获得错误提示

    12. 什么是领域模型?如何创建领域模型,如何找到概念类

    • 领域模型:是对领域内的概念类或现实中的对象的可视化的表示
    • 创建领域模型:
      1. 寻找概念类
      2. 将其绘制为UML类图中的类
      3. 添加关联和属性
    • 找概念类:
      1. 重用和修改现有的模型。
      2. 使用分类列表。
      3. 确定名词短语。

    13. UML中有哪几种图

    • 类图:描述一组类之间的关系。用于对应用领域中的概念以及与系统实现有关的内部概念建模;
    • 对象图:描述一组对象之间的关系。它是对象类图的一个实例,表示在某一时刻系统对象的状态、对象之间关系的状态以及对象行为静态方面的状态;
    • 用例图:描述一组用例参与者及其它们之间的关系,是外部用户所能观察到的系统功能的模型图。用于需求建模;
    • 顺序图:描述一个交互,表示了对象之间传送消息的时间顺序;
    • 通信图:描述一个交互,强调对象与对象之间的消息传递;
    • 状态机图:描述一个对象所处的状态及其变化,是一个类对象所可能经历的所有历程的模型图;
    • 活动图:描述执行算法的工作流程中涉及的活动,是对人类组织的现实世界中的工作流程建模;
    • 构件图:描述一组构件及其关系,用于为系统的构件建模型;
    • 部署图:描述一组节点及其关系,允许评估分配结果和资源分配。节点是一组运行期间的系统资源,如计算机、数据库、设备或存储器。

    14. 敏捷UP方法从需求到设计的整个过程,有哪几个模型,主要步骤和产出工件

    • 需求阶段:主要实践包括需求讨论会、设想包装练习、计点投票表决等。产出的制品有用例模型、设想、补充性规格材料、词汇表等。
    • 设计阶段:主要实践包括敏捷建模、测试驱动开发等。产出的制品有设计模型、软件架构文档、数据模型等。

    15. 描述(description)类起什么作用

    • 描述类包含描述其他事物的信息。在以下情况需要增加描述类
      1. 需要有关商品或服务的描述,独立于任何商品或服务的现有实例。
      2. 删除其所描述事物的实例(如Item)后,导致信息丢失,而这些信息是需要维护的,但是被错误地与其所删除的事物关联起来。
      3. 减少冗余或重复信息。

    16. 建立类模型描述,三角形,五边形,N边行,有向图,无向图,

    17. 中文版教材P173,P179多态的图

    • 对于多态的每个具体对象制作单独的图。

    18. 中文版教材P355状态机图

    • 状态机图基本上就是一个状态机中元素的投影,这也就意味着状态机图包括状态机的所有特征。
    • 状态机图显示了一个对象如何根据当前状态对不同事件做出反应的动态行为。
    • 状态机图主要由状态和转换两种元素组成

    19. 软件开发过程中使用UML的必要性以及好处

    • 软件开发是一个很复杂的工程,而采用统一的建模语言来对软件进行描述能够使客户、涉众、开发人员对软件能够有更好的共识,也能够有效地降低复杂性

    20. UML定义了方法和属性的那几种可见性?

    • 属性可见性——B是A的属性。
    • 参数可见性——B是A中方法的参数。
    • 局部可见性——B是A中方法的局部对象(不是参数)。
    • 全局可见性——B具有某种方式的全局可见性。

    21. 类图和对象图的关系

    1. 依赖关系(Dependence):假设A类的变化引起了B类的变化,则说名B类依赖于A类。依赖关系有如下三种情况:1、A类是B类的一个成员变量;2、A类是B类方法当中的一个参数;3、A类向B类发送消息,从而影响B类发生变化;
    2. 泛化关系(Generalization):UML对象图和类图的泛化关系A是B和C的父类,B,C具有公共类(父类)A,说明A是B,C的一般化(概括,也称泛化)在UML当中,对泛化关系有三个要求:1、子类与父类应该完全一致,父类所具有的属性、操作,子类应该都有;2、子类中除了与父类一致的信息以外,还包括额外的信息;3、可以使用父类的实例的地方,也可以使用子类的实例;
    3. 关联关系(Association):类之间的联系,如篮球队员与球队之间的关联(下图所示)。其中,关联两边的"employee"和“employer”标示了两者之间的关系,而数字表示两者的关系的限制,是关联两者之间的多重性。通常有“”(表示所有,不限),“1”(表示有且仅有一个),“0…”(表示0个或者多个),“0,1”(表示0个或者一个),“n…m”(表示n到m个都可以),“m…”(表示至少m个)。
    4. 聚合关系(Aggregation):UML对象图和类图的聚合关系表示的是整体和部分的关系,整体与部分可以分开
    5. 组合关系(Composition):UML对象图和类图的组合关系也是整体与部分的关系,但是整体与部分不可以分开
    6. 实现关系(Implementation):是用来规定接口和实线接口的类或者构建结构的关系,接口是操作的集合,而这些操作就用于规定类或者构建的一种服务。

    22. 对象模型的静态和动态两种模型的作用,敏捷建模对产生这两种图形的实践方法是如何建议的,UML静态和动态模型各包含那几种图?

    • 动态模型有助于设计逻辑、代码行为或方法体,倾向于创建更为优异、困难和重要的图形。
    • 静态模型有助于设计包、类名、属性和方法特征标记的定义。
    • 静态和动态建模之间具有关系,敏捷建模对此的实践是并行创建模型:花费较短的时间创建交互图(动态),然后转到对应的类图(静态),交替进行。

    23. 如何发现用例

    1. 选择系统边界。
    2. 确定主要参与者——通过使用系统的服务实现其目标的那些人或事物。
    3. 确定每个主要参与者的目标。
    4. 定义满足用户目标的用例,根据其目标对应用例命名

    24. 画一张顺序(sequence)图描述顾客购买商品(教材上POS机例子)

    25. UP迭代计划是由哪些因素驱动的?

    • 风险(risk-driven)驱动
    • 客户驱动(client-driven)

    26. 建模的目的是什么?

    • 建模的主要目的是理解和沟通,而非文档

    27. 用例的actor有哪些类型

    1. 主要参与者:调用系统来满足自己的目标
    2. 次要参与者:为系统提供服务
    3. 后台参与者:对用例的行为感兴趣

    28. 什么是系统顺序图,和顺序图有什么区别?

    • 系统顺序图是阐述与所讨论的系统相关的输入和输出时间而快速、简单创建的制品
    • 系统顺序图是操作契约和(最重要的)对象设计的输入
    • 系统顺序图展示了直接与系统交互的外部参与者、系统(作为黑盒)以及参与者发起的系统事件
    • UML没有定义所谓的“系统顺序图”,只定义了“顺序图”,“系统”这一限定词强调将系统的应用视为黑盒

    29. 扩展本质用例是什么,如何产生

    • 它是什么:一份分析文档详细描述了高层用例中识别的功能元素.
    • 他不是什么:扩展本质用例不是画图,不包括stickfigures,表示系统的方框,或其它图标,尽管与一个图形关联.
    • 如何产生:
      • Step 1:命名用例(系统功能,e.g.“输入时间表信息”)
      • Step 2:找出相关的参与者.
      • Step 3:以客户理解的语言描述用例的意图(intent).
      • Step 4:找出与此用例有关的假设和限制,和此用例将扩展或包含的用例.
      • Step5:规定理想路径(如果你喜欢用两列)标记为“参与者动作”和“系统响应”,给每一步编号。这构成了用例的基本路径.
      • Step 6:识别用户错误,建立替代路径处理错误.

    30. 一个软件系统中有那些类型的事件?

    软件系统基本对三件事响应:

    • 来自参与者的外部事件
    • 时钟事件
    • 缺陷或异常

    31. 中文版教材P110,P111,P122有关图形的说明和解释

    32. 从操作契约描述的角度看,领域模型有那几种状态变化

    包括:

    • 创建实例
    • 形成或消除关联
    • 改变属性

    33. 什么是模型

    • 在开发一个软件期间所产生的中间描述或文档 ,模型是正在构建的系统某方面的表示(representation)

    34. 什么是Descoping

    • 从迭代中移去任务或需求,并将其分配到将来的某个迭代中处理,而不是推迟完成时间。

    35. 什么是关联,关联的角色,什么是依赖,什么是泛化,聚合和组合

    • 关联是类(更精确地说,是这些类的实例)之间的关系,表示有意义和值得关注的连接。在UML中,关联被定义为“两个或多个类元之间的语义联系,涉及这些类元实例之间的连接”。它使一个类的可见属性和方法被另一个类使用。
    • 关联是一种结构关系,规定一个对象和另一个对象联接。
    • 依赖是一种使用关系,说明一个事物的规格说明改变会对使用它的事物产生影响。
    • 泛化是一般性的事物(超类或者父类)和更特殊事物(子类)之间的关系。
    • 聚合用来表明一个类是实际上拥有但可能共享另一个类的对象 。(整体/部分关系)(has-a关系)
    • 组合是聚合的一种,并且是更严格的整体/部分关系: 部分的实例在某一时刻只属于唯一的组合实例。
      部分永远属于某一组合,并且组合负责建立,删除部分.(如果组合被删除,部分必须被删除,或依附于另一个组合)

    36. 什么是交互

    • 交互是特定语境中共同完成一定任务的 一组对象之间交换的信息集合,一个对象群体的行为或单个操作的行为都可以用一个交互来描述。

    37. 软件开发方法学定义,包括什么内容。

    • 多年以来,已经试验了许多不同的开发软件策略,一些特别成功的或者广泛适用的策略已经形成并作为方法学发表
    • 方法学对软件开发在至少两个重要方面提出了指导:
      1. 方法学定义了能够有助于开发一个系统的若干模型
      2. 方法学定义了一组规范表示法来描写建议的模型,形成文档
      3. 方法学还定义了软件开发中包含的各种不同的活动,并指定了执行这些活动应当有的次序

    38. 面向对象分析,面向对象设计主要做什么工作。

    • 面向对象分析过程中,强调的是在问题领域内发现和描述对象(或概念)。 面向对象设计过程中,强调的是定义软件对象以及它们如何协作以实现需求。

    39. 什么是逻辑架构,模型视图分离原理。

    逻辑架构:按照概念组织(conceptualorganization)描述系统,层,包,类,接口和子系统.该原理规定:
    模型(领域)对象不应该由视图(展现)对象的直接指示.领域类应该封装和应用逻辑有关的信息和行为.PPT5(第46页开始)

    40. 什么是职责驱动设计,最重要的OOA/D技能是什么。

    • 职责驱动设计即如何给相互协作的对象分配职责,主要关注的是职责、角色以及协作。
    • OA/D中最关键、最基本的能力是熟练的为软件组件分配职责。因为分配职责是必须要执行的一项活动,并且它对软件组件的健壮性、可维护性和可重用性具有重要影响。

    应用题重点掌握领域模型的建立,顺序图的画法。

    展开全文
  • Java基础练习题及详细答案

    千次阅读 多人点赞 2020-08-17 17:08:31
    本篇文章给大家安利一些关于 Java 基础的练习题,每道题都附有答案链接,答案解题的每个步骤到运行结果都十分详细,十分适合小白拿来练习,也十分适合准备面试的各位复习下 Java 基础,这篇文章我会不断更新,题目都...

    本文参考 嗨客网 Java 实战

    前言

    本篇文章给大家安利一些关于 Java 基础的练习题,每道题都附有答案链接,答案解题的每个步骤到运行结果都十分详细,十分适合小白拿来练习,也十分适合准备面试的各位复习下 Java 基础,这篇文章我会不断更新,题目都是对应 Java 基础中的各个知识点,大家在学习了Java 基础之后,做几道相关的练习题,复习一下该知识点,在学习过程中,觉得十分抽象、晦涩难懂的知识点,配合一道案例题,或许会有意想不到的效果哦!
     

    目录

    Java入门

    • Java HelloWorld
    • Java注释

    Java变量

    • 01 Java变量定义
    • 02 Java数据类型
    • 03 Java变量运算
    • 04 Java变量运算
    • 05 Java常量

    Java三元运算符

    • 01 Java三元运算符
    • 02 Java三元运算符
    • 03 Java三元运算符

    Java条件判断

    • 01 Java if条件判断
    • 02 Java if条件判断
    • 03 Java switch
    • 04 Java switch
    • 05 Java switch

    Java循环

    • 01 Java for循环
    • 02 Java for循环
    • 03 Java for循环
    • 04 Java for循环
    • 05 Java for循环嵌套
    • 06 Java for循环嵌套
    • 07 Java break
    • 08 Java continue
    • 09 Java while循环
    • 10 Java do while循环
    • 11 Java死循环

    Java随机数

    • 01 Java随机数
    • 02 Java随机数
    • 03 Java随机数

    Java数组

    • 01 Java定义数组
    • 02 Java遍历数组
    • 03 Java数组
    • 04 Java数组

    未完待续。。。。。

     

    正文:Java基础练习题

    Java入门

    题目一

    题目:使用 Java 实现,编写第一个程序,即 Java HelloWorld。

    答案:https://haicoder.net/case/java/java-helloworld.html

    题目二

    题目:使用 Java 的注释,包括单行注释和多行注释。

    答案:https://haicoder.net/case/java/java-descripotion.html

    Java变量

    题目一

    题目:Java变量定义,分别定义 Java 的 8 种 基本数据类型 的变量。

    答案:https://haicoder.net/case/java/java-variable.html

    题目二

    题目:Java数据类型,选用 Java 合适的数据类型定义变量。

    答案:https://haicoder.net/case/java/java-datatype.html

    题目三

    题目:Java变量运算,运用 Java 变量计算圆柱体积。

    答案:https://haicoder.net/case/java/java-variable-operator.html

    题目四

    题目:Java变量运算,运用 Java 变量根据父母身高预测出子女身高。

    答案:https://haicoder.net/case/java/java-variable-operator2.html

    题目五

    题目:Java 常量,完成 Java 常量的基本使用。

    答案:https://haicoder.net/case/java/java-contants.html

    Java三元运算符

    题目一

    题目:Java三元运算符,运用 Java 三元运算符进行运算。

    答案:https://haicoder.net/case/java/java-ternary-operator.html

    题目二

    题目:Java三元运算符,某小伙想定一份外卖,商家的优惠方式如下:鱼香肉丝单点 24 元,油炸花生米单点 8 元,米饭单点 3 元。订单满 30 元 8 折优惠。鱼香肉丝优惠价 16 元,但是优惠价和折扣不能同时使用。那么这个小伙要点这三样东西,最少要花多少钱?

    答案:https://haicoder.net/case/java/java-ternary-operator2.html

    题目三

    题目:Java三元运算符,运用 Java 三元运算符获取几个数中的最大值。键盘录入三位同学的年龄,用程序实现获取这三个同学的最大年龄。

    答案:https://haicoder.net/case/java/java-ternary-operator3.html

    Java条件判断

    题目一

    题目:Java if条件判断,李雷想买一个价值 7988 元的新手机,他的旧手机在二手市场能卖 1500 元,而手机专卖店推出以旧换新的优惠,把他的旧手机交给店家,新手机就能够打 8 折优惠。

    答案:https://haicoder.net/case/java/java-if.html

    题目二

    题目:Java if条件判断,根据用户输入的年龄,判断用户属于哪个年龄段。

    答案:https://haicoder.net/case/java/java-if2.html

    题目三

    题目:Java switch,键盘录入一个 0 到 7 数字,使用 switch 输出这个数字对应的星期。

    答案:https://haicoder.net/case/java/java-switch.html

    题目四

    题目:Java switch,键盘录入一个月份数字,使用 switch 输出这个月份对应的季节。

    答案:https://haicoder.net/case/java/java-switch2.html

    题目五

    题目:Java switch,用户输入星期数,使用 Java switch 匹配显示对应的运动项目。输入星期数,显示今天的运动项目,周一跑步、周二游泳、 周三慢走、 周四单车、 周五爬山、周六拳击、周日休息。

    答案:https://haicoder.net/case/java/java-switch3.html

     

    Java流程控制

    题目一

    题目:Java for循环,在中国历法中有十二生肖年份,2019 年是己亥猪年,请在控制台输出从 1949 年(包含)到 2019 年(包含)中所有是猪年的年份。

    答案:https://haicoder.net/case/java/java-for.html

    题目二

    题目:Java for循环,中国使用的公历有闰年的说法,闰年的规则是:四年一闰,百年不闰,四百年再闰。(年份能够被 4 整除但不能被 100 整除算是闰年,年份能被 400 整除也是闰年)。请打印出 2000 年到 2019 年的所有闰年年份。

    答案:https://haicoder.net/case/java/java-for2.html

    题目三

    题目:Java for循环,计算出 1~100 之间的偶数和,并把求和结果在控制台输出 。

    答案:https://haicoder.net/case/java/java-for3.html

    题目四

    题目:Java for循环,请输出所有 “水仙花数” 。“水仙花数” 指的是一个三位数,个位、十位、百位的数字立方和等于原数本身。

    例如:153 333 + 555 + 111 = 153。

    答案:https://haicoder.net/case/java/java-for4.html

    题目五

    题目:Java for循环嵌套,使用 for 循环语句,在控制台打印出一个四行五列的长方形,效果如下:

    @@@@@
    @@@@@
    @@@@@
    @@@@@

    答案:https://haicoder.net/case/java/java-for-nest.html

    题目六

    题目:Java for循环嵌套,使用 for 循环语句,在控制台打印出一个五行的三角形,效果如下:

    @
    @@
    @@@
    @@@@
    @@@@@

    答案:https://haicoder.net/case/java/java-for-nest02.html

    题目七

    题目:Java break,运用 break 结束当前循环 ,计算 1、2、3、4、5 这一组数据,但要求只计算前 3 个数的和。

    答案:https://haicoder.net/case/java/java-break.html

    题目八

    题目:Java continue,运用 continue 跳过当前循环 ,计算 1、2、3、4、5 这一组数据,但要求只计算 1、2、3、5 的和。

    答案:https://haicoder.net/case/java/java-continue.html

    题目九

    题目:Java while循环,运用 Java while 循环 计算出 1 到 10 的和。

    答案:https://haicoder.net/case/java/java-while.html

    题目十

    题目:Java do while循环,运用 Java do while循环 计算出 1 到 10 的和。

    答案:https://haicoder.net/case/java/java-do-while.html

    题目十一

    题目:Java 死循环,利用死循环,持续获取用户输入。(应用场景如:持续输入每一个学生成绩)

    答案:https://haicoder.net/case/java/java-dead-cycle.html

     

    Java随机数

    题目一

    题目:Java随机数,运用 Java 的 Random 得到随机数,获取 0 到 9 内的随机数(包括 0 和 9)。

    答案:https://haicoder.net/case/java/java-random.html

    题目一

    题目:Java随机数,运用 Java 的 Random 函数得到区间随机数。

    1. 生成一个 1-10 之间的随机数。
    2. 生成一个 3-15 之间的随机数。
    3. 生成一个 5-999 之间的随机数。

    答案:https://haicoder.net/case/java/java-random2.html

    题目二

    题目:Java随机数,运用 Java 的 Random 函数实现猜数字游戏。

    随机产生一个 1-100 之间的数字,然后让玩家不断猜测,如果猜大,提示过大,如果猜小,提示过小,如果猜中则程序停止。

    答案:https://haicoder.net/case/java/java-random3.html

     

    Java数组

    题目一

    题目:Java定义数组,Java 数组 的定义格式分别为:静态初始化、动态初始化,使用静态初始化和动态初始化定义数组。

    答案:https://haicoder.net/case/java/java-array-init.html

    题目二

    题目:Java遍历数组,请使用静态初始化的方式,创建一个长度为 5 的整数数组,并为数组中的元素赋值,遍历数组,在同一行打印所有元素,元素之间用空格隔开,比如:如果数组为 { 1,2,3,4,5 } 则打印结果为:1 2 3 4 5。

    答案:https://haicoder.net/case/java/java-arrary-walk.html

    题目三

    题目:Java 数组 ,创建一个长度为 6 的整数数组,随机生成六个 0 (包含) - 100 (不包含) 之间的整数存放到数组中,然后计算出数组中所有元素的和并打印。

    答案:https://haicoder.net/case/java/java-array.html

    题目四

    题目:Java数组,运用 Java 数组 存储学生成绩,遍历数组 得出成绩最高的学生。

    答案:https://haicoder.net/case/java/java-array2.html

     

    彩蛋

    Java 基础练习题内容,剩下的题目我会继续更新,先提前小小的剧透一下后面的内容哦!
    www.haicoder.net
    你以为到这里就结束了吗?还有Java基础增强的习题,奉上大纲:
    www.haicoder.net
    但是因为文章数量过多,整理不易,所以如果更新过慢,请大家谅解,文章我会尽自己最大速度更新,大家可以先关注我,或者收藏下这篇文章,我会持续更新的,以上案例是提供给有一定 Java 基础的同学看的,如果感觉做题有些压力,可以先到各类教程网学习Java,本人这里当然首推上方习题及答案来源的 嗨客网

    展开全文
  • 所以为了大家能够想练习的时候有素材,泡泡给大家整理了一些练习题 由于平时比较忙,所以我在不定时努力更新中,欢迎监督~ 500是立的Flag啊哈哈哈哈,我们共同努力吧,先出个100道,希望能给大家带来帮助~ ???????????? ...
  • java基础练习题_if语句

    千次阅读 2021-03-03 11:31:09
    李雷想买一个价值7988元的新手机,她的旧手机在二手市场能卖1500元,而手机专卖店推出以旧换新的优惠,把她的旧手机交给店家,新手机就能够打8折优惠。为了更省钱,李雷要不要以旧换新?请在控制台输出。 训练提示 ...
  • SQL练习题

    2021-03-04 05:12:37
    查询近三十天活跃用户数 -- 简单,我的写法,注意这里的近三十不是小于等于 select activity_date as day ,count(distinct user_id) as active_users from Activity where datediff("2019-07-27",activity_date ) ...
  • Mini CFA 考试练习题 Industry Overview

    千次阅读 2019-10-07 21:28:56
    第一次刷CFA的练习题,31道题目正确率74%,对后面的学习充满信心。 题目及解析: Q. A broker will act as a(n): agent. principal. proprietary trader. A是正确的。 经纪人充当代理人,不直接与投资者交易。 B和C...
  • 第一部分选择 一单项选择(本大共20小,每小1分,共20分在每小列出的四个备选项 中只有一个是符合题目要求的,请将其代码填写在后的括号内错选多选或未选 均无分 1.从具体独特的现象中抽取一些主要性质,...
  • 嵌套循环和方法 1. 嵌套循环 嵌套循环 为了让大家能够更好的理解循环嵌套之后的一个操作,后期代码... 以下练习题我们需要学会推导过程!!! 1.1 入门 /* L * ***** 1 5 ***** 2 5 ***** 3 5 ***** 4 5 ...
  • Python:MySQL练习题

    2020-12-08 18:56:37
    department varchar(12) ) select * from testtable1 insert into testtable1 values('设计') insert into testtable1 values('市场') insert into testtable1 values('售后') /* 结果 id department 1 设计 2 ...
  • 计算机组成原理第四章练习题,选择题,填空题!第四章一.选择题1.指令系统中采用不同寻址方式的目的主要是 C 。A. 实现程序控制和快速查找存储器地址B. 可以直接访问主存和外存C. 缩短指令长度,扩大寻址空间,提高...
  • mysql基础及练习题

    2021-01-18 19:38:25
    值越分散的列,索引的效果越好 索引类型 primary key主键索引 index 普通索引 unique index 唯一性索引 fulltext index 全文索引 综合练习: 连接上数据库服务器 创建一个gbk编码的数据库 建立商品表和栏目表,字段...
  • CISA BCP部分练习题

    千次阅读 2019-01-16 23:54:16
    CBK-BCP部分必考题和知识点1. Which type of off-site backup facility is the most popular for companies today? A....1.哪种类型的场外备份设施是当今最受公司欢迎的? A.热站 B.冷站点 C.互...
  • PTA—C语言练习题

    千次阅读 2021-03-23 20:05:23
    复习C练习题 1-1:Hello World! 要求:编写程序,输出一个短句“Hello World"。 #include<stdio.h> int main(void){ printf("Hello World!"); return 0; } 1-2:温度转换 要求:本题要求编写程序,计算华氏...
  • mysql练习题

    2019-09-13 07:59:07
    MySQL练习题 1.查找my.ini文件,查看与character-set相关的配置项,如果不是utf8,请将其更改为utf8。 2.在cmd窗口中使用命令行登录数据库服务器。 3.查看当前服务器上有哪些数据库?写出命令及查询结果。 4....
  • 练习题1. 网络营销基础服务市场:域名注册 虚拟主机 企业网站建设2. 网络营销推广服务市场:分类目录登录、专业搜索引擎的关键词广告和竞价排名、供求信息发布、专业e-mail策略电子商务平台 推荐网站:一推互动...
  • 华为5G认证练习题

    千次阅读 2021-10-21 21:47:56
    华为5G认证练习题 粗体的是正确答案 粗体的是正确答案 粗体的是正确答案 Ctrl+ F 可以快速查找题目 第一章 1. 移动通信领域,负责制定技术规范和技术报告的是哪个标准组织?(单选题,4分) A. 3GPP2 B. OTSA C. 3...
  • MySQL练习题

    2021-03-28 20:46:49
    MySQL练习题 文档下载链接: 链接:https://pan.baidu.com/s/1K9hoIbwWCNmEcaTBYBupMg 提取码:bs3g 1. 组合两个表 需求:编写一个 SQL 查询,对两表进行关联,展示列为: FirstName, LastName, City, State 展示...
  • 第一部分 Word练习题

    千次阅读 2021-01-05 12:03:06
    第一部分 Word练习题 1.按要求编辑以下文字: 祖国为你们骄傲 祖国为你们骄傲。 我们有理由骄傲,因为我国体育健儿实现了历史性超越,他们不畏强手,奋勇当先,表现出顽强的拼搏精神、精湛的运动技术和良好的体育...
  • 牛客选择练习题

    2021-10-11 17:32:13
    优先级从低至高:(、±、/、^ 回到本,流程如下:(数字标明当前栈中元素个数) 遇+,入栈,1个 遇-,-的优先级不大于+,弹出+,压入-,1个 遇*,的优先级大于-,入栈,2个 遇(,入栈,3个 遇(,入栈,4个 遇+,+...
  • SQL SERVER练习题及答案2

    千次阅读 2021-01-06 09:52:26
    1、 数据库、数据库系统以及数据库管理系统的英文缩写分别是__A__。 A、DB DBS DBMS B、DB DBMS DBS C、DBS DBMS DB SQL SERVER 数据库试题 SQL SERVER 2009-07-11 21:59 阅读156 评论1 字号: 大大 中中 小小 一、...
  • 文学理论练习题及答案

    千次阅读 2021-06-05 10:19:24
    文学理论练习题1 一、填空题(每空2分,共20分) 1、古罗马时期的贺拉斯在《诗艺》中提出了后来影响久远的“____________”说。 2、____________是象征型文本的核心特征。 3、文学形象主要有文学意象、_________...
  • 一、单项选择(每小2分,共20分,请将正确答案的序号填在括号内) 1.( )尤其适用于市场现象数量方面的调查研究。 A.抽样调查 B.访问调查 C.实验调查 2.( )是市场调查的核心内容。 A.市场环境调查 B.市场商品需求...
  • 企业战略数据模型可分为两种类型:( 8 )描述日常事务处理中的数据及其关系;( 9 )描述企业管理决策者所需信息及其关系。 (8) A. 元数据模型 B. 数据库模型 c. 数据仓库模型 D. 组织架构模型 ( 9 )A. 元数据...
  • HCIP-H12-223练习题

    千次阅读 多人点赞 2020-12-01 20:54:21
    习题 1 企业网络常常使用DHCP为用户分配IP地址,与静态地址分配方式相比,DHCP地址分配方式极大地减少了对网络地址进行管理的工作量? A. 正确 B. 错误 答案: A 习题 2 下列哪项故障排除方法不是使用TCP/IP参考模型...
  • 单选 1 软件系统通过影响问题域帮助人们解决问题,称之为_______。 A、问题域 B、解系统 C、问题域特性 D、共享现象 正确答案: B 2 ______的关注点在于模拟性。 A、专业用户的纯工具型软件 B、普通用户的纯工具型...
  • 商务智能_测试题/练习题

    千次阅读 2021-09-25 17:54:24
    一 1、什么是商务智能产生的驱动力( c ) a将企业内部的数据转换为利润 b商务智能可帮助企业收集信息 ...a即企业在日常活动中,应具备快速接收新想法、新事物的能力,不能因循守旧,与时俱进才能把握市场动态,跟上
  • 贾俊平统计学第七版课后习题答案

    万次阅读 2019-11-11 10:25:30
    (3)市场研究 (4)财务分析 (5)经济预测 (6)人力资源管理 二、统计数据的类型 1分类数据、顺序数据、数值型数据(按计量尺度不同分类) (1)分类数据:只能归于某一类别的非数字型数据,是对事物...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,146
精华内容 2,458
关键字:

市场类型习题英文