ashley8140

ashley8140 查看完整档案

武汉编辑武汉科技大学  |  自动化 编辑武汉  |  前端开发 编辑 github.com/ashley8140 编辑
编辑

写代码挺好玩的

个人动态

ashley8140 发布了文章 · 2019-02-21

五分钟用vue实现一个五星打分效果

实现一个像这样的五星打分
图片描述

<template>
    <div> 
        <div class="mask">
            <div class="pop"></div>
            <div class="box center_box">
                <p class="center title">评价</p>
                <div style="margin: 23px 0 30px;">
                    <span v-for="(item, index) in star" :key=index class="s" :class="{'active':index <= s_l}" @click="getStar(index)"></span>
                    <span class="s5 fr">{{score}}分</span>
                </div>
                <textarea placeholder="请输入对此服务的评价" v-model="content"></textarea>
            </div>
        </div>
    </div>
</template>
    export default {
        data() {
            return {
                score: 0,
                content: '',
                star: [0,1,2,3,4],
                s_l: -1,
                old_index: null,
            }
        },
        computed: {
            ...mapState(['userInfo'])
        },
        methods: {
            getStar(index)  {
                if (this.old_index == index) {
                    this.s_l = index - 1;
                    this.score--;
                    this.old_index--;
                    return
                }
                this.s_l = index;
                this.score = index+1;
                this.old_index = index;
            }
        }
      }
<style lang='scss' scoped>
    .fr {
        float: left;
     }
     .center {
         text-align: center;
     }
    .center_box {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
    }
    .mask {
        .pop {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: #000;
            opacity: 0.3;
        }

        .box {
            color: #333;
            background: #fff;
            padding: 27px 70px;
            border-radius: 20px;

            .title {
                font-size: 24px;
            }

            .s {
            
                display: inline-block;
                width: 35px;
                height: 35px;
                margin-right: 10px;
                background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAiCAMAAAAAh4u3AAAAk1BMVEUAAAAcHBwyMjIyMjIyMjIqKiozMzMzMzMyMjIyMjIxMTEzMzMyMjIyMjIyMjIyMjIxMTExMTEyMjIyMjIyMjIyMjIyMjIwMDAwMDAyMjIyMjIyMjIwMDAxMTEwMDAyMjIyMjIxMTExMTExMTEyMjIvLy8zMzMyMjIyMjIxMTEyMjIxMTEtLS0yMjIzMzMyMjIzMzO5DYebAAAAMHRSTlMABOvcRAro2J9eFOLMr5ZOPjf1v7akcyIQiINqMSkZxql4Y1QtJh6akH5XUxzu0qiSBX7YAAABLUlEQVQ4y42TB5KDMAxFbUNsOpjeW0L6lvufboHsboJtTDTDCMMbSXx9ABsJ0SDYiiCO8i3GU6CBjA1Ii8erkzNzldKUT3U5zXPpMqbGyZQoTiWQEz/yOZQ03P2+g2G7A5sBNaKC7bgqVkz/y6W9Ywck5IupjuX7mNg9BIPiFDevgitD1tWeeOMeUnnfgzkC50a6KordKWXKYZ1xkfu40dHq5+rPAuoatTeT50HFtYg5ovL1mH+JoOiy1ANXokLMAjOBsQuN9bYl6Kazvv3gocZjn3zzkFWym/R5KGTVGxQeOhWstjYP9ZH4F6B5QExL02eBEpOBPum0ckvJ1CqhhY2yyWXmsIR8CO4hcf8MenfQKJJ9XRoaGR3uXj1cBs3NZtRsfe3I+i1qa/B+/AC1NQ9C0gGBsAAAAABJRU5ErkJggg==') no-repeat center center;
                background-size: cover;
                cursor: pointer;
                &.active {
                    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAiCAMAAADiW5DOAAAAgVBMVEUAAAD/Sy3/Sy3/Sy3/OiP/TC3/Si3/TCz/SCz/Sy3/Sy3/Syz/SSj/RiX/Sy3/Sy3/Sy3/Sy3/Sy7/Sy3/Sy3/Syz/Si3/Siv/Sin/SSv/OR3/Sy3/Sy3/Sy7/Sy3/Sy3/Syz/Sy3/Syz/Syz/Sy7/Sy3/Siz/TC7/TCz/QCb/TC45n2HWAAAAKnRSTlMA+ee/C/SiijTfzV4bD+zU0ci4pZSDTSwnIQf8rZeOd2dkUlCcmW5UQBQ7h2dZAAAA6klEQVQ4y42T2RKCMAxFUypQFnFhE0RUcM3/f6DAoEgM1PPWmdNOe3sDlKvxAA0VorHUOGtEPM4rChucecfClnpO8UXnbDTHdJynlRP2mCnw7CR+MBRnLGyBX4h4AZS7g4QgSvz3/sq2tq6JLCJwpO03weqQsNI6MShTo2xzAGXMKlbefcD0lYYOLOWkchvyc5EngoGMv7gzytpGAvP9GZsyKTaJkq1awTghcQ6Mc2FaSimIw8W4Ik7AOPvxu1LkSLiJMENPZWlS9lUof58l4me/zL3OkiMnbMu0G43JnoboCbem4xa5HvzNC59iXI+UN5RRAAAAAElFTkSuQmCC');
                }
            }
            .s5 {
                font-size: 24px;
                
            }
            textarea {
                width: 370px;
                height: 140px;
                padding: 19px;
                border: 1px solid #cccccc;
                border-radius: 20px;
            }
        }
    }

