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

全部问题

已收录问题

未收录问题

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

除了用bootstrap外有些什么方法做出这种下拉栏

2

2

布局

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

。。。。

该问题已被官方收录

如何设置蒙版

1

1

bottstrap

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

无代码

该问题已被官方收录

怎么限制input number输入框的输入数字位数

5

1

表单元素

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

 <input name="myInput_DRS" onkeypress="return isNumeric(event)" onkeydown="return isMoreThan(event)" oninput="maxLengthCheck(this)" type="number" placeholder="Type..." min="1" max="999" />
 2 
 3 <script>
 4   function maxLengthCheck(object) {
 5     if (object.value.length > object.max.length)
 6       object.value = object.value.slice(0, object.max.length)
 7   }
 8 
 9   function isNumeric(evt) {
10     var theEvent = evt || window.event;
11     var key = theEvent.keyCode || theEvent.which;
12     key = String.fromCharCode(key);
13     var regex = /[0-9]|\./;
14     if (!regex.test(key)) {
15       theEvent.returnValue = false;
16       if (theEvent.preventDefault) theEvent.preventDefault();
17     }
18   }
19 
20   function isMoreThan(evt) {
21     var theEvent = evt || window.event;
22     var target = theEvent.target;
23     var keyID = event.keyCode;
24     var isDelete = false;
25     switch (keyID) {
26       case 8:
27           isDelete = true;
28         // alert("backspace");
29         break;
30       case 46:
31           isDelete = true;
32         // alert("delete");
33         break;
34       default:
35         break;
36     }
37 
38     if (!isDelete && target.value.length == target.max.length) {
39       return false;
40     }
41   }
42 
43 </script>

该问题已被官方收录

如何使滑动块在刷新页面时总是靠左？

1

1

布局

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

  <input type="range" id="rangeNumber" oninput="change()" name="change" value="4" min="4" max="18" step="1" >

该问题已被官方收录

上传图片的进度条

0

1

bottstrap

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

HTML
<td>
<uib-progressbar value="progress" style="margin-bottom: 0;" type="null" animate="true" >{{progress}}%</uib-progressbar>
</td>
JS
//选择文件
$scope.fileReader = new FileReader();//创建FileReader接口
$scope.fileChanged = function(respond){
$scope.$apply(function(){
console.log(respond);
$scope.files = respond.files[0];//保存要上传的图片信息到files,.respond.files[0]表示选择第一个上传的文件的数据。input标签设置了multiple属性的话，当上传两个文件时，则ele.files[1]可以选择到第二个上传的文件的数据。
       console.log($scope.files);
$scope.input = respond; //保存input file这个DOM节点
       console.log($scope.input);
$scope.fileName = $scope.files.name;//文件的名
       console.log($scope.fileName);
$scope.fileSize = $scope.files.size/1024/1024;//文件大小
       console.log($scope.fileSize);
$scope.progress=0;
});
};

// 上传图片
$scope.upload = function(){
//创建FormData用来存放上传的参数
   var formData = new FormData();
//调用FileReader对象的方法，readAsDataURL该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URL，Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件
   $scope.fileReader.readAsDataURL($scope.files);
//用append()方法以键值对的形式把参数存入formData中，按照接口文档请求参数key为file，value为上传的文件
   formData.append("file",$scope.files);
console.log($scope.fileSize);
if($scope.fileSize <= 5242880){
$http({
method: 'post',
url: '/carrots-admin-ajax/a/u/img/task',
data: formData,
headers:{"Content-Type":undefined},
//将事件侦听器绑定到XMLHttpRequest上传对象。用来监听progress事件，这个事件会在读取中时会触发。
           uploadEventHandlers: {
progress: function(respond){
console.log(respond);
//respond.loaded为已上传文件的大小，respond.total为要上传文件的总大小。两者相除得到的$scope.progress值是用来表示进度条的
                   $scope.progress = (respond.loaded/respond.total)*100;
console.log($scope.progress);
}
}
}).then(function successCallback(respond){
$scope.status = respond.data.message;
$scope.src = respond.data.data.url;
console.log($scope.src);
$scope.okIcon=true;
});
}else{
alert('文件大于5MB');
$scope.removeIcon=true;
}
};

