1, Chrome browser full screen display and monitoring is mainly a few key browser API: ① check whether the browser is full screen

document.webkitIsFullScreen  // true/false

Copy the code

(2) full screen

document.documentElement.webkitRequestFullScreen(a)

Copy the code

③ Exit the full screen

//Note: Nodocument.documentElement

document.exitFullscreen()

Copy the code

④ Add listening events during a full-screen switch

window.addEventListener('webkitfullscreenchange', yourfunction );

Copy the code

Based on these, you can control and monitor the browser’s full-screen behavior

Get the month/year set between any two dates (moment.js)

  // The month or year between two dates

  const getBetweenMonthsOrYearsArray=(startDate, endDate,monthOrYear) = > {

    // Specifies the date format to return

    const dateFormat=monthOrYear==='month'?"YYYY-MM":"YYYY"

    // Get the month or year of the start date

    let startMonthOrYear = moment(startDate).startOf(monthOrYear).format(dateFormat);

    // Get the month or year of the end date

    const endMonthOrYear = moment(endDate).startOf(monthOrYear).format(dateFormat);

    // A collection of months or years between dates

    const monthOrYearArray = [];

    // The loop pushes month/year into the array until the start date is larger than the end date

    while (startMonthOrYear <= endMonthOrYear) {

      console.log(startMonthOrYear,endMonthOrYear,'endMonthOrYear97')

      monthOrYearArray.push(startMonthOrYear);

      startMonthOrYear = moment(startMonthOrYear).add(1, monthOrYear).format(dateFormat);

    }

    // Return the result

    return monthOrYearArray;

  }

Copy the code

Ex. :

  getBetweenMonthsOrYearsArray('2018-05-17'.'2019-02-01'.'year') / / /"2018"."2019"]



  getBetweenMonthsOrYearsArray('2018-05-17'.'2019-02-01'.'month') 

/ / /"The 2018-05"."The 2018-06"."The 2018-07"."The 2018-08"."The 2018-09"."The 2018-10"."The 2018-11"."2018-12"."2019-01"."2019-02"]

Copy the code

3. If the date is Sunday, get the Sunday bug of the week (moment.js)

  let date='2019-08-11'

  // Get the day of the week of the date

  const n = moment(date, 'YYYY-MM-DD').format('E') / / '7'



  // Get the week of the year

  // If it is Sunday (7), the number of weeks needs to be increased by 1, otherwise it counts as last week!!

  const end_weeknumber = n==='7'? moment(date).isoWeek()+1:moment(date).isoWeek()



  const end_condition = moment(date)

    .week(+end_weeknumber)

    .isoWeekday(7)

    .format('YYYY-MM-DD')  / / '2019-08-11'

Copy the code

It is important to note that when the selected date is A Sunday, the number of weeks is incremented by 1

With the front-end tips 10 points (2019.9.29) the first point to use:

The perfect version:

let date='2019-08-11'

let when=0  

const n = moment(date.'YYYY-MM-DD').format('E')

const weeknumber= n==='7'? moment(date).isoWeek()+1:moment(date).isoWeek()



const startDate=moment(date)    

      .week(+weeknumber+when)    

      .isoWeekday(1)    

      .format('YYYY-MM-DD'); / / 2018-12-31



const endDate=moment(date)    

      .week(+weeknumber+when)    

      .isoWeekday(7)    

      .format('YYYY-MM-DD'); / / 2019-01-06

Copy the code

4, display LCD LCD font on the Web page Reference: display LCD LCD font, special font, @font-face attribute detailed usage

But there is a lot of nonsense in it, so this is enough:

Effect:

5. Vertical center and horizontal center are absolute

.a {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translateX(50%)translateY(50%);

 }

Copy the code

6. React

class updateTime extends Component {

  state = {

    time: ' '.

  };



  componentDidMount() {

    this.calculTime();

  }