</style>
查看原文

赞 0 收藏 0 评论 0

ashley8140 发布了文章 · 2019-01-15

最长回文子串

给定一个字符串 s,找到 s 中最长的回文子串。你可以假设 s 的最大长度为 1000。

示例 1:

输入: "babad"
输出: "bab"
注意: "aba" 也是一个有效答案。

示例 2:

输入: "cbbd"
输出: "bb"

用的Manacher算法

var longestPalindrome = function(s) {
    if (s.length == 0) return ""
    var str="$"
    var j = 1,mx = 0,id = 0, len = [];
    var max=0, index;
    for(var i = 0, l = s.length; i < l; i++) {
        str += "#";
        str += s[i]
    }
    str += "#"
    for (var i = 1, l = str.length; i < l; i++) {
        if(i < mx) {
            len[i] = Math.min(len[2*id - i], mx - i)
        } else {
            len[i] = 1;
        }
        while(str[len[i] + i] == str[i - len[i]]) {
            len[i]++;
        }
        if (len[i] + i > mx) {
            id = i;
            mx = len[i] + i;
            if (len[i] > max) {
                max = len[i];
                index = i;
            }
        }
    }
    return s.substr((index - max) / 2, max - 1)
};
查看原文

赞 0 收藏 0 评论 0

ashley8140 发布了文章 · 2018-12-28

实现marquee滚动效果

背景:marquee标签在有些浏览器兼容性不好,就手动用原生js实现了下。
横着滚动效果链接描述

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1.0, maximum-scale=1, user-scalable=no" />
    <meta content="telephone=no" name="format-detection" />
    <title>传奇无双1215</title>
    <meta name="keywords" content="传奇无双1215">
    <meta name="description" content="传奇无双1215">
    <script>
        (function (_D) {
            var _self = {};
            _self.resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
            _self.Html = _D.getElementsByTagName("html")[0];
            _self.widthProportion = function () {
                var p = Number((_D.body && _D.body.clientWidth || _self.Html.offsetWidth) / 720).toFixed(3);
                return p > 1.067 ? 1.067 : p < 0.444 ? 0.444 : p;
            };
            _self.changePage = function () {
                _self.Html.setAttribute("style", "font-size:" + _self.widthProportion() * 100 + "px");
            };
            _self.changePage();
            if (!document.addEventListener) return;
            window.addEventListener(_self.resizeEvt, _self.changePage, false);
            document.addEventListener('DOMContentLoaded', _self.changePage, false);
        })(document);
    </script>
    <style>
        body {
            overflow-x: hidden;
            font: .36rem/1.5 Arial, "Microsoft YaHei", SimSun;
            margin: 0;
            padding: 0;
            font-size: .22rem
        }

        body,
        p {
            margin: 0;
            padding: 0;
        }

        em {
            font-style: normal;
            font-weight: 400
        }

        img {
            font-size: 0;
            line-height: 0;
            border: 0;
            display: block;
            width: 100%;
        }


        .box {
            margin: 0 auto;
            max-width: 720px;
            width: 100%;
            background: #260b0c;
        }

        .pr {
            position: relative
        }

        .marquee {
            overflow: hidden;
            position: absolute;
            bottom: 11.5%;
            left: 0;
            width: 84%;
            margin: 0 8%;
            height: .4rem
        }

        #m em {
            float: right;
            color: #fff
        }

        #m {
            position: absolute;
            height: 0.4rem;
            display: block;
            line-height: .35rem
        }

        #m p {
            float: left;
            line-height: .4rem;
            margin-right: 40px;
            color: #d4be8d
        }

        #m span {
            margin-right: 30px;
        }
    </style>
