IT修真院·坑乎 | Java(后端),CSS(前端),JavaScript(前端),PM(产品经理),UI(交互设计),QA(测试),Android(安卓APP),iOS(苹果APP),OP(运维),Python(后端)日常在线问答学习平台

任务一为什么一进去就有不一样的颜色

0

1

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

    //将随机出来的盒子，赋值color函数出来的随机颜色
    while (one == two || two == three || three == one) {
        var one = boxGet[first].style.backgroundColor = color();
        var two = boxGet[second].style.backgroundColor = color();
        var three = boxGet[third].style.backgroundColor = color();
    }
    //return one, two ,three 
};
//console.log(box())  


//声明一个全局变量，进行定时器之间的参数传输
var time

function start() {
    clearInterval(time); //点击按钮之前清除定时器，避免多次点击出现堆积
    time = setInterval(function () {
        for (var j = 0; j < 9; j++) {
            boxGet[j].style.backgroundColor = "orange"
        };

        box() //在定时器内执行box函数，进行随机盒子+随机颜色工作

    }, 1000) //延时1秒
};


function end() {
    clearInterval(time) //点击end关闭后，定时器被清除，停止工作
    for (var j = 0; j < 9; j++) {
        boxGet[j].style.backgroundColor = "orange"
    };
};

vue如何做出美观实用的表单验证

1

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

用的element的表单

ng-repeat问题

0

1

其他

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

以上

闭包到底如何触发

0

1

事件

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

问题已解决

如何在不同的按钮中使用同一个点击事件并且能实现不同的效果

0

1

js基础

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

html:
                <button class="btn btn-warning" ng-click="online(x=1)">立即上线</button>
                <button class="btn btn-info" ng-click="online(x=2)">保存为草稿</button>