该问题已被官方收录

页面打不开，在浏览器中打开页面出现找不到文件提示。

0

1

路径

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<!DOCTYPE html>
<html>
<head>
    <title>setup</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link type="text/css" rel="stylesheet"  href="setup.css">
    <script src="setup.js"></script>
</head>
<body>
<header><img src="./img/9.png"><span>参考设置</span><img class="iconright" src="./img/10.png"></header>
<div class="main">
    <div class="match">
        <div class="match_left">玩家配比</div>
        <div class="match_right">
            <div></div>
            <button>点击设置</button>
        </div>
    </div>
    <div class="keyword">
        <input type="text" maxlength="8" placeholder="水民词组">
        <input type="text" maxlength="8" placeholder="卧底词组">
    </div>
    <div class="playernum">
        <div class="number">玩家人数<input id="shownum" type="number" min="4" max="18" maxlength="2">人</div>
        <div class="slide">
            <input id="subbtn" onclick="subnum()" type="button" value="—">
            <input id="range" oninput="change()" type="range" min="4" max="18" step:"1" value="4">
            <input id="addbtn" onclick="addnum()" type="button" value="+" style="font-size:1.2rem">
        </div>
        
    </div>
    <button class="deal">去发牌</button>
</div>
</body>  
</html>

$grey:#f0f0f0;
$lightgrey:#fbfbfb;
$deepgrey:#d9d9d9;
$white:#fff;
$blue:#29bde0;
$orange:#fab344;
$lightorange:#ffe6be;
@mixin mmwidth(){
    min-width: 320px;
    max-width: 768px;
}
@mixin mtb($mtop,$mbtm){
    margin-top:$mtop;
    margin-bottom:$mbtm;
}
@mixin ptb($ptop,$pbtm){
    padding-top: $ptop;
    padding-bottom:$pbtm;
}
@mixin fixedmg(){
    margin-left:.5rem;
    margin-right:.5rem;
}
@mixin fixedpd(){
    padding-left:.5rem;
    padding-right:.5rem;
}
@mixin size($width,$height){
    width:$width;
    height:$height;
}
body{
    @include mmwidth;
    margin:0 auto;   
}
header{
    @include mmwidth;
    @include ptb(.5rem,.5rem);
    @include fixedpd;
    display: flex;
    justify-content: space-between;
    font-size: 1rem;
    color:$white;
    background-color: $blue;
    img{
        height:1.2rem;
    }
    .iconright{
        width:1.2rem;
    }
}
.main{
    @include mmwidth;
    padding:.5rem;
    background-color: $grey;
    .match{
        display:flex;
        .match_left{
            width:1.2rem;
            padding:0 1rem;
            border-right:1px solid $deepgrey;
            font-size: 1.2rem;
            background-color: $white;
        }
        .match_right{
            background-color: $lightgrey;
        }
    }
    .keyword{
        @include mtb(.5rem,.5rem);
        padding:0.5rem 2rem 1.2rem;
        background-color: $white;
        input{
            @include ptb(.6rem,.6rem);
            display: block;
            width:100%;
            border:none;
            border-bottom:1px solid $deepgrey;
            font-size: .8rem;
            color:$lightgrey;

        }
    }
    .playernum{
        margin-bottom: .5rem;
        padding:1rem 1rem;
        background-color: $white;
        .number{
            margin-bottom: 1rem;
            input{
                @include size(1.6rem,1.3rem);
                margin:0 1rem;
                border:none;
                font-size: 1rem;
                text-align:center;
                background-color: $grey;
                outline: none;      
                &:focus{
                    outline:none;
                }
            }
        }
        .slide{
            display: flex;
            justify-content: space-between;

            input[type=button]{
                margin: 0 2rem;
                border:1px solid $deepgrey;
                font-size: 0.7rem;
                font-weight: bold;
                color:$orange;
                background-color: $white;
                outline: none;
            }
            input[type=range] {
                -webkit-appearance: none;
                width: 100%;
                background: -webkit-linear-gradient(left,$orange,$lightorange) no-repeat;
            }
            input[type=range]::-webkit-slider-thumb {
                -webkit-appearance: none;
            }    
            input[type=range]{
                flex:1;
                outline: none;
            }
            input[type=range]::-webkit-slider-runnable-track{
                -webkit-appearance:none;
                height:0.3rem;
                background-color: $lightorange;
            }
            //input[type=range]::-webkit-slider-thumb {
            //    -webkit-appearance: none;
            //    height: 25px;
            //    width: 25px;
            //    margin-top: -5px; /*使滑块超出轨道部分的偏移量相等*/
            //    background: red; 
            //    border-radius: 50%; /*外观设置为圆形*/
            //    border: solid 0.125em rgba(205, 224, 230, 0.5); /*设置边框*/
            //    box-shadow: 0 .125em .125em #3b4547; /*添加底部阴影*/
            //}
            input[type=range]::-webkit-slider-thumb{
                -webkit-appearance:none;
                width:2rem;
                height:1.5rem;
               background:url("./img/11.png") no-repeat;
               background-size: 2rem 1.5rem;
               margin-top: -0.6rem;
            }
        }

    }

    input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{
        -webkit-appearance: none;
    }
    input[type=number]{
        -moz-appearance: textfield;       
    } 
    .deal{
        @include size(100%,3rem);
        font-size: 1.2rem;
        border: none;
        outline: none;
        color:$white;
        background-color: $orange;
    }
}