</head>

<body>
    <div class="box">

        <div class="pr">
            <img class="img" data-original="images/02.jpg" />
            <div class="marquee">
                <div id="m">
                    <p>
                        <em>888新快币</em> <span>xk12*****8抽中</span></p>
                    <p>
                        <em>88dfdfdfd8新快币</em> <span>xk1dfdfd2*****8抽中</span></p>
                    <p>
                        <em>888新快币</em> <span>xk12*****8抽中</span></p>
                    <p>
                        <em>888新快币</em> <span>xk12*****8抽中</span></p>
                    <p>
                        <em>888新快币</em> <span>xk12*****8抽中</span></p>
                    <p>
                        <em>888新快币</em> <span>xk12*****8抽中</span></p>

                </div>
            </div>
        </div>
    </div>

    <script>
        var timer;
        var m = document.getElementById("m")
        var init_left = document.querySelector(".box").clientWidth * 0.8;
        var m_left = init_left;
        var m_width = 0;

        function setTimer() {
            timer = setInterval(function () {
                m_left -= 1;
                if (m_left <= -m_width + 20) {
                    m_left = init_left;
                }

                m.style.left = m_left + 'px'
            }, 10)
        }

        function marquee() {
            var p = m.querySelectorAll("p");
            for (var i = 0, l = p.length; i < l; i++) {
                m_width += p[i].clientWidth + 48
            }
            console.log(m_width)
            m.style.width = m_width + 'px'
            m.style.left = init_left + 'px'
            setTimer();
            m.addEventListener("mouseover", function () {
                clearInterval(timer);
            })
            m.addEventListener("mouseout", function () {
                setTimer();
            })
        }
        marquee()
    </script>
</body>

</html>

竖着滚动效果链接描述

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1.0, maximum-scale=1, user-scalable=no" />
    <meta content="telephone=no" name="format-detection" />
    <title>万圣节1101</title>
    <meta name="keywords" content="万圣节1101">
    <meta name="description" content="万圣节1101">
    <script>
        (function (_D) {
            var _self = {};
            _self.resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
            _self.Html = _D.getElementsByTagName("html")[0];
            _self.widthProportion = function () {
                var p = Number((_D.body && _D.body.clientWidth || _self.Html.offsetWidth) / 720).toFixed(3);
                return p > 1.067 ? 1.067 : p < 0.444 ? 0.444 : p;
            };
            _self.changePage = function () {
                _self.Html.setAttribute("style", "font-size:" + _self.widthProportion() * 100 + "px");
            };
            _self.changePage();
            if (!document.addEventListener) return;
            window.addEventListener(_self.resizeEvt, _self.changePage, false);
            document.addEventListener('DOMContentLoaded', _self.changePage, false);
        })(document);
    </script>
    <style>
        body {
            margin: 0;
            padding: 0
        }


        em {
            font-style: normal;
            font-weight: 400
        }

        .pr {
            position: relative
        }

        img {
            font-size: 0;
            line-height: 0;
            border: 0;
            width: 100%;
        }

        .box {
            width: 100%;
            max-width: 720px;
            background: #260b0c
        }


        .marquee {
            overflow: hidden;
            position: absolute;
            bottom: 17%;
            left: 0;
            width: 54%;
            margin: 0 23%;
            height: 1.5rem
        }

        #m,
        #m p {
            font-size: .22rem
        }


        #m em {
            float: right
        }

        #m {
            position: absolute;
            top: 1.6rem;
            width: 100%
        }

        #m p {
            color: #c1d1ff
        }

        #m em {
            color: #ffab2a
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="pr">
            <img data-original="images/04.jpg" />
            <div class="marquee">
                <div id="m">
                    <p>
                        <em>888新快币</em>xk12*****8抽中</p>
                    <p>
                        <em>488新快币</em>xk12*****8抽中</p>
                    <p>
                        <em>188新快币</em>xk12*****8抽中</p>
                    <p>
                        <em>88新快币</em>xk12*****8抽中</p>
                </div>
            </div>
        </div>
    </div>

    <script>
        //marquee
        var timer, m_height;
        var m = document.getElementById("m")
        m_height = m.clientHeight;
        var marquee_height = document.querySelector(".marquee").clientHeight;
        var m_top = marquee_height;

        function setTimer() {
            timer = setInterval(function () {
                m_top -= 1;
                if (m_top <= -m_height) {
                    m_top = marquee_height;
                }
                m.style.top = m_top + 'px';
            }, 10)
        }

        function marquee() {
            setTimer();
            m.addEventListener("mouseover", function () {
                clearInterval(timer);
            })
            m.addEventListener("mouseout", function () {
                setTimer();
            })
        }
        marquee()
    </script>
