文章目录 js的使用 一、模态框 二、使用js控制盒子变色 三、图片轮播效果 四、图片5s消失
< ! doctype html>
< html lang= "en" >
< head> < meta charset= "UTF-8" > < title> Document< / title> < style> * { margin : 0 ; padding : 0 ; } html, body { height : 100 % ; } #bg { position : absolute; top : 0 ; left : 0 ; right : 0 ; bottom : 0 ; background- color: rgba ( 0 , 0 , 0 , 0.3 ) ; display : none; } #content { position : absolute; top : 100px; left : 50 % ; margin- left: - 150px; background- color: white; width : 300px; height : 200px; } < / style>
< / head>
< body>
< input type= "button" value= "弹出" id= "btn" >
< div id= "bg" > < div id= "content" > < p> < label for = "inp-username" > 用户名: < / label> < input type= "text" name= "username" id= "inp-username" > < / p> < p> < label for = "inp-password" > 密码: < / label> < input type= "text" name= "username" id= "inp-password" > < / p> < p> < input type= "button" value= "提交" > < input type= "button" value= "取消" id= "cancel" > < / p> < / div>
< / div> < script> var btn = document. getElementById ( 'btn' ) ; var bg = document. getElementById ( 'bg' ) ; var username= document. getElementById ( 'inp-username' ) ; var pwd= document. getElementById ( 'inp-password' ) ; var cancel= document. getElementById ( 'cancel' ) ; btn. onclick = function ( ) { bg. style. display= 'block' ; } cancel. onclick = function ( ) { username. value= '' ; pwd. value= '' ; bg. style. display= 'none' }
< / script>
< / body>
< / html>
< ! doctype html>
< html lang= "en" >
< head> < meta charset= "UTF-8" > < title> Document< / title> < style> * { margin : 0 ; padding : 0 ; } . box { width : 200px; height : 200px; background : black; text- align: center; color : white; line- height: 200px; font- size: 23px; font- weight: bold; margin : 20px auto; } < / style>
< / head>
< body>
< div class = "box" > 点我< / div>
< script> function random ( ) { return Math. floor ( Math. random ( ) * 256 ) } var box = document. getElementsByClassName ( 'box' ) [ 0 ] ; var count = 0 ; box. onclick = function ( ) { count++ ; if ( count % 4 == 0 ) { this . style. background= 'black' ; this . style. color= 'white' count= 0 } else { this . style. background= ` rgb( ${ random ( ) } , ${ random ( ) } , ${ random ( ) } ) ` this . style. color= ` rgb( ${ random ( ) } , ${ random ( ) } , ${ random ( ) } ) ` } }
< / script>
< / body>
< / html>
< ! doctype html>
< html lang= "en" >
< head> < meta charset= "UTF-8" > < title> Document< / title> < style> * { margin : 0 ; padding : 0 ; } . tab { width : 480px; height : 200px; border : 1px solid black; margin : 0 auto; } li { list- style: none; width : 160px; height : 60px; line- height: 60px; text- align: center; background- color: white; float : left; } li. active { background- color: #55BBBB; } p { display : none; height : 200px; text- align: center; line- height: 200px; background- color: white; } p. active { display : block; } < / style>
< / head>
< body>
< div class = "tab" > < ul> < li id= 'li0' class = "active" > 图片1 < / li> < li id= 'li1' > 图片2 < / li> < li id= 'li2' > 图片3 < / li> < / ul> < p id= 'p0' class = "active" > 图片1 内容< / p> < p id= 'p1' > 图片2 内容< / p> < p id= 'p2' > 图片3 内容< / p>
< / div>
< script> var li= document. getElementsByTagName ( 'li' ) ; var p= document. getElementsByTagName ( 'p' ) ; var count= 0 ; var prev= null ; setInterval ( function ( ) { prev= count; count++ ; if ( count>= li. length) { count= 0 } ; document. getElementById ( ` li ${ prev} ` ) . className= '' ; document. getElementById ( ` p ${ prev} ` ) . className= '' ; document. getElementById ( ` li ${ count} ` ) . className= 'active' ; document. getElementById ( ` p ${ count} ` ) . className= 'active' ; } , 5000 ) for ( var i= 0 ; i< li. length; i++ ) { li[ i] . onclick = function ( ) { prev= count; count= this . id. slice ( - 1 ) document. getElementById ( ` li ${ prev} ` ) . className= '' ; document. getElementById ( ` p ${ prev} ` ) . className= '' ; document. getElementById ( ` li ${ count} ` ) . className= 'active' ; document. getElementById ( ` p ${ count} ` ) . className= 'active' ; } }
< / script>
< / body>
< / html>
< ! doctype html>
< html lang= "en" >
< head> < meta charset= "UTF-8" > < title> Document< / title> < style> * { padding : 0 ; margin : 0 ; } img { position : fixed; } div { width : 500px; height : 500px; margin : 0 auto; } head { text- align: center; } #left { left : 0 ; } #right { right : 0 ; } < / style>
< / head>
< body>
< img src= "https://ts1.cn.mm.bing.net/th/id/R-C.20295d0518771fc5cb5ee105babe7378?rik=Yua8Mk3Af1E9oA&riu=http%3a%2f%2fimage.hnol.net%2fc%2f2014-06%2f19%2f18%2f201406191807182715-167450.jpg&ehk=liL3ej9gh1atPOczNtcZjwDp1sy%2bXI%2fRmPdsbBTS09w%3d&risl=&pid=ImgRaw&r=0" id= "left" width= "150px" height= "200px" >
< img src= "https://tse2-mm.cn.bing.net/th/id/OIP-C.WpkEXG_UnsXypCgkdqG8mQAAAA?rs=1&pid=ImgDetMain" id= "right" width= "150px" height= "200px" >
< div> < h1> 神枪手金爷爷< / h1> < p> 那时，金爷爷为练习枪法，经常在夜晚对着月亮射击，以此练就在黑夜里准确打击敌人的好眼神和好枪法。这个秘密沉寂了很多年，直到1969 年7 月21 日，终于被美国人发现了。这一天，美国人登月，却发现到处都是金爷爷留下的弹坑，惊呼不可思议。从此以后，美国就再也不敢冒犯我们伟大的国家。< / p>
< / div> < script> window. onload = function ( ) { var left = document. getElementById ( 'left' ) ; var right = document. getElementById ( 'right' ) ; setTimeout ( function ( ) { left. style. display = 'none' ; right. style. display = 'none' ; } , 5000 ) } < / script>
< / body>
< / html>
)
