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

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

咨询电话 : 010-59478634

全部问题

已收录问题

未收录问题

没有找到答案，去提问>>>

该问题已被官方收录

如何获取三个随机格子

0

1

事件

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

js代码
//获取事件源
var sudoku = document.getElementsByClassName("box");
//获取颜色
function color() {
    var r = Math.floor(Math.random() * 256);
    var g = Math.floor(Math.random() * 256);
    var b = Math.floor(Math.random() * 256);
    //return "rgb("+r+","+g+","+b+")";
    return `rgb(${r},${g},${b})`; //所有方法的拼接都可以用ES6新特性`其他字符串{$变量名}`替换
}
//获取随机格子
function getRandom() {
    var list = Array.from(sudoku); //将集合转化为数组
    var result = [];
    for (var i = 0; i < 3; i++) {
        var x = Math.floor(Math.random() * list.length);
        result.push(list.splice(x, 1)[0]); //将随机选择的对象删除，且返回添加给空数组
    }
    return result;
}
//改变颜色
function changeColor() {
    //重置颜色
    for (var i = 0; i < sudoku.length; i++) {
        sudoku[i].style.backgroundColor = "orange";
    }
    var result = getRandom();
    for (var i = 0; i < result.length; i++) {
        result[i].style.backgroundColor = color();
    }
}


//声明变量作为定时器开关。
var startButton;
//开始
function start() {
    //重置定时器
    clearInterval(startButton);
    startButton = setInterval("changeColor()", 1000);
}
//停止
function stop() {
    for (var i = 0; i < sudoku.length; i++) {
        sudoku[i].style.background = "orange";
    }
    clearInterval(startButton);
}
css代码
.html{
    font-size: 312.5%;
}

body {
    margin: 0;
}

.box {
    float: left;
    margin: 1%;
    border-radius: 10%;
    padding-left: 31.33%;
    padding-bottom: 31.33%;
    background-color: orange;
}

button {
    width: 100%;
    padding: 5% 0;
    margin-bottom: .5rem;
    border: 1px solid orange;
    border-radius: .5rem;
    font-size: 1rem;
    outline-style: none;
    color: orange;
    background: white;
}

button:hover {
    color: white;
    background: orange;
}

html代码
<!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>九宫格</title>
    <link rel="stylesheet" type="text/css" href="task1.css"></link>
</head>

<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="start()">开始闪</button>
    <button onclick="stop()">结束闪</button>
    <script type="text/javascript" src="task1.js"></script>
</body>

</html>

该问题已被官方收录

如何将随机出来的数字应用到格子当中

0

1

操作DOM 事件

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

document.write(parseInt(1+9*Math.random()))

该问题已被官方收录

在杀手杀人事件，没有杀人的时候显示没有操作，如果使用if条件要怎么做

0

1

控制流程语句

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