js:
$scope.online = function (x) {
        console.log(x);
        var Status;
        if(x == 1){
            Status = 2;
        }else{
            Status = 1;
        }
$http({
            method: "post",
            url: "/carrots-admin-ajax/a/u/article",
            params: {
                title: $scope.AddTitle,
                type: $scope.type,
                status: Status,
                industry: $scope.industry,
                content: editor.txt.text(),
                img:$scope.imgUrl,
                url: $scope.Addurl
            }
        }).then(function (res) {
            console.log(res);
            if (res.data.code == 0) {
                $state.go('backstagpe.list');
            }else if(res.data.code !=0){
                alert(res.data.message);
            }
        })

ts报错TS2307: Cannot find module 'vue'

0

1

组件

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

如何使用正则表达式验证密码是否有，字母，数字，符号，至少两种以上组成？

0

1

正则表达式

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<script>
		var app = angular.module('myApp', []);
		app.controller('myCtrl', function($scope) {
			$scope.to = function checkNumber() {
				var a = $scope.firstName;
				console.log(a);
				var reg = /^[0-9]+$/;
				var res = /^[a-zA-Z]+$/;
				var ret = /^[`~!@#$%^&*()_+<>?？，；【】、。:"{},.\/;'[\]]+$/;
				if (reg.test($scope.firstName) || res.test($scope.firstName )|| ret.test($scope.firstName)) {
					$scope.test="请输入数字，字母，字符两种组合以上";
				}else{
					$scope.test="输入正确";
				}
				
			};
  
		});
	</script>

手风琴的子元素

0

1

js基础

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<template>
    <div>
        <div class="management">
            <div class="management_top">萝卜多后台管理系统</div>
            <div class="management_bottom" v-for="(item,index) in menu" :key="item.name">
                <div class="m_b_line" v-show="item.show"></div>   
                <button :class="['m_b_menu',{'m_b_active':item.show}]" @click="menuShow(item,index)">
                    {{item.name}}
                    <div>
                        <div :class="[item.show ? 'm_b_pen3':'m_b_pen1']"></div>
                        <div :class="[item.show ? 'm_b_pen4':'m_b_pen2']"></div>
                    </div>
                </button>
                <button :class="['m_b_select',{'m_b_active':select.show}]" v-show="item.show" v-for="(select,index2) in item.content" @click="selectShow(select,index2)" :key="select.name">
                    {{select.name}}
                </button>
           </div>
        </div>
        <div class="account">
            <router-link to="/" replace>
                <button class="a_close"></button>
            </router-link>
            <div class="a_line"></div>
            <div class="a_font">admin</div>
            <div class="a_line"></div>
            <div class="a_font">管理员</div>
        </div>
        <div class="content">
            <router-view/>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            menu: [
                {name: '后台管理', content: [{name:'模块管理',show: false}, {name:'角色管理',show: false}, {name:'密码修改',show: false}, {name:'账户管理',show: false}], show: false},
                {name: '信息管理', content: [{name:'公司列表',show: false}, {name:'职位列表',show: false}], show: false},
                {name: '内容管理', content: [{name:'Artucle列表',show: false}], show: false}
            ]
        }
    },
    methods: {
        menuShow(item,index) {
            this.menu.forEach(i => {
                if (i.show !== this.menu[index].show) {
                    i.show = false;
                }
            })
            item.show = !item.show;
        },
        selectShow(select,index2) {
            let menuOne = this.menu[0].show,
                menuTwo = this.menu[1].show,
                menuThree = this.menu[2].show;
            if (menuOne == true) {
                for (let x = 0; x < 3; x++) {
                    this.menu[x].content.forEach(i => {
                        if(i.show !== this.menu[0].content[index2].show) {
                            i.show = false;
                        }
                    })
                }
                this.menu[0].content[index2].show = true;
            }
            else if (menuTwo == true) {
                for (let x = 0; x < 3; x++) {
                    this.menu[x].content.forEach(i => {
                        if(i.show !== this.menu[1].content[index2].show) {
                            i.show = false;
                        }
                    })
                }
                this.menu[1].content[index2].show = true;
            }
            else if (menuThree == true) {
                for (let x = 0; x < 3; x++) {
                    this.menu[x].content.forEach(i => {
                        if(i.show !== this.menu[2].content[index2].show) {
                            i.show = false;
                        }
                    })
                }
                this.menu[2].content[index2].show = true;
                this.$router.push('/backstage/artucle');
            }

        }
    }
}
</script>

<style scoped lang="scss">
.management {
    float: left;
    width: 250px;
    height: 100vh;
    background: #232a3a;
    .management_top {
        margin-bottom: 20px;
        box-sizing: border-box;
        border-bottom: 1px solid #4a5f6c;
        width: 100%;
        height: 50px;
        font-size: 18px;
        font-weight: 700;
        text-align: center;
        line-height: 49px;
        color: #ffffff;
  }
}

.management_bottom {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    width: 100%;
    min-height: 40px;
    color: #ffffff;
    .m_b_menu {
        display: flex;
        justify-content: space-between;
        padding: 0 45px 0 60px; 
        width: 100%;
        color: #ffffff;
        line-height: 40px;
        background: url(../assets/img/pen.png) 30px 13px/16px 16px no-repeat;
        cursor: pointer;
        .m_b_pen1 {
            width: 9px;
            height: 1.5px;
            background: #ffffff;
            transform: translatey(23px) rotate(45deg);
        }
        .m_b_pen2 {
            @extend .m_b_pen1;
            transform: translatey(16.2px) rotate(-45deg) ;
        }
        .m_b_pen3 {
            @extend .m_b_pen1;
            transform: translate(0, 21px) rotate(45deg);
        }
        .m_b_pen4 {
            @extend .m_b_pen1;
            transform: translate(5.5px, 20px) rotate(135deg);
        }
        &:hover {
            background-color: #7b7f89;
        }
    }
    .m_b_line {
        position: absolute;
        top: 0;
        left: 0;
        width: 2px;
        height: 40px;
        background: #ffffff;
    }
    .m_b_select {
        box-sizing: border-box;
        width: 100%;
        height: 40px;
        font-size: 14px;
        color: #ffffff;
        background: #232a3a;
        cursor: pointer;
        &:hover {
            background-color: #7b7f89;
        }
    }
}

.m_b_active {
    background-color: #7b7f89 !important;
}

.account {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    float: right;
    width: calc(100% - 250px);
    height: 50px;
    background: #ffffff;
    .a_close {
        display: block;
        margin-right: 15px;
        width: 45px;
        height: 50px;
        background: url(../assets/img/close.png) center/14px 13.6px no-repeat;
        cursor: pointer;
        &:hover {
            background-color: #eeeeee;
        }
    }
    .a_line {
        margin: 0 10px;
        width: 1.5px;
        height: 14px;
        background: #e9e9e9;
    }
    .a_font {
        width: 67px;
        height: 100%;
        font-size: 14px;
        text-align: center;
        line-height: 50px;
        color: #337ab7;
        &:hover {
            background-color: #eeeeee;
        }
    }
}

.content {
    float: right;
    width: calc(100% - 250px);
    height: calc(100vh - 50px);
    background: #f5f5f5;
}
</style>

有限状态机如何实现流程

0

1

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

var stage = new StateMachine({
    init: "step1",
    transitions: [
        {name: "kill", from: "step1", to: "step2"},
        {name: "ghost", from: "step2", to: "step3"},
        {name: "speak", from: "step3", to: "step4"},
        {name: "vote", from: "step4", to: "step1"}
    ],

    methods: {
        onKill: function () {
            $(".behavior").eq(0).addClass("over");
        },
        onGhost: function () {
            $(".behavior").eq(1).addClass("over");
        },
        onSpeak: function () {
            $(".behavior").eq(2).addClass("over");
        },
        onVote: function () {
            $(".behavior").eq(3).addClass("over");
        }
    }

});

$("#killer").click(function () {
    stage.onKill();
    window.location.href = "../js-2-6/js-2-6.html";
});

$("#ghost").click(function () {
    stage.onGhost();
    alert("亡灵发表遗言");
});

$("#player").click(function () {
    stage.onSpeak();
    alert("玩家依次发言");
});

$("#diary").click(function () {
    stage.onVote();
    window.location.href = "../js-2-4/js-2-4.html";
});

如何在搜索菜单中打开三级搜索菜单

0

1

js基础

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

无