var num=document.getElementById("range");
 var location=document.getElementById("shownum");
function addnum(){
num.value=++num.value;
    change();
}
function subnum(){
num.value=num.value-1;
    change();
}
function change(){
 location.value=num.value;
}

对display：inline-block的行标签设置margin：0 auto

0

1

布局

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

    margin: 0 auto;
    width: 35px;
    display: inline-block;
    line-height: 90px;
    text-align: center;

怎么让任务9中合作企业那一栏的文字和圆点同时触发hover效果？

1

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="jz">
                            <span class="circle-text">
                                <div class="circle"></div>
                                阿里巴巴
                            </span>
                            <span class="circle-text">
                                <div class="circle"></div>
                                腾讯视频
                            </span>
                            <span class="circle-text">
                                <div class="circle"></div>
                                北京葡萄藤
                            </span>

bootstrap,导航栏组的颜色怎么更改?

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

  <!--nav-->
        <div class="container-fluid  nav-container">
            <div class="row">
                <div class="col-sm-8 offset-sm-2">
                    <nav class="navbar navbar-expand-sm navbar-dark" style="padding:0">
                        <a class="navbar-brand" href="#">
                         <img style="width:20rem" src="home-logo-hs.png" />
                        </a>
                        <button class="navbar-toggler" type="button" data-toggle="collapse"
                            data-target="#collapsiblejnshu">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                        <div class="collapse navbar-collapse" id="collapsiblejnshu">
                            <ul class="navbar-nav justify-content-end" style="width:100%">
                                <!--链接组(导航组)-->
                                <li class="nav-item">

                                    <a class="nav-link nav-a" href="task8-1.html">首页 </a>
                                    <div class="nav-li"></div>

                                    <!--链接-->
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link nav-a" href="../task8.1.3/task8-3.html">职业</a>
                                    <div class="nav-li"></div>
                                    <!--链接-->
                                </li>
                                <li class="nav-item ">
                                    <a class="nav-link nav-a" href="../task8.1.3/task8-3.html">推荐</a>
                                    <div class="nav-li"></div>
                                    <!--链接-->
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link nav-a" href="../task8.1.2/task8-2.html">关于</a>
                                    <div class="nav-li"></div>
                                    <!--链接-->
                                </li>
                            </ul>
                        </div>
                    </nav>
                </div>
            </div>
        </div>
/*nav样式*/
.nav-container {
    background-color: rgb(41, 176, 120);
    color: white;
}

.nav-a {
    font-size: 1.7rem;
    padding: 20px 0 20px 10px;

}

.nav-item:hover .nav-li {
    visibility: visible;
}

.nav-li {
    visibility: hidden;
    border-bottom: 1px solid white;

}

怎么让元素具有点击后出现hover的效果

2

1

属性

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.lump a:hover {
    text-decoration: none;
    color: #ff6d1b;
}
.lump a:hover .circle-left {
    background: #ff6d1b;
}

去第页

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