爱情杀手

爱情杀手 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 个人简介什么都没有

个人动态

爱情杀手 提出了问题 · 2020-12-01

解决父div为fixed,子div为absolute,设置bottom:0,并不生效,如下代

问题

父div为fixed,子div为absolute,设置bottom:0,并不生效,如下代码

在线运行查看

image.png

  <div class='dialog'>
    <div class='dialog-cover-layer'></div>
    <div class="dialog-content">
      <div class="content-top">top</div>
      <ul class='content-middle'>
        <li>...</li>
      </ul>
      <div class='content-bottom'>bottom</div>
    </div>
  </div>
  <style>
    .dialog-cover-layer {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      opacity: 0.3;
      background: #000000;
    }

    .dialog-content {
      position: fixed;
      top: 56px;
      bottom: 59px;
      left: 0;
      right: 0;
      z-index: 2;
      width: 500px;
      height: auto;
      margin: 0 auto;
      background: #fff;
      overflow-y: auto;
      padding-top: 50px;
      padding-bottom: 50px;
      box-sizing: border-box;
    }

    .content-top {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 9999;
      width: 100%;
      height: 50px;
      background-color: red;
    }

    .content-bottom {
      position: absolute;
      left: 0;
      bottom: 0;
      z-index: 9999;
      width: 100%;
      height: 50px;
      background-color: blue;
    }
  </style>

关注 3 回答 2

爱情杀手 提出了问题 · 2020-11-30

解决在一个fixed布局里有一个div超出滚动,但是top和bottom只有一个起作用(互斥),在如下代码

问题

在一个fixed布局里有一个div超出滚动,但是top和bottom只有一个起作用(互斥),在如下代码

image.png

    <div class='dialog'>
      <div class='dialog-cover-layer'></div>
      <div class="dialog-content">
        <li>...</li>
      </div>
    </div>
.dialog {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
}
.dialog-cover-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.3;
  background: #000000;
}
.dialog-content {
  width: 500px;
  height: 1000px;
  background: #fff;
  position: absolute;
  top: 56px;
  bottom: 59px;
  left: 50%;
  transform: translate(-50%);
  overflow-y: auto;
}

关注 3 回答 1

爱情杀手 提出了问题 · 2020-11-25

给div设置heigth=72,打开F12查看属性显示height=72,但是鼠标选中显示height=64,如下图

问题

给div设置heigth=72,打开F12查看属性显示height=72,但是鼠标选中显示height=64,如下图,想要设置height=72,真实大小就是72

chrome

firefox

1606293836\(1\).jpg

关注 2 回答 0

爱情杀手 赞了回答 · 2020-11-24

用js刷leetcode第1题,forEach和for循环执行,返回结果为什么不一样,如下图代码

var nums = [2, 7, 11, 15], target = 9;
        var result = ''  //新增变量
        var twoSum = function (nums, target) {
        const map = new Map()
        nums.forEach((item, index) => {
            let n1 = nums[index];
            let n2 = target - n1
            if (map.has(n2)) {
                result =  [map.get(n2), index]  //修改
            } else {
            map.set(n1, index)
            }
        })
        };

        twoSum(nums, target)  //修改
        console.log('result', result)

第二个要这样写,原因楼上也说了

关注 2 回答 2

爱情杀手 赞了回答 · 2020-11-24

用js刷leetcode第1题,forEach和for循环执行,返回结果为什么不一样,如下图代码

看return语句所在。
forEach的参数是个函数,return语句相当于结束这个函数的运行,并不是外层函数。外层函数相当于没有return语句,默认返回undefined

关注 2 回答 2

爱情杀手 提出了问题 · 2020-11-24

用js刷leetcode第1题,forEach和for循环执行,返回结果为什么不一样,如下图代码

问题

用js刷leetcode第1题,forEach和for循环执行,返回结果为什么不一样,如下图代码

for循环