if (murderOrVote == 'murder'){
    if  (JSON.parse(sessionStorage.getItem('afKillPush'))){
    playerStatus = JSON.parse(sessionStorage.getItem('playerStatusAfCli'))
    ;
    arrOfkilled = JSON.parse(sessionStorage.getItem('afKillPush'))
    ;
    arrOfVoted = JSON.parse(sessionStorage.getItem('afVotePush'))
    ;
    noneOp = JSON.parse(sessionStorage.getItem('noneOper'))
    ;
    if (sessionStorage.getItem('civilNum')){
            civilNum = sessionStorage.getItem('civilNum');
    }
    if (sessionStorage.getItem('killerNum')){
            killerNum = sessionStorage.getItem('killerNum');
    }
    for (i = 0 ; i < arrOfVoted.length ; i++){
            $(playerId[arrOfVoted[i]]).css('background-color','#83b09a')
            ;
            $(playerNum[arrOfVoted[i]]).css('width','78px')
            ;
        }
    }
    for (i = 0 ; i < arrOfkilled.length ; i++){
        $(playerId[arrOfkilled[i]]).css('background-color','#83b09a')
        ;
        $(playerNum[arrOfkilled[i]]).css('width','78px')
        ;
    }
confirmBtn.click(function() {
    if (selected === 1) {
        if (playerStatus[index].status == 'killed'){
            confirm('不能鞭尸')
        }
    else if (playerStatus[index].role == '杀手'){
        confirm('自己人')
    }
    else /*if (selected === 1) */{
            let kill = confirm("确定要杀掉他吗？");
            if (kill === true){
                civilNum--;
                arrOfkilled.push(index);
                if (civilNum < 1){
                    alert('杀手胜利');
                    window.location.href = '../gameOver/gameOver.html';

                }
                else if (killerNum < 1){
                    alert('水民胜利');
                    window.location.href = '../gameOver/gameOver.html';
                }
                else {
                playerStatus[index].status = 'killed';
                window.location.href = "../firstDay/firstDay.html";
                }
                sessionStorage.setItem('afKillPush',JSON.stringify(arrOfkilled));
            }}}
    else if (selected === 0 ){
        alert('请选择要操作的玩家')
    }
    sessionStorage.setItem('civilNum',civilNum);
    sessionStorage.setItem('playerStatusAfCli',JSON.stringify(playerStatus));
});}

该问题已被官方收录

图片拖动上传

0

1

file-upload

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div ng-show="uploader.isHTML5"  ng-if="!order">
                            <!-- 3. nv-file-over uploader="link" over-class="className" -->
                            <div class="well my-drop-zone" nv-file-drop uploader="uploader">
                                <label for="upload-file">上传效果图<span style="font-weight: lighter;">(上传图片在5M以内)</span></label>
                                <input type='file' id="upload-file" nv-file-select uploader="uploader">
                            </div>
                        </div>

该问题已被官方收录

不用原生上传图片方法，angularjs有没有上传图片方法

0

1

file-upload

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

if (typeof FileReader === 'undefined') { //如不支持
            vm.imgTip = "抱歉，你的浏览器不支持 FileReader";
            fileInput.setAttribute('disabled', 'disabled');
        } else { //如支持
            //上传图片监听change事件:   
            $("#image-file").on('change', function () {
                vm.params.img = undefined //点击选择图片重置图片为undefined
                var file = fileInput.files[0];
                console.log(file)
                if (!fileInput.value) { //如果没选择文件
                    $scope.$apply(function () {
                        vm.infor.imgTip = "未选择图片"
                    })
                    return false;
                } else if (fileInput.value && !/image\/\w+/.test(file.type)) { //如果选择了且选择文件格式不对
                    $scope.$apply(function () {
                        vm.infor.imgTip = '不是有效的图片文件!'
                    })
                    return false;
                } else { //如果选择了正确格式文件
                    $scope.$apply(function () {
                        vm.infor.imgTip = "选择成功";
                        vm.infor.isAble = false; //上传按钮恢复颜色可用
                        vm.infor.isShow = false; //进度条恢复
                    })
                    var reader = new FileReader(); //创建一个FileReader接口
                    console.log(reader);
                    //将文件以Data URL形式读入页面
                    reader.readAsDataURL(file); //FileReader的方法，把图片转成base64
                    reader.onprogress = function (e) { //本地上传过程
                        var line = e.loaded / e.total * 100; //本机上传成功100% 
                        if (line === 100) { //如果本地上传成功
                            reader.onload = function (e) { //成功读取
                                preview.src = e.target.result; //显示重新选择的图片
                                $scope.$apply(function () {
                                    vm.infor.chooseImg = true; //操作栏显示
                                    vm.infor.imgName = file.name; //显示图片名
                                    vm.infor.imgSize = file.size; //显示图片大小
                                });
                                if (file.size > 1024 * 1024) {
                                    $scope.$apply(function () {
                                        vm.infor.imgTip = "文件过大，请重新选择";
                                        vm.infor.isAble = true; //上传按钮半透明 不可用
                                    })
                                } else {
                                    vm.up = function () { //点击上传
                                        vm.infor.isShow = true; //进度条生效 
                                        vm.infor.isAble = true; //上传按钮半透明 不可用 
                                        //以下为像后台提交图片数据
                                        var formdata = new FormData();
                                        formdata.append("file", file); // file中包含用户所选择的文件
                                        uploadService.uploadFile(formdata).then(function (res) { //成功
                                            console.log(res.data);
                                            if (res.data.code == 0) { //请求成功
                                                vm.params.img = res.data.data.url;
                                                console.log(vm.params)
                                                vm.infor.imgTip = "上传成功";
                                            }
                                        })
                                    }
                                }
                            };
                        }
                    };
                }
            });
        }

