第十二天

时间：2021-03-08 14:18:22 阅读：0 评论：0 收藏：0 [点我收藏+]

标签：nim gif string dom syntax 滑动 ges 固定 key

1- var str = “hgDzGHjhcxghvcgxzhjzcgjhxzgcjhgsduyfuys”将字符串中出现次数最多的字母弹框输出;

   var str = ‘hgDzGHjhcxghvcgxzhjzcgjhxzgcjhgsduyfuys‘;
        var result = maxN(str);
        function maxN(str) {
            var json = {};  //定义一个json对象用于保存str的每一项以及出现次数。
            for (var i = 0; i < str.length; i++) { //遍历str,循环其中的每一个字符，将某个字符的值及出现的个数拿出来作为json的key和value
                if (!json[str.charAt(i)]) {//判断json中是否有当前str的值
                    //如果不存在 就将当前值添加到json中去，并设置1
                    json[str.charAt(i)] = 1;
                } else { //如果存在的话就让数组中已有的当前值的value值++；
                    json[str.charAt(i)]++;
                }
            } //存储出现次数最多的值和次数
            var number = ‘‘;
            var num = 0;
            //遍历json 使用打擂算法统计需要的值
            for (var j in json) { //如果当前项大于下一项
                if (json[j] > num) { //就让当前值更改为出现最多次数的值
                    num = json[j]; number = j;
                }
            } return {
                number: number, num: num
            }
        }
        alert(‘该字符串出现‘ + result.num + ‘次的‘ + result.number);

2- 举例实现对象的深拷贝;

深拷贝: 复制,把一个对象中的属性或者方法复制到另外的对象中

 var obj1 = {
            age: 18,
            sex: "男",
            hobby: [‘赛车‘, ‘打球‘, ‘滑雪‘],
            dog: {
                name: ‘小白‘,
                weight: 10,
                color: ‘白‘
            }
        }
        var obj2 = {}
        // 通过函数,把a中的属性复制到b
        function copy(a, b) {
            // 先获取a中的属性
            for (var key in a) {
                var items = a[key];
                // 判断items是不是数组
                if (items instanceof Array) {
                    // 如果是数组,b中要添加新属性,这个属性也是数组形式
                    b[key] = []
                    // 遍历数组,把a[key]一个一个复制到b[key]中
                    copy(items, b[key])
                    // 判断items是不是对象
                } else if (items instanceof Object) {
                    b[key] = {}
                } else {
                    // 普通数据,直接复制
                    b[key] = items
                }
            }
        }
        copy(obj1, obj2)
        console.dir(obj1)
        console.dir(obj2)

3-举例实现对象方法的继承

function Parent(firstname)
{
  this.fname=firstname;
  this.age=40;
  this.sayAge=function()
  {
    console.log(this.age);
  }
}
function Child(firstname)
{
  this.parent=Parent;
  this.parent(firstname);
  delete this.parent;
  this.saySomeThing=function()
  {
    console.log(this.fname);
    this.sayAge();
  }
}
var mychild=new Child("李");
mychild.saySomeThing();

4-写一个左中右布满全屏，其中左右固定宽度 200px，中间部分自适应，要求先加载中间部分，写出结构和样式

<style>
        html,
        body {
            margin: 0;
            width: 100%;
        }

        #leftDiv,
        #rightDiv {
            width: 200px;
            height: 200px;
            position: absolute;
            top: 0;
        }

        #leftDiv {
            background: #16A05D;
            left: 0;
        }

        #rightDiv {
            background: #DC5044;
            right: 0;
        }

        #centerDiv {
            background: #FFCD41;
            height: 200px;
        }
    </style>
</head>

<body>
    <div id="leftDiv">左边div</div>
    <div id="centerDiv">中间div</div>
    <div id="rightDiv">右边div</div>
</body>

5- 封装一个 jqery 的插件