返回[0,1]

    var nums = [2, 7, 11, 15], target = 9;

    var twoSum = function (nums, target) {
      const map = new Map();
      for (let i = 0; i < nums.length; i++) {
        var n1 = nums[i]
        var n2 = target - n1;
        if (map.has(n2)) {
          return [map.get(n2), i]
        } else {
          map.set(n1, i)
        }
      }
    };

    var result = twoSum(nums, target)
    console.log('result', result)

forEach

返回 undefined

    var nums = [2, 7, 11, 15], target = 9;
    var twoSum = function (nums, target) {
      const map = new Map()
      nums.forEach((item, index) => {
        let n1 = nums[index];
        let n2 = target - n1
        if (map.has(n2)) {
          return [map.get(n2), index]
        } else {
          map.set(n1, index)
        }
      })
    };

    var result = twoSum(nums, target)
    console.log('result', result)

关注 2 回答 2

爱情杀手 提出了问题 · 2020-11-23

有没有scss转less的网站,直接转函数方法的哪种,或者下面这段代码转成less是怎么写

问题

有没有scss转less的网站,直接转函数方法的哪种,或者下面这段代码转成less是怎么写

scss

<style lang="scss">
$inputWidth: 200;

@function getProgress($inputWidth, $color) {
  $val: -5px 0 0 -10px $color;
  @for $i from 6 through $inputWidth {
    $val: #{$val}, -#{$i}px 0 0 -10px #{$color};
  }
  @return $val;
}
.box {
  width: #{$inputWidth}px;
  height: 40px;
  box-shadow: getProgress($inputWidth, #69eaab);
}
</style>

关注 2 回答 1

爱情杀手 提出了问题 · 2020-11-02

在canvas上渲染一张图片,图片可放大缩小,再在canvas截取指定一个区域,如下图和代码

问题描述

想要实现一个头像截图上传功能,在canvas上渲染一张图片,图片可放大缩小,再在canvas指定一个区域(红色框),
1604297074\(1\).png

问题出现的环境背景及自己尝试过哪些方法

想要实现一个头像截图上传功能

相关代码

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      display: flex;
    }

    .left {
      position: relative;
      margin-right: 200px;
    }

    .box-border {
      position: absolute;
      width: 100px;
      height: 100px;
      left: 100px;
      top: 100px;
      border: 2px solid red;
    }
  </style>
</head>

<body>
  <div class='box'>
    <div class='left'>
      <canvas id="canvas" style="display:block;border:1px solid #aaa;">
        您的浏览器尚不支持canvas
      </canvas>
      <input type="range" id="scale-range" min="0.5" max="2.0" step="0.01" value="1.0"
        style="display:block;margin:20px;" />
      <div class='box-border'></div>
      <p>canvas</p>
    </div>
    <div class='right'>
      <img id='img' data-original="" alt="">
      <p>截取得到后的图片</p>
    </div>
  </div>
  <script>
    var canvas = document.getElementById("canvas")
    var context = canvas.getContext("2d")
    var slider = document.getElementById("scale-range")
    var image = new Image()
    window.onload = function () {

      canvas.width = 300
      canvas.height = 500

      var scale = slider.value
      image.src = "img.jpg"
      image.onload = function () {
        drawImageByScale(scale)

        slider.onmousemove = function () {
          scale = slider.value
          drawImageByScale(scale)
        }
      }
    }
    function drawImageByScale(scale) {

      var imageWidth = 300 * scale
      var imageHeight = 500 * scale

      x = canvas.width / 2 - imageWidth / 2
      y = canvas.height / 2 - imageHeight / 2

      context.clearRect(0, 0, canvas.width, canvas.height)  //第滑动一次input,range,清空canvas
      context.drawImage(image, x, y, imageWidth, imageHeight)
      getImg(canvas, context)
    }

    function getImg(canvas, context) {
      context.drawImage(image, 0, 0, 100, 100);
      var url = canvas.toDataURL("image/png")
      document.getElementById('img').setAttribute('src', url)
    }
  </script>
</body>

</html>

你期待的结果是什么?实际看到的错误信息又是什么?