</body>

</html>
查看原文

赞 2 收藏 2 评论 0

ashley8140 发布了文章 · 2018-12-26

3. 无重复字符的最长子串

题目:给定一个字符串,请你找出其中不含有重复字符的 最长子串 的长度。

示例 1:

输入: "abcabcbb"
输出: 3
解释: 因为无重复字符的最长子串是 "abc",所以其长度为 3。

示例 2:

输入: "bbbbb"
输出: 1
解释: 因为无重复字符的最长子串是 "b",所以其长度为 1。

示例 3:

输入: "pwwkew"
输出: 3
解释: 因为无重复字符的最长子串是 "wke",所以其长度为 3。

 请注意,你的答案必须是 子串 的长度,"pwke" 是一个子序列,不是子串。
 

解答:
1.暴力破解

var lengthOfLongestSubstring = function(s) {
    var l = s.length;
    var re = 0;
    for (var i= 0; i < l; i++) { //1
        for(var j = i + 1; j <= l; j++){ //2
           if(check(i, j)) {
               re = Math.max(re, j - i)
           } else {
               break
           }
        }
    }
    function check(start, end) {
        var a  = [];
        for (var k = start; k < end; k++) { //3
            if (a.indexOf(s[k]) !== -1) {
                return false
            } else {
                a.push(s[k])
            }
        }
        return true;
    }
    return re
};

上来就是一顿for循环操作,这样暴力写我们的leetcode肯定是不会给过的,因为遇到超级长的字符串测试用例,执行时间会超出时间限制,上面代码的优化空间很大。
理一下逻辑,我们每次在2里面检测出有重复的字符时,记录这个重复字符前一次出现的位置index,然后中断这次循环,开始下一次1的循环,并且i的位置应该为index+1。
图片描述
比如在i=0的时,在2循环里j=4时就会出现重复的字符d,字符d前一次出现的位置是1,这时最长字符串长度是4,并且被记录,这时应该开始1循环的下一次循环,并且是从i=2开始。
3循环和2循环其实是不必要的,我们创建一个动态的字符串,把每次循环到的字符加进去并实时记录它的长度,遇到重复的字符串就砍掉字符第一次出现跟它之前的字符串,比如上图,i循环到4时,出现重复字符d,d在之前出现的位置是1,我们应该砍掉动态字符串位置1跟它之前的字符串,来保证它是无重复的字符串。代码如下

var lengthOfLongestSubstring = function(s) {
    var l = s.length;
    var re = 0;
    var a = '', index;
    for (var i = 0; i < l; i++) {
        index = a.indexOf(s[i])
        if (index !== -1) {
            a = a.slice(index + 1)
        }
        a+=s[i]
        re = Math.max(re, a.length);
        
    }

    return re
};

图片描述
一下从矮穷挫变成高富帅,速度杠杠哒!

查看原文

赞 1 收藏 0 评论 0

ashley8140 发布了文章 · 2018-12-24

2.两数相加

题目描述:给出两个 非空 的链表用来表示两个非负的整数。其中,它们各自的位数是按照 逆序 的方式存储的,并且它们的每个节点只能存储 一位 数字。
如果,我们将这两个数相加起来,则会返回一个新的链表来表示它们的和。
您可以假设除了数字 0 之外,这两个数都不会以 0 开头。
示例:
输入:(2 -> 4 -> 3) + (5 -> 6 -> 4)
输出:7 -> 0 -> 8
原因:342 + 465 = 807

题外话: 在leetcode上Listnode构造函数和测试用例的Listnode单链表都是生成好的,我们在本地node环境怎么生成自己的Listnode单链表呢,可以用如下方法.

       function ListNode(val) {
            this.val = val;
            this.next = null;
        }
        
        function getRe(i) {
            var listNode = new ListNode(c[i]);
            if (c[i + 1] || c[i + 1] === 0) {
                listNode.next = getRe(i + 1)
            }
            return listNode
        }
        var c = [1, 2, 3]
        
        var list1 = getRe(0)
        c = [4, 5, 6,7]
        var list2 = getRe(0)

