第一天
刚到实训主要是把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();
}
总结这一周学习来说还是有效果的,能动手敲代码,敲代码速度也有提升,比在学校上课还是要好些.,希望通过这一个多月的实训能够尽可能提高自己的技术,为将来找工作打基础。