1.不管图片放大缩小,都只截取该区域,如图中红色区域
2.去掉canvas上截图多出来的图片(左上角绿色前头)
3.得出来的图片,只要红色框截取的部分,完整的图不要,其实就是绿色前头

关注 2 回答 1

爱情杀手 收藏了问题 · 2020-04-14

国外的前端开发社区有哪些

想看看国外的社区,学习学习,国内的老觉得太慢了

爱情杀手 提出了问题 · 2020-04-01

angular中表单的formControlName怎么设置(Ant Design of Angular)

问题

我有一个数组,数组里有多个对象,想根据对象的一个属性type: 'minApp'分开显示,然后表单提交,但是不是拿不到值,就是不能判断if,else显示

方案 1

nz-checkbox-wrapper怎么设置formControlName

                  <nz-checkbox-wrapper [formControlName]="config['key']">
                    <div nz-row *ngFor="let data of checkboxValue">
                      <div *ngIf="data.type ==='app'">
                        <label  nz-checkbox  nzValue="data.value" >{{data.label}}</label>
                      </div>
                      <div *ngIf="data.type ==='minApp'">
                        <label  nz-checkbox nzValue="data.value">{{data.label}}</label>
                      </div>
                    </div>
                  </nz-checkbox-wrapper>

这个时候表单提交displayModule拿不到值
image.png

方案 2

nz-checkbox-group怎么if,else判断checkboxValue数组中item的
type

` <nz-checkbox-group class='right-item' [(ngModel)]="checkboxValue" [formControlName]="config['key']" ></nz-checkbox-group>`

这个时候能拿到值,但是不能分开
image.png

全部代码

import { Component, OnInit } from '@angular/core';
import { FormGroup } from '@angular/forms';

@Component({
  selector: 'checkbox-control',
  template: `
    <span [formGroup]="group">
      <nz-form-item>
        <nz-form-label
          [nzRequired]="config['isRequired']"
          [nzSpan]="config['isHorizontal'] ? 4 : null"
          [nzFor]="config['key']"
          >{{ config['label'] }}</nz-form-label>
        <nz-form-control [nzSpan]="config['isHorizontal'] ? 14 : null" [nzErrorTip]="config['tips']">
          <div class='display-module-box'>
            <header class='box-header'>
              <span>设置模块</span>
              <span>客户端显示</span>
              <span>对应小程序显示</span>
            </header>
            <div class='box-content'>
              <div class='content-left'>
                <p *ngFor="let data of displayModuleData">
                  {{data.name}}
                </p>
              </div>
              <div class='content-right'>
                  <!-- <nz-checkbox-group class='right-item' [(ngModel)]="checkboxValue" [formControlName]="config['key']" ></nz-checkbox-group> -->
                  <nz-checkbox-wrapper [formControlName]="config['key']">
                    <div nz-row *ngFor="let data of checkboxValue">
                      <div *ngIf="data.type ==='app'">
                        <label  nz-checkbox  nzValue="data.value" >{{data.label}}</label>
                      </div>
                      <div *ngIf="data.type ==='minApp'">
                        <label  nz-checkbox nzValue="data.value">{{data.label}}</label>
                      </div>
                    </div>
                  </nz-checkbox-wrapper>
              </div>
            </div>
          </div>
        </nz-form-control>
      </nz-form-item >
    </span>
  `,
  
export class CheckboxComponent implements OnInit{
  checkboxValue = [
    {
      value: 'APP_PRODUCT_CHJ',
      label: '超话菌',
      type: 'app'
    },
    {
      value: 'APP_PRODUCT_CHJ2',
      label: '超话菌2',
      type: 'app'
    },
    {
      value: 'APP_PRODUCT_JRCD',
      label: '今日穿搭',
      type: 'minApp'
    },
    {
      value: 'APP_PRODUCT_JRCD2',
      label: '今日穿搭2',
      type: 'minApp'
    },
  ]
}

关注 1 回答 0

认证与成就

  • 获得 2 次点赞
  • 获得 22 枚徽章 获得 0 枚金徽章, 获得 2 枚银徽章, 获得 20 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2019-03-01
个人主页被 873 人浏览