每一个你不满意的现在,都有一个你不努力的曾经. 网站首页 > js

卡拉ok播放器效果

发布时间：2018-12-10 16:59:47 修改时间：2018-12-10 16:59:47 阅读：5121 评论：0 0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>jquery实现进度条</title>

<style>

.progressBar{width:300px;height:30px;border:1px solid #98AFB7;border-radius:5px;margin-top:10px;}

#bar{width:0px;height:30px;background:#5EC4EA;}

</style>

var arr = new Array();

arr.push('1 春种一粒粟，秋收万颗子。');

// 这个超出显示区域长度，会断句，新增到下一行

arr.push('2 四海无闲田，农夫犹饿死。1 春种一粒粟，秋收万颗子。');

arr.push('3 锄禾日当午，汗滴禾下土。');

arr.push('4 谁知盘中餐，粒粒皆辛苦。');

var bar;

var lineNum = 0;

var lineWidth = 0;

var status = 0;

var contentMaxLength = 20;

function progressBar(){

// 开始&&继续

if(status == 0){

$('#btn').val('暂停');

status = 1;

setTimer();

}else{

$('#btn').val('继续');

status = 0;

clearInterval(bar);

}

function setTimer(){

var speed = 20;

bar = setInterval(function(){

nowWidth = parseInt($("#bar").width());

//宽度要不能大于进度条的总宽度

if(nowWidth <= lineWidth && lineWidth != 0){

var barWidth = (nowWidth + 1)+"px";

$("#bar").css("width", barWidth);

}else{

content();

}

}, speed);

}

function content(){

if(lineNum >= arr.length){

$('#btn').val('重新开始');

status = 0;

lineNum = 0;

clearInterval(bar);

}else{

$("#bar").css("width","0px");

var content = arr[lineNum];

if(content.length <= contentMaxLength){

$("#text").html(content);

}else{

// 超出部分需要加入到数组中

var view = content.substring(0, contentMaxLength);

var newLine = content.substring(contentMaxLength);

arr.splice(lineNum + 1, 0, newLine);

$("#text").html(view);

console.log('?');

}

lineWidth = parseInt($("#text").css("width"));

lineNum++;

}

</script>

</head>

<body>

</div>

</body>

</html>

转载请注明地址：

如有侵权，立即删除！

回复列表

注册用户登录后才能发表评论，请登录或注册.

关键字词：nbsp,span,style,1px,font-size,lt

上一篇：css常用属性

下一篇：jq的fileUpload上传图片插件

TANG LI LIFE.

每一个你不满意的现在,都有一个你不努力的曾经. 网站首页 > js

卡拉ok播放器效果

回复列表

相关文章