刚到实训主要是把html css js结合在一起制作了一个”爱心”,主要是css部分主要是用transform实现旋转，实现自定义动画效果和js部分的键盘按键监听，定时器效果.刚开始也没觉得有多难.
// An highlighted block //初始化一个透明度 var opacity=0.1; var set=setInterval(function(){ //设置span的透明度 opacity += 0.1; span.style.opacity=opacity; if(opacity>=1){ //清除定时任务 clearInterval(set); } },300); }下午的前端部分，制作音乐软件的主界面，主要还是一些div 的css布局，动画效果和昨天一样,使用了css3里的一些伪类选择器、flex弹性布局、鼠标悬停效果、鼠标指针样式、文字过渡效果.总的来说下午css布局是最重要的.主要是一些基本的布局.
.item{ display: flex; /*弹性盒子*/ height: 50px; line-height: 50px; font-size: 0.8em; border-bottom: 1px solid rgba(255,255,255,0.5); cursor:pointer; /*设置指针样式*/ transition:all .5s; /*过渡效果*/ } .item-icon{ flex:1; background:url(../img/icon1.png) no-repeat; background-position:center center; } .item-name{ flex:5; } .item-size{ flex:1; }今天了解了下什么是json，其实就是把js代码转换成字符串格式，这样能够不止在js，在java，php中都可以读取。我们在js文件里创建伪数据,添加一些音频文件,我们把js代码数据转换成json格式然后添加到html代码中，我们在所有item类中添加了索引i，在js中创建伪数据，来连接前面已经布局好了的音乐界面，从而实现播放.
//将数据跟页面模板绑定 var html=''; for(var i=0;i<data.length;i++){ var m=data[i]; //console.log(m.name+'---------'+m.size); html+='<div class="item" data-index="'+i+'">'; html+='<div class="item-icon"></div>'; html+='<div class="item-name">'+m.name+'</div>'; html+='<div class="item-size">'+fmSize(m.size)+'</div>'; html+='</div>'; } //初始化当前播放的歌曲索引 var currentIndex =0; //创建一个音频播放器对象 var player=document.createElement('audio'); //获取列表中的所有item项 var items=document.querySelectorAll('.item'); //遍历数组 for(var i=0;i<items.length;i++){ //为items绑定事件监听 items[i].onclick=function(){ //获取当前列表项的data-index属性值 currentIndex=this.dataset.index; //设置播放源(歌曲播放路劲 player.src=data[currentIndex].path; player.play(); }; }今天上午主要是把昨天的音乐界面功能完善，主要实现点击显示高亮，音乐图标旋转。来区分音乐播放的状态，主要是在css文件里加一个可以显示高亮的类样式，之后再加入js代码里，下午讲解数据库如何在MySQL环境下去创建表并且添加数据，对数据进行增删改查。
//开始播放 function start(){ //设置播放源 player.src = data[currentIndex].path; //启动播放 player.play(); items[currentIndex].className='item active'; //为列表项中的图标设置动画效果 items[currentIndex].querySelector('.item-icon').className='item-icon active-play'; }今天上午讲了数据库的查询，下午在eclipse的环境下实现了java代码连接数据库，利用了JDBC技术，可以在java代码的编译环境下对mysql进行对数据的增删改查。大概做了下整套体系的后台部分.
/** * 实现查询操作 * select * from tbmusic * @author mrchai */ public class JDBCDemo2 { public static void main(String[] args) throws ClassNotFoundException, SQLException { //1.加载驱动 Class.forName("com.mysql.jdbc.Driver"); //2.获取连接 Connection conn = DriverManager.getConnection("jdbc:mysql://127.0.0.1:3306/music","root","root"); String sql = "select * from tbmusic"; //3.获取执行sql语句的命令对象 PreparedStatement ps = conn.prepareStatement(sql); //4.执行(查询操作) ResultSet rs = ps.executeQuery(); //5.处理结果 while(rs.next()){ //获取当前结果集的一行中的每一列数据 int id = rs.getInt("id"); String name = rs.getString("name"); Timestamp uptime = rs.getTimestamp("uptime"); String artist = rs.getString("artist"); String ablum = rs.getString("ablum"); String style = rs.getString("style"); String path = rs.getString("path"); int size = rs.getInt("size"); //输出结果 System.out.println(name+"--"+artist+"--"+ablum+"--"+style+"--"+path); } //6.关闭资源 rs.close(); ps.close(); conn.close(); }总结这一周学习来说还是有效果的，能动手敲代码，敲代码速度也有提升，比在学校上课还是要好些.,希望通过这一个多月的实训能够尽可能提高自己的技术，为将来找工作打基础。
