length(字符长度)和indexOf(正向搜索字符)
< script>
var value= "我的名字叫卡卡西年龄30我的愿望是成为火影"
console. log ( value) ;
console. log ( value. length) ;
console. log ( value. indexOf ( "我" ) ) ;
console. log ( value. indexOf ( "我的" ) ) ;
console. log ( value. indexOf ( "我卡卡西" ) ) ;
console. log ( value. indexOf ( "我爱罗" ) ) ;
console. log ( "------------------------------------------------------------" ) ;
< / script>
var value= "我的名字叫卡卡西年龄30我的愿望是成为火影"
console. log ( value. lastIndexOf ( "火影" ) ) ;
console. log ( value. lastIndexOf ( "我爱罗" ) )
console. log ( value. lastIndexOf ( "我卡卡西" ) ) ;
var value= "我的名字叫卡卡西年龄30我的愿望是成为火影"
console. log ( value. slice ( 1 ) ) ;
console. log ( value. slice ( 5 , 8 ) ) ;
console. log ( value. slice ( 0.2 ) ) ;
console. log ( value. slice ( - 6 , - 4 ) ) ;
console. log ( value. slice ( - 5 ) ) ;
var value= "我的名字叫卡卡西年龄30我的愿望是成为火影"
console. log ( value. substr ( 0 , 8 ) ) ;
console. log ( value. substr ( - 2 , 3 ) ) ;
console. log ( value. sub ( 1 ) ) ;
console. log ( value. sub ( - 2 ) ) ;
replace(替换)_toUpperCase(大写)_toLowerCase(小写)
console. log ( value. replace ( "卡卡西" , "我爱罗" ) ) ;
var content= "i love you" ;
console. log ( content. toUpperCase ( ) ) ;
var value= "I LOVE YOU" ;
console. log ( value. toLowerCase ( ) ) ;
trim(删除空白的部分)_split(分割字符串);
var content = " 卡卡西 " ;
console. log ( content. trim ( ) ) ;
var hope= "i belive i can fly"
console. log ( hope. split ( "" , 1 ) ) ;
console. log ( hope. split ( " " , 1 ) ) ;
< ! DOCTYPE html>
< html lang= "zh-cn" >
< head>
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< title> 字符串轮播图< / title>
< style>
* {
margin: 0 px;
padding: 0 px;
list- style: none;
}
html, body{
width: 100 % ;
height: 100 % ;
}
. banner{
width: 356 px;
height: 456 px;
margin: 49 px auto;
box- shadow: 0 0 1 px #096 ;
position: relative;
}
. banner ul{
width: 100 px;
height: 456 px;
box- shadow: 0 0 1 px red;
display: flex;
flex- direction: column;
justify- content: space- around;
text- align: center;
}
ul li{
width: 100 px;
height: 150 px;
border- bottom: 1 px solid #096 ;
cursor: pointer;
}
img{
width: 256 px;
height: 456 px;
position: absolute;
top: 0 ;
left: 100 px;
opacity: 0 ;
}
. cls{
background- color: #096 ;
}
. ddd{
background- color: #ddd;
}
button{
width: 18 px;
height: 36 px;
position: absolute;
background- color: #ddd;
opacity: .5 ;
outline: none;
top: 50 % ;
}
button: hover{
opacity: 1 ;
}
button: nth- of - type ( 1 ) {
left: 100 px;
}
button: nth- of - type ( 2 ) {
right: 0 px;
}
ol{
width: 72 px;
display: flex;
flex- direction: row;
justify- content: space- around;
position: absolute;
bottom: 0 ;
right: 10 px;
}
ol li{
width: 8 px;
height: 8 px;
border: 1 px solid #ddd;
background- color: #096 ;
border- radius: 50 % ;
}
ol li: hover{
background- color: #ddd;
}
< / style>
< div class = "banner" >
< ul>
< li class = "cls" > 鞠婧祎< / li>
< li> 鞠婧祎< / li>
< li> 鞠婧祎< / li>
< / ul>
< img src= "img/1.jpg" alt= "" style= "opacity: 1;" >
< img src= "img/2.jpg" alt= "" >
< img src= "img/3.jpg" alt= "" >
< button> << / button>
< button>> < / button>
< ol>
< li class = "ddd" > < / li>
< li> < / li>
< li> < / li>
< / ol>
< / div>
< script>
var imgs_src= [
[ "img/1.jpg" , "img/2.jpg" , "img/3.jpg" ] ,
[ "img/4.jpg" , "img/5.jpg" , "img/6.jpg" ] ,
[ "img/7.jpg" , "img/8.jpg" , "img/9.jpg" ]
]
var banner= document. getElementsByClassName ( "banner" ) [ 0 ] ;
var ul= document. getElementsByTagName ( "ul" ) [ 0 ] ;
var ul_li= ul. getElementsByTagName ( "li" ) ;
var btn= document. getElementsByTagName ( "button" ) ;
var imgs= document. getElementsByTagName ( "img" ) ;
var ol= document. getElementsByTagName ( "ol" ) [ 0 ] ;
var ol_li= ol. getElementsByTagName ( "li" ) ;
var num= 0 ;
var timer;
for ( var i= 0 ; i< ul_li. length; i++ ) {
ul_li[ i] . index= i;
ul_li[ i] . onclick = function ( ) {
for ( var j= 0 ; j< ul_li. length; j++ ) {
ul_li[ j] . className= "" ;
}
for ( var x= 0 ; x< imgs_src. length; x++ ) {
imgs[ x] . src= imgs_src[ this . index] [ x] ;
}
this . className= "cls" ;
}
}
for ( var m= 0 ; m< btn. length; m++ ) {
btn[ 0 ] . onclick = function ( ) {
num-- ;
if ( num< 0 ) {
num= imgs. length- 1 ;
}
for ( var n= 0 ; n< imgs. length; n++ ) {
imgs[ n] . style. opacity= "0" ;
ol_li[ n] . className= "" ;
}
imgs[ num] . style. opacity= "1" ;
ol_li[ num] . className= "ddd" ;
}
btn[ 1 ] . onclick = function ( ) {
num++ ;
if ( num> imgs. length- 1 ) {
num= 0 ;
}
for ( var n= 0 ; n< imgs. length; n++ ) {
imgs[ n] . style. opacity= "0" ;
ol_li[ n] . className= "" ;
}
imgs[ num] . style. opacity= "1" ;
ol_li[ num] . className= "ddd" ;
}
}
for ( var y= 0 ; y< ol_li. length; y++ ) {
ol_li[ y] . zhi= y;
ol_li[ y] . onclick = function ( ) {
for ( var p= 0 ; p< ol_li. length; p++ ) {
ol_li[ p] . className= "" ;
imgs[ p] . style. opacity= "0" ;
}
this . className= "ddd" ;
imgs[ this . zhi] . style. opacity= "1" ;
}
}
var mouser = function ( ) {
num++ ;
if ( num> imgs. length- 1 ) {
num= 0 ;
}
for ( var n= 0 ; n< imgs. length; n++ ) {
imgs[ n] . style. opacity= "0" ;
ol_li[ n] . className= "" ;
}
imgs[ num] . style. opacity= "1" ;
ol_li[ num] . className= "ddd" ;
}
var timer= setInterval ( mouser, 1200 ) ;
banner. onmouseover = function ( ) {
clearInterval ( timer) ;
}
banner. onmouseout = function ( ) {
timer= setInterval ( mouser, 1200 )
}
< / script>
< / body>
< / html>