2023.10.24每日总结
<!-- <!DOCTYPE html>声明是html文件 --> <!DOCTYPE html> <html lang="en"> <head> <!-- 有些只有单标签比如meta --> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 改变标签页 --> <title>超级暴龙王</title> <link rel="stylesheet" href="../style.css"> <style type="text/css"> #btn{ width:100px;height:40px; font-size:20px;border-radius:10px;} #main{ width:800px;height:600px; background:#cc00cc; margin:0 auto;text-align:center;} /* #vido{ width:602px; height:402px; border:1px dotted #00ff66; margin:0 auto;} */ </style> <style type="text/css"> #btn,#btn2{ width:100px;height:40px; font-size:20px;border-radius:10px; background:#44dc81;} #main{ width:800px;height:600px; background:#fcfcfc; margin: 60px 250px; text-align:center; position:relative;} /* #vido{ width:602px; height:402px; border:1px dotted #00ff66; margin:0 auto; position:absolute; top:100px; left:400px;} */ </style> </head> <body> <div id="main"> <table width="1000px" height="500px" border="1px" cellspacing="0"> <tr> <th>视频资源名称</th> <th>查看</th> <th>视频内容</th> </tr> <tr> <td>摸摸看</td> <td><input type="button" id="btn" onclick="open_video()" value="播放视频"> <input type="button" id="btn2" onclick="close1()" value="关闭视频"> </td> <td align="center"> <video id="1" width="600" height="400" controls> <source src="./video/lulukan.mp4" type="video/mp4"> </video> </td> </tr> <tr> <td>亲亲看</td> <td><input type="button" id="btn" onclick="open_video2()" value="播放视频"> <input type="button" id="btn2" onclick="close2()" value="关闭视频"> </td> <td align="center"><video id="2" width="600" height="400" controls> <source src="./video/lulukan.mp4" type="video/mp4"> </video> </td> </tr> <tr> <td>抱抱看</td> <td><input type="button" id="btn" onclick="open_video3()" value="播放视频"> <input type="button" id="btn2" onclick="close3()" value="关闭视频"> </td> <td align="center"> <video id="3" width="600" height="400" controls> <source src="./video/lulukan.mp4" type="video/mp4"> </video> </td> </tr> </table> </div> <script> window.onload=function non(){ document.getElementById("1").style.cssText = "display:block;"; document.getElementById("2").style.cssText = "display:none;"; document.getElementById("3").style.cssText = "display:none;"; } function close1() { window.location.reload(); } function open_video(){ document.getElementById("1").style.cssText = "display:block;"; } function close2() { window.location.reload(); } function open_video2(){ document.getElementById("2").style.cssText = "display:block;"; document.getElementById("3").style.cssText = "display:none;"; document.getElementById("1").style.cssText = "display:none;"; } function close3() { // document.getElementById("3").style.cssText = "display:none;" window.location.reload(); } function open_video3(){ document.getElementById("3").style.cssText = "display:block;"; document.getElementById("2").style.cssText = "display:none;"; document.getElementById("1").style.cssText = "display:none;"; } </script> </body> </html>