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

关于this的指向问题

0

2

js基础

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

　　var name = "The Window";

　　var object = {
　　　　name : "My Object",

　　　　getNameFunc : function(){
　　　　　　return function(){
　　　　　　　　return this.name;
　　　　　　};

　　　　}

　　};

　　alert(object.getNameFunc()());


var name = "The Window";

　　var object = {
　　　　name : "My Object",

　　　　getNameFunc : function(){
　　　　　　var that = this;
　　　　　　return function(){
　　　　　　　　return that.name;
　　　　　　};

　　　　}

　　};

　　alert(object.getNameFunc()());

vue中自定义事件无法被捕获

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

closeCalendar() {
        this.$emit('closeCalendar');
      }

<calendar v-on:closeCalendar="isCalendarShow=false"></calendar>

angular6时间选择器如何使用

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

1. ngx-daterangepicker-material时间选择器angular6组件使用：

1.1安装组件

    npm install ngx-daterangepicker-material --save



1.2引入依赖：

    ...
    import { FormsModule } from '@angular/forms';
    import { NgxDaterangepickerMd } from 'ngx-daterangepicker-material';
    import { App } from './app';
    
    @NgModule({
        imports:      [... , FormsModule, NgxDaterangepickerMd],
        declarations: [App],
        bootstrap:    [App]
    })
    export class AppModule {}

1.3html设置

         <div>                                                                                      
          <input type="text"                                                                         
             ngxDaterangepickerMd                                                                   
             [isInvalidDate]="isInvalidDate"                                                         
             [isCustomDate]="isCustomDate"                                                           
             [locale]="{format: 'DD/MM/YYYY', firstDay: 1}"                                         
             [(ngModel)]="selected"                                                                 
             [singleDatePicker]="true"                                                               
             [autoApply]="true"                                                                     
             [maxDate]="maxDate"                                                                     
              [minDate]="minDate"  />                             
           </div>                                                                                              

1.4ypescript:

    import { Component, OnInit } from '@angular/core';
    import * as moment from 'moment';
    
    @Component({
      selector: 'single-datepicker',
      templateUrl: './single-datepicker.component.html',
      styleUrls: ['./single-datepicker.component.scss']
    })
    export class SingleDatepickerComponent implements OnInit {
      selected = moment();
      maxDate: moment.Moment;
      minDate: moment.Moment;
      constructor() { }
      ngOnInit() {
      this.maxDate = moment().add(1);
      }
      isInvalidDate(date) {
        return date.weekday() === 0;
      }
      isCustomDate(date) {
        return  (
          date.weekday() === 0 || date.weekday() === 6
        )  ? 'mycustomdate' : false;
      }
    
    }

####

获取不到第二页page

1

angular内置指令和方法 angular router angular model angular view $http js基础

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

listModul: any = {
    title: '',
    author: '',
    startAt: 0,
    endAtr: 0,
    type: 0,
    status: 0,
    page: 0,
    size: 0,
    total: 0,
    list: [],
  };

点击查看身份，再点击隐藏身份，再点击查看下一个身份，而且图片和序号也对应的在变

1

事件

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

var num=1;
$('#circle').text(num);
$('#num').text(num);

$(document).ready(function () {
    $('#deliver').click(function () {
        $('#icon').text(player[num])
     if($('#image').attr('src')=='../img/myking.png'){
         $('#image').attr('src',"../img/headicon.png")
     }else{
         $('#image').attr('src','../img/myking.png')
     }

    })
});

写的警告框是当除4-18以外的内容出现警告框，但是警告框的出现不太合理。

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

HTML:
    <form action="">
    <div class="number">
        玩家人数 <input type="number" value="4"  id="number" class="numberBox"> 人（4-18人）<br>
        <input type="button" class="reduce" id="reduce">
        <input type="range" value="4" id="myRange" class="range" min="4" max="18" >
        <input type="button" class="plus" id="plus">
    </div>
        <input type="button" value="去发牌" class="start ">
    </form>