<label for="image-file" class="mybtn btn-blue">选择文件</label>
                            <input type="file" id="image-file">

                        </div>
                        <p id="file-info">{{vm.infor.imgTip}}</p>
                        <div class="col-lg-12">
                            <img id="image-preview" src={{vm.params.img}} alt="配图预览区">

该问题已被官方收录

小程序中，正则运算验证使用有时候会无效

0

1

小程序语言基础

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

getCode: function (e) {
    if (e.detail.value.length === 18) {
      let sureItem = /[^_IOZSVa-z\W]{2}\d{6}[^_IOZSVa-z\W]{10}/g;
      let flag = sureItem.test(e.detail.value);      
      if (flag){
        console.log(flag)
        this.setData({
          code: e.detail.value,
          iscode: true
        })
      } else{
        wx.showToast({
          title: "请输入正确编码",
          duration: 2000,
          image: ('../../utils/img/Bitmap Copy 8.png')
        })
        this.setData({
          iscode: false
        })
      }      
    } else {
      wx.showToast({
        title: "请输入正确编码",
        duration: 2000,
        image: ('../../utils/img/Bitmap Copy 8.png')
      })
      this.setData({
        iscode: false
      })
    }

该问题已被官方收录

路由和控制器的关系

0

1

angular router angular model

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.

该问题已被官方收录

分页按钮是怎么做的

0

1

分页

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

  <tr ng-repeat="item in data.data.articleList " class="row"
                    ng-class-even="'even'"  >
                  <td class="">{{$index+1}}</td>
                  <td class="">{{item.id}}</td>
                  <td class="">{{item.type}}</td>
                  <td class="">{{item.createAt}}</td>
                  <td class="">{{item.updateAt}}</td>
                  <td class="">{{item.author}}</td>
                  <td class="">{{item.status}}</td>
                  <td class="ctrl "><a href="#" >下线</a>
                    <span class="ctrl "><a href="#" >编辑</a></span>
                    <span class="ctrl " ng-click="remove($index)"><a href="#" >删除</a></span>
                  </td>
                </tr>

该问题已被官方收录

小程序如何遍历数组

0

1

小程序语言基础

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<view class="">
  <view class="arr" wx:for="{{array}}"> 
      {{item.name}}
      <picker class='picker' bindchange="{{item.fun}}" value="{{array[index].index1}}" range='{{item.option}}' range-key="name" >
        <view >
          {{item.option[array[index].index1].name}}
        </view>
      </picker>  
  </view>
  <button class='weui_btn btn' type='primary' bindtap='result'>选好了，点击查看</button>
</view>

该问题已被官方收录

vue-video-player视频的时间如何提取出来

0

1

vue相关

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

   <video-player  class='video-player vjs-custom-skin'
                     ref='videoPlayer'
                     :options='playerOptions'
                     :playsinline='true'
                     @play='onPlayerPlay($event)'
                     @pause='onPlayerPause($event)'
                     @ready="playerReadied"
      >
      </video-player>

去第页

Copyright ©2015 北京葡萄藤信息技术有限公司 All Rights Reserved | 京ICP备15035574号-1