<!DOCTYPE html> <html> <head> <meta charset="utf-8" content="" http-equiv="refresh"> <title>xjj</title> <style type="text/css"> .xjj{ position: absolute; left: 250px; top: 240px; } .xjj textarea{ border: none; } .cli{ float: left;/*float 就是一种升级,从上下级的关系变成平级关系*/ background: rgb(228,219,144); width: 160px; height: 90px; margin-left: -390px; border-radius: 54px; background-image: linear-gradient(rgb(222,218,138),rgb(228,219,144)); opacity: 0.1; } .img1{ float: left; } .sqltxt{ /*display: none;*/ /*color: #fff;*/ } .tip{ margin-top: -280px; margin-left: 18px; } .ff{ color: #fff; } .f0{ color: #000; } </style> <script type="text/javascript"> function sqlcli() { // body... var area1=document.getElementsByTagName('textarea')[0]; var pre1=document.getElementsByTagName('pre')[0]; var pre2=document.getElementsByTagName('pre')[0].innerHTML; var img1=document.getElementsByTagName('img')[0]; if (area1.innerHTML==null ||area1.innerHTML=="") { img1.src="img/xjjend.png"; area1.innerHTML=pre2; } var cli1=document.getElementsByClassName('cli')[0]; cli1.ondblclick=function(){ img1.src="img/xjjstart.png"; area1.innerHTML=''; } } </script> </head> <body > <!-- img site --> <img src="img/xjjstart.png" class="img1" /> <!-- container site --> <div class="xjj"> <textarea rows="17" cols="30"></textarea> </div> <!-- click site --> <div class="cli" onclick="sqlcli()"> </div> <div class="sqltxt"> <pre class="ff"> Connection con; String driver = "com.mysql.jdbc.Driver"; String url = "jdbc:mysql://localhost:3306/sqltestdb"; String user = "root"; String password = "123456"; try { Class.forName(driver); con = DriverManager.getConnection(url,user,password); if(!con.isClosed()) System.out.println("Succeeded connecting to the Database!"); Statement statement = con.createStatement(); String sql = "select * from emp"; } (Exception e) { // TODO: handle exception e.printStackTrace(); } </pre> </div> <div class="tip"> <h3>小提示:挤压泵头,自动生成JDBC连接MYSQL数据库</h3> <p>按压式-基础数据库</p> </div> </body> </html>
素材图片:
使用:
【挤压】(单机)出代码
(双击)恢复初始状态