JS;
//创建玩家角色数组：
function aPlayer() {
    aKillers = [];
    aPeople = [];
    for (var i = 0; i < killer.innerText; i++) {
        aKillers.push(roleKllers);
    }
    for (i = 0; i < people.innerText; i++) {
        aPeople.push(rolePeople);
    }
    allRole=aKillers.concat(aPeople);
    console.log(allRole);
}
//洗牌
function shuffle() {
    for (var i = allRole.length; i--;) {
        var random = Math.floor(Math.random() * (i + 1));
        var temp = allRole[i];
        allRole[i] = allRole[random];
        allRole[random] = temp;
    }
    console.log(allRole);
}
//数字框与滑块联动
number.oninput = function () {
    aPlayer();
    shuffle();
    if (number.value >= 4 && number.value <= 18) {
        myRange.value = number.value;
        killer.innerText = Math.round((number.value) * 0.25);
        people.innerText = number.value - killer.innerText;
    }
    else {
        alert("请输入正确范围内的数字");
    }
}

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

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

萝卜多后台登录页显示账号不存在

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

复盘代码：
vm.user = {     //获取账号密码
            userName:vm.nam,
            userPassword:vm.pwd
        };
requestSvc.login(vm.user).then(function(res){    //发送请求
                if(res.data.code === 0){
                    $state.go("home");
                }
                else if(res.data.code === 2001){
                    vm.message = "密码不正确";
                }
                else if(res.data.code === 2002){
                    vm.message = "用户名不存在";
                }
        })

//登录模块
        login: function(data){
            return $http.post(path.login_url(), $.param(data))  
        }

//登录
        login_url: function(){
            return "/carrots-shanzhu-ajax/a/u/login"    //请求地址
        }

html部分
账号部分：
<input class="input" type="text"
               id="user"
               placeholder="请输入用户名"
               name="userName"
               ng-model="vm.nam"
               required
               oninvalid="setCustomValidity('用户名不能为空')"
               oninput="setCustomValidity('')">

密码部分：
<input class="input" id="password" type="password"
               placeholder="请输入密码"
               name="password"
               ng-model="vm.pwd"
               required
               oninvalid="setCustomValidity('密码不能为空')"
               oninput="setCustomValidity('')">