1- var str = “hgDzGHjhcxghvcgxzhjzcgjhxzgcjhgsduyfuys”将字符串中出现次数最多的字母弹框输出;

   var str = ‘hgDzGHjhcxghvcgxzhjzcgjhxzgcjhgsduyfuys‘;
        var result = maxN(str);
        function maxN(str) {
            var json = {};  //定义一个json对象用于保存str的每一项以及出现次数。
            for (var i = 0; i < str.length; i++) { //遍历str,循环其中的每一个字符，将某个字符的值及出现的个数拿出来作为json的key和value
                if (!json[str.charAt(i)]) {//判断json中是否有当前str的值
                    //如果不存在 就将当前值添加到json中去，并设置1
                    json[str.charAt(i)] = 1;
                } else { //如果存在的话就让数组中已有的当前值的value值++；
                    json[str.charAt(i)]++;
                }
            } //存储出现次数最多的值和次数
            var number = ‘‘;
            var num = 0;
            //遍历json 使用打擂算法统计需要的值
            for (var j in json) { //如果当前项大于下一项
                if (json[j] > num) { //就让当前值更改为出现最多次数的值
                    num = json[j]; number = j;
                }
            } return {
                number: number, num: num
            }
        }
        alert(‘该字符串出现‘ + result.num + ‘次的‘ + result.number);

2- 举例实现对象的深拷贝;

深拷贝: 复制,把一个对象中的属性或者方法复制到另外的对象中

 var obj1 = {
            age: 18,
            sex: "男",
            hobby: [‘赛车‘, ‘打球‘, ‘滑雪‘],
            dog: {
                name: ‘小白‘,
                weight: 10,
                color: ‘白‘
            }
        }
        var obj2 = {}
        // 通过函数,把a中的属性复制到b
        function copy(a, b) {
            // 先获取a中的属性
            for (var key in a) {
                var items = a[key];
                // 判断items是不是数组
                if (items instanceof Array) {
                    // 如果是数组,b中要添加新属性,这个属性也是数组形式
                    b[key] = []
                    // 遍历数组,把a[key]一个一个复制到b[key]中
                    copy(items, b[key])
                    // 判断items是不是对象
                } else if (items instanceof Object) {
                    b[key] = {}
                } else {
                    // 普通数据,直接复制
                    b[key] = items
                }
            }
        }
        copy(obj1, obj2)
        console.dir(obj1)
        console.dir(obj2)
3-举例实现对象方法的继承
function Parent(firstname)
{
  this.fname=firstname;
  this.age=40;
  this.sayAge=function()
  {
    console.log(this.age);
  }
}
function Child(firstname)
{
  this.parent=Parent;
  this.parent(firstname);
  delete this.parent;
  this.saySomeThing=function()
  {
    console.log(this.fname);
    this.sayAge();
  }
}
var mychild=new Child("李");
mychild.saySomeThing();
4-写一个左中右布满全屏，其中左右固定宽度 200px，中间部分自适应，要求先加载中间部 分，写出结构和样式
<style>
        html,
        body {
            margin: 0;
            width: 100%;
        }

        #leftDiv,
        #rightDiv {
            width: 200px;
            height: 200px;
            position: absolute;
            top: 0;
        }

        #leftDiv {
            background: #16A05D;
            left: 0;
        }

        #rightDiv {
            background: #DC5044;
            right: 0;
        }

        #centerDiv {
            background: #FFCD41;
            height: 200px;
        }
    </style>
</head>

<body>
    <div id="leftDiv">左边div</div>
    <div id="centerDiv">中间div</div>
    <div id="rightDiv">右边div</div>
</body>
5- 封装一个 jqery 的插件
/**
 * 轮播图jquery插件 *
 * 要求将被渲染为轮播图的div的id名为slider
 * 调用方式为$(‘#slider‘).sliderImg(imgs);
 * 其中imgs是图片数组，每一个数组元素为图片的路径名
 * 样式需引入slider.css, 默认图片大小为520*280px,
 */
