技巧

2019-02-13  本文已影响0人  晚溪呀

一、轮播图

1、轮播图只需要移动对应序号 * 图片自身宽度即可

要限制点击太快只需要判断两次点击的间隔时间小于1000,如果小于1000,第二次点击不生效 监听上一次和这一次点击之间的时间间隔

        oldTime = new Date();
        next.onclick = () => {
            //  限制点击间隔时间,防止点击太快
            if (new Date() - oldTime < 600) {
                return;
            }
            oldTime = new Date();
        }

轮播图点击下一张要有一个判断,最后一张到第一张是单独的逻辑,
其他的又得是单独的逻辑

       放六张图片,第一张和第六张相同

        点击下一张
        index++
        if (index > x.length - 1){
            //  滚动最后一张结束后,瞬间拉到第一张
        } else {
            //  不大于正常滚动
        }

        点击上一张
        index--
        if (index === -1) {
            //  因为第一张和第六张相同,瞬间拉到最后一张,再滚动
        } else {
            //  正常滚动
        }

2、要一个数的 十位数数字
Math.trunc(value / 10)
要一个数的 个位数数字
value % 10

3、数组转字符串
array.join('')

4、截取字符串
string.slice(0)

5、字符串转数组
str.split( )

二、修改 input 编辑问题

1、disabled 属性规定应该禁用 input 元素,被禁用的 input 元素,不可编辑,不可复制,不可选择,不能接收焦点,后台也不会接收到传值。设置后文字的颜色会变成灰色。disabled 属性无法与 <input type="hidden"> 一起使用
ele.disabled = true;  禁用
ele.disabled = false;  关闭
2、readonly 属性规定输入字段为只读可复制,但是,用户可以使用Tab键切换到该字段,可选择,可以接收焦点,还可以选中或拷贝其文本。后台会接收到传值. readonly 属性可以防止用户对值进行修改。

readonly 属性可与 <input type="text"> 或 <input type="password"> 配合使用。
示例:<input type="text" readonly="readonly">

ele.readOnly = true;  禁用
ele.readOnly = false;  关闭
3、readonly unselectable="on"该属性跟 disable 类似,input 元素,不可编辑,不可复制,不可选择,不能接收焦点,设置后文字的颜色也会变成灰色,但是后台可以接收到传值。
<input type="text"  readonly unselectable="on" >

三、 一个大值 % 某个长度 或者 一个小值 % 某个长度 都不可能超过这个长度

         5 % 9 = 5
         15 % 9 = 6

四、限制一个数额最大值

            let a = 6;
            let b = 5;
            a = Math.max(a, b) a = 6
            a = Math.min(a, b) a = 6   

五、

2 < 100 < 1
是第一个数对后面所有数的判断
2 < 100 ? yes
2 < 1 ? no
两个条件满足才通过

五、限制最大边界值

        let a = 2;
        let b = 3;

        a = Math.max(a, b); // a = 3
        a = Math.min(a, b); // a = 3

        let a = 3;
        let b = 2;

        a = Math.max(a, b); // a = 3
        a = Math.min(a, b); // a = 3
上一篇 下一篇

猜你喜欢

热点阅读