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

for的作用、用处

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
var result = [];
var ranNum = 5;
for (var i = 0; i < ranNum; i++) {
var ran = Math.floor(Math.random() * arr.length);

如何使用div + CSS +JS 来模拟滑动条？

1

节点操作

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

none

在使用日期过滤器的时候出现了问题，列表显示的时间是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>

列表展示页，改变双数据的page和size的值，页面数据毫变化

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<table class="table table-striped f14">
          <tr>
            <th>ID</th>
            <th>名称</th>
            <th>类型</th>
            <th>发布时间</th>
            <th>修改时间</th>
            <th>发布者</th>
            <th>状态</th>
            <th>操作</th>
          </tr>
          <tr v-for="(item, key) in message" :key="item.id">
            <td>{{ key + 1 }}</td>
            <td>{{ item.title }}</td>
            <td>{{ reset[item.type].type }}</td>
            <td>{{ item.createAt }}</td>
            <td>{{ item.updateAt }}</td>
            <td>{{ item.author }}</td>
            <td>{{ reset[item.status].status }}</td>
            <td><a>上线</a><a>编辑</a><a>删除</a></td>
          </tr>
        </table>

data() {
    return {
      message: [],
      reset: [
        { val: 0, type: "首页Banner" },
        { val: 1, type: "找职位Banner", status: "草稿" },
        { val: 2, type: "找精英Banner", status: "上线" },
        { val: 3, type: "行业大图" }
      ]
    };
  },
  methods: {
    requestData() {
      let data = {
        page: 2,
        size: 8,
        total: 30,
        list: 3
      };
      this.$axios({
        method: "get",
        url: "/carrots-admin-ajax/a/article/search",
        headers: { "content-type": "application/x-www-form-urlencoded" },
        data: this.qs.stringify(data)
      })
        .then(resp => {
          this.message = resp.data.data.articleList;
          for (var a = 0; a < this.message.length; a++) {
            this.message[a].createAt = new Date(
              this.message[a].createAt
            ).toLocaleString("chinese", { hour12: false });
            this.message[a].updateAt = new Date(
              this.message[a].updateAt
            ).toLocaleString("chinese", { hour12: false });
          }
          console.log(resp);
          console.log(data);
          console.log(this.qs.stringify(data));
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  mounted() {
    this.requestData();
  }

有限状态机问题

1

有限状态机

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .green,
        .yellow,
        .red,
        .clear {
            display: inline-block;
            margin: 1rem;
            width: 5rem;
            height: 5rem;
            border: solid 1px #000;
            border-radius: 50%;
        }

        .green {
            background: green;
        }

        .yellow {
            background: yellow;
        }

        .red {
            background: red;
        }
    </style>
</head>

<body>
    <div class="green"></div>
    <div class="yellow"></div>
    <div class="red"></div>
    <br>
    <div class="clear"></div>

    <script src="jquery-3.3.1.min.js"></script>

    <script src="state-machine.js"></script>
    <script>
        var fsm = new StateMachine({
            init: 'green',//从green开始
            transitions: [{
                    name: 'warn',
                    from: 'green',
                    to: 'yellow'
                },
                {
                    name: 'panic',
                    from: 'yellow',
                    to: 'red'
                },
                {
                    name: 'calm',
                    form: 'red',
                    to: 'yellow'
                },
                {
                    name: 'clear',
                    from: 'yellow',
                    to: 'green'
                }
            ]
        })


        $('.green').on('click', function () {
            console.log(fsm.can('warn'));
            fsm.warn();
        })

        $('.yellow').on('click', function () {
            console.log(fsm.can('panic')); 
            fsm.panic();
        })

        $('.red').on('click', function () {
            console.log(fsm.can('calm'));
            fsm.calm();
        })

        $('.clear').on('click', function () {
            console.log(fsm.can('clear'));
            fsm.clear();
        })





    </script>
</body>



</html>

用JavaScript修改CSS属性有哪几种方法；

0

1

js基础

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<body>
    <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>

    <button onclick="go()" id="start">开始闪</button>
    <button onclick="end()">结束闪</button>
    <script src="task1 .js"></script>
</body>

angular写router无法跳转或者说url改变了但是页面没变。

1

路由器

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<main class="bg-img">
    <div class="input-wrap">
        <div class="top-img"></div>
        <div class="input-box">
            <div class="user-img"></div>
            <input class="name" type="text" placeholder="输入账号" ngModel="name" />
        </div>
        <div class="input-box">
            <div class="password-img"></div>
            <input class="password" type="password" placeholder="输入密码" ng-model="pass" />
            <p>{{name}}{{pass}}</p>
        </div>
        <button class="btn" [routerLink]="['listpage']">
            登录
<app-popout>
</app-popout>

            <!-- <span *ngIf="name=='user'&&pass=='password'" [routerLink]="['/assa']" routerLinkActive="router-link-active" ></span>
            <span *ngIf="name!='user'||pass!='password'" 弹框错></span> -->
          </button>
    </div>

</main>

如何使用nginx配置反向代理

1

Ajax 跨域

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

如何把三种不同的随机颜色添加到三个随机盒子上？

1

操作DOM 表达式和运算符变量

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

function getRandom(minNum,maxNum,count) {
    var numArr=[],num;
    for(var i=0;i<count;i++) {
        do {
            num=Math.floor(Math.random()*maxNum);
        }while(numArr.indexOf(num)>-1);
        numArr.push(num);
    }
    return numArr;
}