(function ($) {
    function Slider(options) {
        this.wrapper = options.wrapper;
        this.timer = null;
        this.nowIndex = 0;
        this.itemWidth = parseInt(this.wrapper.css(‘width‘));
        this.itemNum = imgs.length;
        this.locked = false;
        this.imgs = options;
  
        this.init();
    }
    Slider.prototype.init = function () {
        this.createDom();
        this.bindEvent();
        this.automove();
    },
    Slider.prototype.createDom = function () {
        var imgBox = $(‘<ul class="img-box"></ul>‘);
        var imgLi = ‘‘;
        var orderListStr = ‘‘
        for (var i = 0; i < this.itemNum; i++) {
            imgLi += ‘<li><a href="javascript:void(0)">\
                        <img src="‘+ this.imgs[i] + ‘" >\
                    </a></li>‘;
            orderListStr += ‘<li></li>‘
        }
        imgLi += ‘<li><a href="javascript:void(0)">\
                        <img src="‘+ this.imgs[0] + ‘" >\
                    </a></li>‘;
  
        var btnDiv = ‘<div class="btn">\
                            <a class="prev"><span></span></a>\
                            <a class="next"><span></span></a>\
                        </div>‘;
        var orderBox = $(‘<div class="order"></div>‘);
        var orderUl = $(‘<ul></ul>‘);
        $(this.wrapper).append(imgBox.html(imgLi))
            .append($(btnDiv))
            .append(orderBox.append(orderUl.html(orderListStr)));
        $(‘#slider .order li‘).eq(0).addClass(‘active‘);
    };
    /**
     * 绑定事件
     */
    Slider.prototype.bindEvent = function() {
        var self = this;
        $(‘#slider .order li‘).add(‘.next‘).add(‘.prev‘).on(‘click‘, function () {
            var className = $(this).attr(‘class‘)
            if (className == ‘prev‘) {
                self.move(‘prev‘);
            } else if (className == ‘next‘) {
                self.move(‘next‘);
            } else {
                self.move($(this).index())
            }
        })
        $(‘#slider‘)
            .on(‘mouseenter‘, function () {
                $(‘#slider .btn‘).show();
                clearTimeout(self.timer);
            })
            .on(‘mouseleave‘, function () {
                $(‘#slider .btn‘).hide();
                self.automove();
            })
    }
    /**
     * 定时调用移动函数，轮播下一张图片
     */
    Slider.prototype.automove = function() {
        clearInterval(this.timer)
        var self = this;
        this.timer = setTimeout(function () {
            self.move(‘next‘);
        }, 2000);
    }
    /**
     * 根据方向，更改index，更改后的Index表示我想到哪一张去
     * @param {*} dir 方向
     */
    Slider.prototype.move = function(dir) {
        if (this.locked) {
            return;
        }
        this.locked = true;
        if (dir == ‘prev‘ || dir == ‘next‘) {
            if (dir == ‘next‘) {
                if (this.nowIndex == this.itemNum) {
                    this.nowIndex = 0;
                    $(‘#slider .img-box‘).css(‘left‘, 0);
                }
                this.nowIndex++;
            } else {
                if (this.nowIndex == 0) {
                    this.nowIndex = this.itemNum;
                    $(‘#slider .img-box‘).css(‘left‘, -(this.itemNum * this.itemWidth) + ‘px‘);
                }
                this.nowIndex--;
            }
        } else {
            this.nowIndex = dir;
        }
        //先改变索引样式，再滑动
        this.changeStyle();
        this.slider();
    }
    /**
     * 移动到nowindex指向元素的位置
     */
    Slider.prototype.slider = function() {
        var self = this;
        //这个animate必须写成对象形式
        $(‘#slider .img-box‘).animate({ left: -(self.nowIndex * self.itemWidth) + ‘px‘ }, function () {
            self.automove();
            self.locked = false;
        })
    }
    /**
     * 修改索引的样式
     */
    Slider.prototype.changeStyle = function() {
        $(‘#slider .order .active‘).removeClass(‘active‘);
        if (this.nowIndex == this.itemNum) {    //处理多出来一个轮播页的关键！！！
            //这个时候是展示的多出来的那一张，其实是第0张
            $(‘#slider .order li‘).eq(0).addClass(‘active‘);
        } else {
            $(‘#slider .order li‘).eq(this.nowIndex).addClass(‘active‘);
        }
    }
  
    //添加自定义jq插件
    $.fn.extend({
        sliderImg: function (options) {
            options.wrapper = this || $(‘body‘);
            new Slider(options);
        }
    })
})(jQuery);

第十二天

标签：nim gif string dom syntax 滑动 ges 固定 key

原文地址：https://www.cnblogs.com/haoyueyong/p/14495990.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行