Web前端项目开发实战笔记（持续更新中，建议收藏）
transform : scale ( 1.05) ;
box-shadow : 0px 0px 10px 5px #dddddd;
padding-left : 20px
< metaname = " referrer" content = " never" >
width : 0px;
border-bottom : 10px solid white;
border-top : 10px solid transparent;
border-left : 10px solid transparent;
border-right : 10px solid transparent;
position : fixed;
margin : auto;
top : 0;
left : 0;
bottom : 0;
right : 0;
width : 100px;
height : 100px;
border-radius : 0px 0px 0px 100px;
width : 100px;
height : 200px;
border-radius : 100px 0px 0px 100px;
< canvaswidth = " 80px" height = " 46px" id = " login_vCode" > </ canvas>
var loginSelector = document. querySelector ( "#login_vCode" ) ;
drawCode ( loginSelector, randomCode ( ) ) ;
$ ( loginSelector) . on ( "click" , function ( ) {
clearCode ( loginSelector) ;
drawCode ( loginSelector, randomCode ( ) ) ;
} )
function randomCode ( ) {
var charArr = [ "0" , "1" , "2" , "3" , "4" , "5" , "6" , "7" , "8" , "9" , "q" , "w" , "e" , "r" , "t" , "y" , "u" , "i" , "o" , "p" , "a" , "s" , "d" , "f" , 'g' , "h" , "j" , "k" , "l" , "z" , "x" , "c" ,
"v" , "b" , "n" , "m" , "Q" , "W" , "E" , "R" , "T" , "Y" , "U" , "I" , "O" , "P" , "A" , "S" , "D" , "F" , "G" , "H" , "J" , "K" , "L" , "Z" , "X" , "C" , "V" , "B" , "N" , "M" ] ;
var code= '' ;
for ( var count = 1 ; count < 5 ; count++ ) {
code+= charArr[ parseInt ( Math. random ( ) * charArr. length) ] ;
}
return code;
}
function drawCode ( selector, code) {
var ctx = selector. getContext ( "2d" ) ;
for ( var index= 0 ; index< code. length; index++ ) {
var fontSize = parseInt ( Math. random ( ) * 2 + 20 ) ;
var x = parseInt ( Math. random ( ) * ( 20 - fontSize) + ( index* 20 ) ) ;
var y = parseInt ( Math. random ( ) * ( 46 - fontSize) + fontSize) ;
ctx. fillStyle = `rgb( ${
parseInt ( Math. random ( ) * 256 ) } , ${
parseInt ( Math. random ( ) * 256 ) } , ${
parseInt ( Math. random ( ) * 256 ) } )` ;
ctx. font = fontSize+ 'px 楷体' ;
ctx. fillText ( code. charAt ( index) , x, y) ;
}
}
function clearCode ( selector) {
var ctx = selector. getContext ( '2d' ) ;
ctx. clearRect ( 0 , 0 , selector. width, selector. height) ;
}
cursor : not-allowed;
display : flex;
flex-wrap : wrap;
justify-content : space-between;
width : 15%;
< inputtype = " radio" id = " hot" name = " sort" > < labelfor = " hot" id = " hot-label" > </ label> < inputtype = " radio" id = " time" name = " sort" > < labelfor = " time" id = " time-label" > </ label> < inputtype = " radio" id = " price" name = " sort" > < labelfor = " price" id = " price-label" > </ label>
str = str. substring ( 0 , str. lastIndexOf ( '特定字符' ) ) ;
function fn ( arr) {
var newArr= [ ] ;
for ( let i = 0 ; i < arr. length; i++ ) {
if ( newArr. indexOf ( arr[ i] ) === - 1 ) {
newArr. push ( arr[ i] )
}
}
return newArr
}
new Set ( arr)
h5 {
font-size : 18px;
font-weight : bold;
color : #333333;
margin-bottom : 28px;
&::before {
display : block;
content : '' ;
float : left;
width : 4px;
height : 18px;
background-color : #f99135;
margin-right : 5px;
margin-top : 2px;
}
}
span {
display : inline-block;
width : 40px;
height : 13px;
text-align : right;
line-height : 13px;
color : #666;
font-size : 13px;
background-image : url(../img/cinema/btn-1.png) ;
background-repeat : no-repeat;
background-position : center left;
}
< scriptsrc = " https://api.map.baidu.com/api?type=webgl&v=1.0&ak=gAidgw1xHZv7xXd4LMB2ithW6zFqp24n" > </ script> < divid = " cine-map" > </ div>
width : 200px;
height : 200px;
var cineMap = new BMapGL. Map ( "cine-map" ) ;
cineMap. centerAndZoom ( "双流区星空路二段万达广场四楼" , 15 ) ;
cineMap. enableScrollWheelZoom ( true ) ;
var geo = new BMapGL. Geocoder ( )
geo. getPoint ( "双流区星空路二段万达广场四楼" , function ( point) {
var marker = new BMapGL. Marker ( new BMapGL. Point ( point. lng, point. lat) )
cineMap. addOverlay ( marker)
} , "成都市" )
①打开vscode的setting
②搜索browser
③选择Live Server › Settings: Custom Browser修改即可
function getParam ( key) {
var search = decodeURIComponent ( location. search) ;
search= search. substring ( 1 ) ;
var params= search. split ( '&' ) ;
var result= null ;
params. forEach ( function ( val) {
var param= val. split ( '=' ) ;
if ( key== param[ 0 ] ) {
result= param[ 1 ] ;
}
} ) ;
return result;
}
function fn ( str, s) {
let res = str. match ( /s/g ) ;
let count = ! res ? 0 : res. length;
return count；
}
< linkhref = " https://fonts.googleapis.com/css?family=Lobster" rel = " stylesheet" type = " text/css" >
function getTime ( str, date) {
var now = date;
str = str. replaceAll ( /YYYY/g , now. getFullYear ( ) ) ;
str = str. replaceAll ( /MM/g , now. getMonth ( ) + 1 ) ;
str = str. replaceAll ( /DD/g , now. getDate ( ) ) ;
str = str. replaceAll ( /HH/g , now. getHours ( ) ) ;
str = str. replaceAll ( /mm/g , now. getMinutes ( ) ) ;
str = str. replaceAll ( /SS/g , now. getSeconds ( ) ) ;
return str;
}
console. log ( getTime ( "YYYY/MM/DD HH:MM:SS" , new Date ( ) ) ) ;
< divclass = " heart" > </ div>
.heart {
position : absolute;
margin : auto;
top : 0;
right : 0;
bottom : 0;
left : 0;
background-color : pink;
height : 50px;
width : 50px;
transform : rotate ( -45deg) ;
}
.heart::after {
background-color : pink;
content : "" ;
border-radius : 50%;
position : absolute;
width : 50px;
height : 50px;
top : 0px;
left : 25px;
}
.heart::before {
content : "" ;
background-color : pink;
border-radius : 50%;
position : absolute;
width : 50px;
height : 50px;
top : -25px;
left : 0px;
}
animation-iteration-count : infinite;
max-width : 100%;
height : auto;
let ctx = document. querySelector ( "canvas" ) . getContext ( "2d" ) ;
ctx. textBaseline = 'middle' ;
ctx. textAlign = 'center' ;
document. onkeydown = function ( e) {
switch ( e. keyCode) {
case 37 :
console. log ( "左" ) ;
break ;
case 38 :
console. log ( "上" ) ;
break ;
case 39 :
console. log ( "右" ) ;
break ;
case 40 :
console. log ( "下" ) ;
break ;
}
}
let nodeArr= document. querySelectorAll ( '选择器' ) ;
let re= Array. prototype. filter. call ( nodeArr, val=> 筛选条件) ;
function copy ( target, source) {
for ( let key in source) {
if ( source[ key] == null || typeof source[ key] != "object" ) {
target[ key] = source[ key]
} else {
if ( source[ key] instanceof Array ) {
target[ key] = [ ... source[ key] ] ;
} else {
target[ key] = {
} ;
copy ( target[ key] , source[ key] ) ;
}
}
}
}
window. showNoticeNoRead = showNoticeNoRead;
//分页组件
< template> < divclass = " fenye" > < divclass = " pages" > < button@click = " gotoFirstPage" > </ button> < ahref = " " @click.prevent = " changePage(item)" v-for = " item in pages" :key = " item" > </ a> < ahref = " " > </ a> < button@click = " gotoLastPage" > </ button> </ div> < selectname = " " id = " " v-model.number = " pageSize" > < option> </ option> < option> </ option> < option> </ option> </ select> < divclass = " message" > < span> </ span> </ div> </ div> </ template> < script>
export default {
data ( ) {
return {
pageSize: 5
}
} ,
props: [ "currentPage" , "pages" ] ,
methods: {
gotoFirstPage ( ) {
this . $emit ( "fenye" , 1 , this . pageSize)
} ,
gotoLastPage ( ) {
this . $emit ( "fenye" , this . pages, this . pageSize)
} ,
changePage ( page) {
this . $emit ( "fenye" , page, this . pageSize)
} ,
} ,
watch: {
pageSize ( ) {
this . $emit ( "fenye" , 1 , this . pageSize)
}
}
} ;
</ script> < stylescoped lang = ' scss' >
.fenye {
display : flex;
margin-top : 20px;
align-items : center;
.pages {
display : flex;
a {
display : block;
width : 30px;
height : 30px;
border : 1px solid gainsboro;
display : flex;
align-items : center;
justify-content : center;
text-decoration : none;
color : black;
}
}
}
</ style>