  calculTime = (a)= > {

    const that = this;

    // The current time

    this.setState({

      time: moment().format('YYYY ', h:mm:ss A'),

    });



    // Delay execution by itself for one second

    setTimeout((a)= > {

      that.calculTime();

    }, 1000);

  };



render() {



  }

}

Copy the code

It is best to make a separate component and keep it updated

7. Refer to the Leaflet extension package

I didn’t know how to refer to the extension package, but I wrote it like this:

import L from "leaflet-editable";

Copy the code

or

import L from "leaflet";

import LL from "leaflet-editable";

Copy the code

These are all incorrect, correct quotes:

import L from "leaflet";

import "leaflet-editable";

import "leaflet-path-drag";

Copy the code

8. Given two colors, get a certain number of gradients

  // min rgba(155,224,178,1) max rgba(255,152,0,1)

  //startColor startColor

  //endColor is the brightest color

  //number Indicates the number of stains

  function fColorGradualChange(

    //[155.224.178.1]

    startColorArr,

    //[255.152.0.1]

    endColorArr,

    //3

    number

  ) {

    / / red

    const startR = startColorArr[0];

    / / green

    const startG = startColorArr[1];

    / / blue

    const startB = startColorArr[2];

    / / red

    const endR = endColorArr[0];

    / / green

    const endG = endColorArr[1];

    / / blue

    const endB = endColorArr[2];

    // Calculate the average value of each level

    const sR = (endR - startR) / number;

    const sG = (endG - startG) / number;

    const sB = (endB - startB) / number;



    const colors = [];

    for (let i = 0; i < number; i++) {

      colors.push(

        fColorToHex(

          // Assign R, G, B to each item

          parseInt(sR * i + startR, 10),

          parseInt(sG * i + startG, 10),

          parseInt(sB * i + startB, 10)

        )

      );

    }

    return colors;

  }



  / / RGB hex

  function fColorToHex(r, g, b) {

    const hex =

      "#" +

      // numObj. ToString ([radix])

      // Convert to hexadecimal

      fAddZero(r.toString(16)) +

      fAddZero(g.toString(16)) +

      fAddZero(b.toString(16));

    // Returns a concatenated hexadecimal color code

    return hex;

  }



  // add 0 bits

  function fAddZero(value) {

    // Value is a hexadecimal number of 0, 1, or 2 digits

    const newv = "00" + value;

    return newv.substring(newv.length - 2, newv.length);

  }

Copy the code

Ex. :

  <div>

    <div class="a">aaa</div>

    <div class="a">bbb</div>

    <div class="a">ccc</div>

    <div class="a">ddd</div>

    <div class="a">eee</div>

  </div>



  const colorArr=fColorGradualChange([155.224.178.1], [255.152.0.1].5)



  $('.a').each((index,item)=> {

    item.style.color=colorArr[index]

  })

Copy the code

Effect:

9. The tremble function will only be executed when the last event is triggered, such as in the dragging event (dragging) :

let timeoutId=0



'dragging':(e:object)= >{

            clearTimeout(timeoutId)

            timeoutId=window.setTimeout((a)= >{

              //do something

              //.

            },100)

          },

Copy the code

This knowledge is very useful in my own projects, one is drag, another is the mouse wheel scroll also used

Get the web page zoom

window.devicePixelRatio

Copy the code

SetSelectionRange = setSelectionRange ();

Example 1: Select a value for a single input

<input type="text" id="inputa" value="123456789" />



document.getElementById('inputa').focus()

document.getElementById('inputa').setSelectionRange(2.5)

Copy the code

Example 2: Multiple input linkage, jump cursor

<input type="text" id="inputa" value="" oninput="setInput()"/>

<input type="text" id="inputb" value="34"/>



const a=document.getElementById('inputa')

const b=document.getElementById('inputb')



  function setInput(a) {

    if (a.value.length === 2) {

      b.focus()

      b.setSelectionRange(3.3)

    }

  }

Copy the code

After inputa enters two values, the cursor automatically jumps to the end of the inputb value:

(after)