这样就生成了两个Listnode单链表。

回到本题

/**
 * Definition for singly-linked list.
 * function ListNode(val) {
 *     this.val = val;
 *     this.next = null;
 * }
 */
/**
 * @param {ListNode} l1
 * @param {ListNode} l2
 * @return {ListNode}
 */

var addTwoNumbers = function(l1, l2) {
    var v1, v2, sum;
    var cur1 = l1;
    var cur2 = l2;
    var j = 0;
    var c = [];
    //把两个链表之和存入一个数组,j是进位数
    while (cur1 != null || cur2 != null) {
        v1 = (cur1 != null) ? cur1.val : 0;
        v2 = (cur2 != null) ? cur2.val : 0;
        sum = v1 + v2 + j;
        j = parseInt(sum / 10);
        c.push(sum % 10);
        if (cur1 != null){
            cur1 = cur1.next;
        }
        if (cur2 != null){
            cur2 = cur2.next;
        }
    }
    //如果有进位,推入数组
    if (j > 0) {
        c.push(j);
    }
    function getRe(i){
        var listNode = new ListNode(c[i]);
        if(c[i+1] || c[i+1] === 0) {
            listNode.next = getRe(i+1)
        }
        return listNode
    }
    return getRe(0);
};
查看原文

赞 2 收藏 2 评论 0

ashley8140 发布了文章 · 2018-12-22

1.两数之和

题目:给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标。

你可以假设每种输入只会对应一个答案。但是,你不能重复利用这个数组中同样的元素。
示例:
给定 nums = [2, 7, 11, 15], target = 9
因为 nums[0] + nums[1] = 2 + 7 = 9
所以返回 [0, 1]

const nums = [1,2,1,3,6,3]

const towSum1 = (nums, target) => {
    let j;
    for(let i = 0, l = nums.length - 1; i < l; i++){
        j = nums.indexOf(target-nums[i], i+1)
        if (j !== -1) {
            return [i, j]
        }
    }
}

console.time('1')
const re1 = towSum1(nums, 6);
console.timeEnd('1')
console.log(re1)


const twoSum2 = (nums, target) => {
    for(let i = 0, l = nums.length-1; i < l; i++) {
        for(let j = i+1; j < l+1;j++){
            if(nums[i] + nums[j] === target) {
                return [i ,j]
            }
        }
    }
};

console.time('2')
const re2 = twoSum2(nums, 6)
console.timeEnd('2')
console.log(re2)

在leetcode上测试方法2比方法1要快,本地node测试基本方法1用的时间的时间是方法2的两倍.

查看原文

赞 0 收藏 0 评论 0

ashley8140 发布了文章 · 2018-12-13

实现菜单下拉伸展折叠效果demo

背景:帮后台做的一个下拉效果,原来的在手机上点击反应很慢,而且没必要加载那么多js,索性就用原生js实现了。

这是折叠的状态。

图片描述

这是展开状态,中间有个拉开过度的效果,同一时间只能有一个展开。

图片描述

点击查看效果
html代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        @charset "utf-8";

        body {
            margin: 0;
            padding: 0
        }

        body {
            font-family: "PingFang-SC-Bold", "Helvetica Neue", Helvetica, Arial, "PingFang SC Regular", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
            overflow-x: hidden;
            line-height: 1.5;
            font-size: 15px;
            color: #333;
        }

        img {
            font-size: 0;
            line-height: 0;
            border: 0;
            vertical-align: middle
        }

        * {
            outline: 0;
            -webkit-tap-highlight-color: transparent;
            -webkit-tap-highlight-color: transparent;
            box-sizing: border-box;
        }

        .head {
            color: #333;
            background-color: #f5f5f5;
            border-color: #ddd;
            padding: 10px 15px;
            border-bottom: 0;
            cursor: pointer;
        }

        .head img {
            float: right;
            width: 14px;
            margin-top: 6px;
        }

        .item {
            margin-bottom: 0;
            border-radius: 4px;
            background-color: #fff;
            border: 1px solid transparent;
            -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
            box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
            border-color: #ddd;
        }

        .item+.item {
            margin-top: 5px;
        }

        .ctx .p1 {
            font-weight: 700;
        }

        .hide {
            display: none;
        }

        .content {
            overflow: hidden;
            padding: 15px;
            border-top: 1px solid #ddd;
            font-size: 12px;
        }

        .ctx {
            overflow: hidden;
            height: 0;
            transition: height 0.3s ease;
            -webkit-transition: height 0.3s ease;
        }
    </style>
