JavaScript OnClick（）启动卡拉OK文本？

我正在尝试一个卡拉OK主题，那里有歌曲播放和文本阅读。我遇到的问题是，当页面加载时，卡拉OK会自动启动。我想做一个按钮功能，允许用户按下它，然后文本开始遵循卡拉OK模式，而不是当页面加载

var-songtext；
$（文档）.ready（函数（）{
songtext=[//[文本，持续时间]
[“我的小马，我的小马”，1500]，
[“
啊，啊，啊，啊…，1500]，
[“
（我的小马）”，3500]，
[“
我曾经想知道友谊是什么”，1500年，
[“
（我的小马）”，3500]，
[“
直到你们和我分享它的魔力”，1500年，
[“
大冒险”，900]，
[“
乐趣无穷”，900]，
[“
一颗美丽的心”，900]，
[“
忠诚而坚强”，900]，
[“
分享善意！”，900]，
[“
这是一个简单的壮举”，900]，
[“
魔法让一切变得完整”，900]，
[“
你有我的小马”，900]，
[“
你们知道你们都是我最好的朋友吗？”，1000]，
[“
我的小马”，800]，
[“
我的小马”，800]，
[“
我的小马……朋友们”，1000]，
];
var text=“”；
$。每个（歌曲文本，函数（a，b）{
文本+=“”+b[0]+“”；
});
$（'#div'）.html（文本）；
cc=0；
nextWord（）；
});
var-cc=0；
函数nextWord（）{
$（'p'+cc）.css（“颜色”、“蓝色”）；
cc++；
如果（cc>songtext.length-1）返回；
setTimeout（nextWord，songtext[cc-1][1]）；
}

#fontstyle{
字号：20pt；
}

播放

发生这种情况是因为您在

文档.ready

处理程序中调用了

nextWord

。将其放在按钮的单击手柄内：

var-songtext；
$（文档）.ready（函数（）{
songtext=[//[文本，持续时间]
[“我的小马，我的小马”，1500]，
[“
啊，啊，啊，啊…，1500]，
[“
（我的小马）”，3500]，
[“
我曾经想知道友谊是什么”，1500年，
[“
（我的小马）”，3500]，
[“
直到你们和我分享它的魔力”，1500年，
[“
大冒险”，900]，
[“
乐趣无穷”，900]，
[“
一颗美丽的心”，900]，
[“
忠诚而坚强”，900]，
[“
分享善意！”，900]，
[“
这是一个简单的壮举”，900]，
[“
魔法让一切变得完整”，900]，
[“
你有我的小马”，900]，
[“
你们知道你们都是我最好的朋友吗？”，1000]，
[“
我的小马”，800]，
[“
我的小马”，800]，
[“
我的小马……朋友们”，1000]，
];
var text=“”；
$。每个（歌曲文本，函数（a，b）{
文本+=“”+b[0]+“”；
});
$（'#div'）.html（文本）；
cc=0；
$（'button'）。在（'click'）上，函数（e）{
e、 预防默认值（）；
nextWord（）；
});
});
var-cc=0；
函数nextWord（）{
$（'p'+cc）.css（“颜色”、“蓝色”）；
cc++；
如果（cc>songtext.length-1）返回；
setTimeout（nextWord，songtext[cc-1][1]）；
}

#fontstyle{
字号：20pt；
}

播放

您需要添加：

$('.play').on('click', function() {
  $('#div').html(text);
   cc=0;
  nextWord();
});

因此，当您单击“播放”按钮时，文本将显示并开始蓝色文本高亮显示

var-songtext；
$（文档）.ready（函数（）{
songtext=[//[文本，持续时间]
[“我的小马，我的小马”，1500]，
[“
啊，啊，啊，啊…，1500]，
[“
（我的小马）”，3500]，
[“
我曾经想知道友谊是什么”，1500年，
[“
（我的小马）”，3500]，
[“
直到你们和我分享它的魔力”，1500年，
[“
大冒险”，900]，
[“
乐趣无穷”，900]，
[“
一颗美丽的心”，900]，
[“
忠诚而坚强”，900]，
[“
分享善意！”，900]，
[“
这是一个简单的壮举”，900]，
[“
魔法让一切变得完整”，900]，
[“
你有我的小马”，900]，
[“
你们知道你们都是我最好的朋友吗？”，1000]，
[“
我的小马”，800]，
[“
我的小马”，800]，
[“
我的小马……朋友们”，1000]，
];
var text=“”；
$。每个（歌曲文本，函数（a，b）{
文本+=“”+b[0]+“”；
});
$（'.play'）。在（'click'，function（）上{
$（'#div'）.html（文本）；
cc=0；
nextWord（）；
});
});
var-cc=0；
函数nextWord（）{
$（'p'+cc）.css（“颜色”、“蓝色”）；
cc++；
如果（cc>songtext.length-1）返回；
setTimeout（nextWord，songtext[cc-1][1]）；
}

#fontstyle{
字号：20pt；
}

播放
删除
nextWord（）内部
$（文档）.ready

你可以像这样开始你的卡拉OK：

<button type="button" onclick='nextWord();'>Play</button>

播放

var-songtext；
$（文档）.ready（函数（）{
songtext=[//[文本，持续时间]
[“我的小马，我的小马”，1500]，
[“
啊，啊，啊，啊…，1500]，
[“
（我的小马）”，3500]，
[“
我曾经想知道友谊是什么”，1500年，
[“
（我的小马）”，3500]，
[“
直到你们和我分享它的魔力”，1500年，
[“
大冒险”，900]，
[“
乐趣无穷”，900]，
[“
一颗美丽的心”，900]，
[“
忠诚而坚强”，900]，
[“
分享善意！”，900]，
[“
这是一个简单的壮举”，900]，
[“
魔法让一切变得完整”，900]，
[“
你有我的小马”，900]，
[“
你们知道你们都是我最好的朋友吗？”，1000]，
[“
我的小马”，800]，
[“
我的小马”，800]，
[“
我的小马……朋友们”，1000]，
];
var text=“”；
$。每个（歌曲文本，函数（a，b）{
文本+=“”+b[0]+“”；
});
$（'#div'）.html（文本）；
cc=0；
$（'button'）。在（'click'）上，函数（e）{
e、 预防默认值（）；