代码+2张图片
<!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>
素材图片：
使用：
【挤压】（单机）出代码
（双击）恢复初始状态