</head>

<body>
    <div class="nav">
        <div class="item">
            <div class="head">积分 <img data-original="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAOCAMAAADt5EdyAAAAaVBMVEUAAACZmZmhoaGZmZmZmZmZmZmVlZWZmZmZmZmZmZmYmJiYmJiYmJiWlpaYmJiZmZmZmZmZmZmYmJiZmZmZmZmZmZmYmJiZmZmZmZmZmZmYmJiYmJiYmJiYmJiYmJiZmZmZmZmZmZmZmZmphJNhAAAAInRSTlMA9wb63csR7ea0NCshGgryzcbDvayZkIV6YVhPRj6komtpKIkVQgAAAINJREFUGNNtydcWgyAQRdFBUMAae0+5//+RIS6jYzkvXGYT6y0+dFsPoL+DQcJCDlcYJTrqIMczTAKte1qI6QizQLOMBmLmEGao11kjCxlovLbPEzr670ij8jbxKpiVYgPrYCcLEy+gUDpgpSVUQpQoFCnRkfIfPeAHdC5wV8oZMPKLL5vkB7iLrZPSAAAAAElFTkSuQmCC"
                    alt=""> </div>
            <div class="ctx showonce" num=0 open=1>
                <div class="content">
                    <p class="p1">一、账号被锁定</p>
                    <p class="p2">在平台发布违法信息、恶意攻击中伤他人、传播谣言、主播直播违规都将可能会被封禁账号</p>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="head">金币 <img data-original="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAOCAMAAADt5EdyAAAAdVBMVEUAAACZmZmZmZmZmZmZmZmZmZmZmZmZmZmYmJiYmJiYmJiUlJSampqWlpaUlJSZmZmZmZmZmZmYmJiZmZmZmZmYmJiampqZmZmYmJiXl5eYmJiYmJiYmJiYmJiXl5eZmZmZmZmYmJiXl5eVlZWZmZmVlZWZmZmeopVCAAAAJnRSTlMA+uPL9PDrxKw0JRIMCAT42r+0o5mQhHppYVhPPiwYz828R0YeHdDVMpMAAACDSURBVBjTbclXDoMwAATRtU3vvUP63v+IiUgxwbyvkQa5CmEKlQvFs7kixROWjG60Hy6zBXhI5jG24gvlHS+BZLFdSUEZYBU49BI9PDozPmaHJb5K2j5+fJsV3qp1aJPFeo2a1oQ/t5QNgIbpFTujYIuWYoRhEPQoBhzoSfY41FkdtCdWvgi2uS1VaQAAAABJRU5ErkJggg=="
                    alt=""></div>
            <div class="ctx hide" num=1 open=0>
                <div class="content">
                    <p class="p1">一、账号被锁定</p>
                    <p class="p2">在平台发布违法信息、恶意攻击中伤他人、传播谣言、主播直播违规都将可能会被封禁账号</p>
                    <p class="p2">在平台发布违法信息、恶意攻击中伤他人、传播谣言、主播直播违规都将可能会被封禁账号</p>
                    <p class="p2">在平台发布违法信息、恶意攻击中伤他人、传播谣言、主播直播违规都将可能会被封禁账号</p>
                    <p class="p2">在平台发布违法信息、恶意攻击中伤他人、传播谣言、主播直播违规都将可能会被封禁账号</p>
                    <p class="p2">在平台发布违法信息、恶意攻击中伤他人、传播谣言、主播直播违规都将可能会被封禁账号</p>
                    <p class="p2">在平台发布违法信息、恶意攻击中伤他人、传播谣言、主播直播违规都将可能会被封禁账号</p>
                    <p class="p2">在平台发布违法信息、恶意攻击中伤他人、传播谣言、主播直播违规都将可能会被封禁账号</p>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="head">用户账号 <img data-original="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAOCAMAAADt5EdyAAAAdVBMVEUAAACZmZmZmZmZmZmZmZmZmZmZmZmZmZmYmJiYmJiYmJiUlJSampqWlpaUlJSZmZmZmZmZmZmYmJiZmZmZmZmYmJiampqZmZmYmJiXl5eYmJiYmJiYmJiYmJiXl5eZmZmZmZmYmJiXl5eVlZWZmZmVlZWZmZmeopVCAAAAJnRSTlMA+uPL9PDrxKw0JRIMCAT42r+0o5mQhHppYVhPPiwYz828R0YeHdDVMpMAAACDSURBVBjTbclXDoMwAATRtU3vvUP63v+IiUgxwbyvkQa5CmEKlQvFs7kixROWjG60Hy6zBXhI5jG24gvlHS+BZLFdSUEZYBU49BI9PDozPmaHJb5K2j5+fJsV3qp1aJPFeo2a1oQ/t5QNgIbpFTujYIuWYoRhEPQoBhzoSfY41FkdtCdWvgi2uS1VaQAAAABJRU5ErkJggg=="
                    alt=""></div>
            <div class="ctx hide" num=2 open=0>
                <div class="content">
                    <p class="p1">一、账号被锁定</p>
                    <p class="p2">在平台发布违法信息、恶意攻击中伤他人、传播谣言、主播直播违规都将可能会被封禁账号</p>
                    <p class="p2">在平台发布违法信息、恶意攻击中伤他人、传播谣言、主播直播违规都将可能会被封禁账号</p>
                    <p class="p2">在平台发布违法信息、恶意攻击中伤他人、传播谣言、主播直播违规都将可能会被封禁账号</p>
                    <p class="p2">在平台发布违法信息、恶意攻击中伤他人、传播谣言、主播直播违规都将可能会被封禁账号</p>
                </div>

            </div>
        </div>
        <div class="item">
            <div class="head">礼物 <img data-original="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAOCAMAAADt5EdyAAAAdVBMVEUAAACZmZmZmZmZmZmZmZmZmZmZmZmZmZmYmJiYmJiYmJiUlJSampqWlpaUlJSZmZmZmZmZmZmYmJiZmZmZmZmYmJiampqZmZmYmJiXl5eYmJiYmJiYmJiYmJiXl5eZmZmZmZmYmJiXl5eVlZWZmZmVlZWZmZmeopVCAAAAJnRSTlMA+uPL9PDrxKw0JRIMCAT42r+0o5mQhHppYVhPPiwYz828R0YeHdDVMpMAAACDSURBVBjTbclXDoMwAATRtU3vvUP63v+IiUgxwbyvkQa5CmEKlQvFs7kixROWjG60Hy6zBXhI5jG24gvlHS+BZLFdSUEZYBU49BI9PDozPmaHJb5K2j5+fJsV3qp1aJPFeo2a1oQ/t5QNgIbpFTujYIuWYoRhEPQoBhzoSfY41FkdtCdWvgi2uS1VaQAAAABJRU5ErkJggg=="
                    alt=""></div>
            <div class="ctx hide" num=3 open=0>
                <div class="content">
                    <p class="p1">一、账号被锁定</p>
                    <p class="p2">在平台发布违法信息、恶意攻击中伤他人、传播谣言、主播直播违规都将可能会被封禁账号</p>
                    <p class="p2">在平台发布违法信息、恶意攻击中伤他人、传播谣言、主播直播违规都将可能会被封禁账号</p>
                    <p class="p2">在平台发布违法信息、恶意攻击中伤他人、传播谣言、主播直播违规都将可能会被封禁账号</p>
                </div>

            </div>
        </div>
    </div>
    <script>
        var head = document.querySelectorAll('.head');
        var ctx = document.querySelectorAll('.ctx');
        var h = 0,
            c_h, i = 0,
            index, classNames,
            num = 0;
        var transitions = {
            'transition': 'transitionend',
            'WebkitTransition': 'webkitTransitionEnd'
        }
        //给有高度的元素初始化height;
        var show = document.querySelector('.showonce');
        var show_h = show.querySelector('.content').clientHeight
        show.style.height = show_h + 'px';
        // 给每个ctx监听动画结束事件
        for (var key in transitions) {
            for (var i = 0, l = ctx.length; i < l; i++) {
                ctx[i].addEventListener(transitions[key], function () {
                    if (this.getAttribute('open') == '0') {
                        this.setAttribute('class', 'ctx hide');
                    }
                })
            }
        }

        for (var i = 0; i < head.length; i++) {
            head[i].addEventListener('click', function () {
                index = this.nextElementSibling.getAttribute('num');
                for (var j = 0, l = ctx.length; j < l; j++) {
                    if ((ctx[j].getAttribute('num') == index) && (ctx[j].getAttribute('class').indexOf('hide') !=
                            -1)) {
                        ctx[j].setAttribute("open", "1");
                        ctx[j].setAttribute('class', 'ctx');
                        c_h = ctx[j].querySelector('.content').clientHeight;
                        this.querySelector('img').setAttribute('src',
                            'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAOCAMAAADt5EdyAAAAaVBMVEUAAACZmZmhoaGZmZmZmZmZmZmVlZWZmZmZmZmZmZmYmJiYmJiYmJiWlpaYmJiZmZmZmZmZmZmYmJiZmZmZmZmZmZmYmJiZmZmZmZmZmZmYmJiYmJiYmJiYmJiYmJiZmZmZmZmZmZmZmZmphJNhAAAAInRSTlMA9wb63csR7ea0NCshGgryzcbDvayZkIV6YVhPRj6komtpKIkVQgAAAINJREFUGNNtydcWgyAQRdFBUMAae0+5//+RIS6jYzkvXGYT6y0+dFsPoL+DQcJCDlcYJTrqIMczTAKte1qI6QizQLOMBmLmEGao11kjCxlovLbPEzr670ij8jbxKpiVYgPrYCcLEy+gUDpgpSVUQpQoFCnRkfIfPeAHdC5wV8oZMPKLL5vkB7iLrZPSAAAAAElFTkSuQmCC'
                        )
                        ctx[j].style.height = c_h + 'px';
                    } else {
                        ctx[j].setAttribute("open", "0")
                        ctx[j].previousElementSibling.querySelector("img").setAttribute('src',
                            'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAOCAMAAADt5EdyAAAAdVBMVEUAAACZmZmZmZmZmZmZmZmZmZmZmZmZmZmYmJiYmJiYmJiUlJSampqWlpaUlJSZmZmZmZmZmZmYmJiZmZmZmZmYmJiampqZmZmYmJiXl5eYmJiYmJiYmJiYmJiXl5eZmZmZmZmYmJiXl5eVlZWZmZmVlZWZmZmeopVCAAAAJnRSTlMA+uPL9PDrxKw0JRIMCAT42r+0o5mQhHppYVhPPiwYz828R0YeHdDVMpMAAACDSURBVBjTbclXDoMwAATRtU3vvUP63v+IiUgxwbyvkQa5CmEKlQvFs7kixROWjG60Hy6zBXhI5jG24gvlHS+BZLFdSUEZYBU49BI9PDozPmaHJb5K2j5+fJsV3qp1aJPFeo2a1oQ/t5QNgIbpFTujYIuWYoRhEPQoBhzoSfY41FkdtCdWvgi2uS1VaQAAAABJRU5ErkJggg=='
                        )
                        ctx[j].style.height = 0;
                    }
                }
            })
        }
    </script>