在使用日期过滤器的时候出现了问题，列表显示的时间是12小时制，而不是24小时？

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="list" ng-controller="ListCtrl">
    <div class="title">
        <form class="form-inline">
            <div class="form-group form-ctrl">
                <label for="exampleInputName2">标题</label>
                <input type="text" class="form-control" ng-model="title" id="exampleInputName2">
            </div>
            <div class="form-group form-ctrl">
                <label for="exampleInputEmail2">创建者</label>
                <input type="text" class="form-control" ng-model="author" id="exampleInputEmail2">
            </div>
            <div class="form-group form-ctrl">
                <label for="exampleInputName2">修改时间</label>
                <input type="text" ng-click="open1()" ng-model="startAt" class="form-control" uib-datepicker-popup
                    is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" clear-text="清空"
                    current-text="今天" close-text="关闭" />
            </div>
            <div class="liner"></div>
            <div class="form-group form-ctrl">
                <input type="text" ng-click="open2()" ng-model="endAt" class="form-control" uib-datepicker-popup
                    is-open="popup2.opened" datepicker-options="dateOptions" ng-required="true" clear-text="清空"
                    current-text="今天" close-text="关闭" />
            </div>
            <div class="form-group form-ctrl">
                <label for="exampleInputName2">状态</label>
                <select class="form-control" ng-model="status" ng-options="v.id as v.name for v in a_data" ng-change="a_change(a)">
                    <option value="">全部</option>
                </select>
            </div>
            <div class="form-group form-ctrl">
                <label for="exampleInputName2">类型</label>
                <select class="form-control" ng-model="type" ng-options="v.id as v.name for v in b_data" ng-change="b_change(b)">
                    <option value="">全部</option>
                </select>
                <button type="button" class="btn btn-success" ng-click="search()">搜索</button>
                <button type="button" class="btn btn-danger" ng-click="empty()">清空</button>
            </div>
        </form>
    </div>
    <div class="article">
        <div class="top">
            <span>Article列表</span>
            <button type="button" class="btn btn-success btn-xs" ng-click="added()">+新增</button>
        </div>
        <table class="table table-hover">
            <tbody>
                <tr class="thead">
                    <th>序号</th>
                    <th>图片</th>
                    <th>标题</th>
                    <th>类型</th>
                    <th>创建者</th>
                    <th>创建时间</th>
                    <th>修改时间</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
                <tr class="thead" ng-repeat="tab in tabs">
                    <th ng-bind="$index + 1"></th>
                    <th><img src="{{tab.img}}" width="50px"></th>
                    <th>{{tab.title}}</th>
                    <th>{{tab.type | typeFilter}}</th>
                    <th>{{tab.author}}</th>
                    <th>{{tab.createAt | date:"yyyy/MM/dd      hh:mm:ss"}}</th>
                    <th>{{tab.updateAt | date:"yyyy/MM/dd      hh:mm:ss"}}</th>
                    <th>{{tab.status | statusFilter}}</th>
                    <th>
                        <button type="button" class="btn btn-success btn-xs" ng-click="online()">{{btnStatus()}}</button>
                        <button type="button" class="btn btn-info btn-xs" ng-click="edit()">编辑</button>
                        <button type="button" class="btn btn-danger btn-xs" ng-click="delete()">删除</button>
                    </th>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="pages">
        <div>
            <span>每页显示</span>
            <input class="form-control input-sm" ng-model="size" type="text">
            <span>条</span>
        </div>
        <ul uib-pagination ng-change="pageChange()" total-items="bigTotalItems" ng-model="bigCurrentPage"
            boundary-link-numbers="false" items-per-page="size" first-text="第一页" previous-text="上一页" next-text="下一页"
            last-text="最后页" max-size="maxSize" class="pagination-sm" boundary-links="true" rotate="false"></ul>
        <div>
            <span>去第</span>
            <input class="form-control input-sm" ng-model="page" type="text">
            <span>页</span>
        </div>
        <button type="button" class="btn btn-default" ng-click="sizeGo()">确认</button>
    </div>
</div>

循环定时器

0

1

函数

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="grid">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>
<div class="btn">
    <button id="run" onclick="twinkle()">开始闪</button>
    <button id="stop" onclick="stop()">结束闪</button>
</div>



function getBox() {
    var box = document.getElementsByClassName("box");
    resent();
    //随机得到三个盒子
    for (var i = 0; i < 1000; i++) {
        var box1 = Math.floor(Math.random() * 9);
        var box2 = Math.floor(Math.random() * 9);
        var box3 = Math.floor(Math.random() * 9);
        if (box1 !== box2 && box1 !== box3 && box2 !== box3) {
            break;
        }
    }
    //随机的三个盒子改变颜色
    box[box1].style.backgroundColor = changeColor();
    box[box2].style.backgroundColor = changeColor();
    box[box3].style.backgroundColor = changeColor();
}

function resent() {
    var box = document.getElementsByClassName("box");
    for (var i = 0; i < 9; i++) {
        box[i].style.backgroundColor = "orange";
    }
}
//得到三个随机颜色
function changeColor() {
    var r = Math.floor(Math.random() * 255);
    var g = Math.floor(Math.random() * 255);
    var b = Math.floor(Math.random() * 255);
    return "rgb(" + r + "," + g + "," + b +")";
}

var time;
function twinkle() {
    time = setInterval(getBox(), 1000);
}

function stop() {
    clearInterval(time);
    resent();
}