</body>

</html>
查看原文

赞 2 收藏 2 评论 0

ashley8140 关注了标签 · 2018-01-12

vue.js

Reactive Components for Modern Web Interfaces.

Vue.js 是一个用于创建 web 交互界面的。其特点是

  • 简洁 HTML 模板 + JSON 数据,再创建一个 Vue 实例,就这么简单。
  • 数据驱动 自动追踪依赖的模板表达式和计算属性。
  • 组件化 用解耦、可复用的组件来构造界面。
  • 轻量 ~24kb min+gzip,无依赖。
  • 快速 精确有效的异步批量 DOM 更新。
  • 模块友好 通过 NPM 或 Bower 安装,无缝融入你的工作流。

官网:https://vuejs.org
GitHub:https://github.com/vuejs/vue

关注 97472

ashley8140 关注了标签 · 2018-01-12

正则表达式

正则表达式(英语:Regular Expression、regex或regexp,缩写为RE),也译为正规表示法、常规表示法,在计算机科学中,是指一个用来描述或者匹配一系列符合某个句法规则的字符串的单个字符串。在很多文本编辑器或其他工具里,正则表达式通常被用来检索和/或替换那些符合某个模式的文本内容。许多程序设计语言都支持利用正则表达式进行字符串操作。例如,在Perl中就内建了一个功能强大的正则表达式引擎。正则表达式这个概念最初是由Unix中的工具软件(例如sed和grep)普及开的。正则表达式通常缩写成“regex”,单数有regexp、regex,复数有regexps、regexes、regexen。

关注 3377

ashley8140 关注了标签 · 2018-01-12

css

层叠样式表(英语:Cascading Style Sheets,简写CSS),又称串样式列表,由W3C定义和维护的标准,一种用来为结构化文档(如HTML文档或XML应用)添加样式(字体、间距和颜色等)的计算机语言。

关注 61533

认证与成就

  • 获得 7 次点赞
  • 获得 2 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 2 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2017-08-22
个人主页被 198 人浏览