|
|
@@ -1,21 +1,19 @@
|
|
|
<style lang="scss" scoped>
|
|
|
.home-page{
|
|
|
}
|
|
|
+#e{
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ background: red;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ zoom: 1;
|
|
|
+}
|
|
|
</style>
|
|
|
<template>
|
|
|
<div class="home-page">
|
|
|
- <el-input type="textarea" autosize placeholder="请输入内容" v-model="voiceSet.text"></el-input>
|
|
|
- <label>语速：</label><el-input-number v-model="voiceSet.rate" :precision="1" :step="0.1" :max="10"></el-input-number>
|
|
|
-
|
|
|
- <label>音高：</label><el-input-number v-model="voiceSet.pitch" :step="0.1" :min="0" :max="2"></el-input-number>
|
|
|
-
|
|
|
- <el-button type="primary" @click="voicePlay">开 始</el-button>
|
|
|
-
|
|
|
- <el-button type="primary" @click="voicePause">暂 停</el-button>
|
|
|
-
|
|
|
- <el-button type="primary" @click="voiceResume">继 续</el-button>
|
|
|
-
|
|
|
- <el-button type="primary" @click="voiceCancel">取 消</el-button>
|
|
|
+ <div id="e"></div>
|
|
|
<!-- <child @click.native="ccc"></child>
|
|
|
<a href="http://www.baidu.com" @click.prevent="ccc">xxx</a>
|
|
|
<div id="obj1" v-on:click.capture="doc">obj1
|
|
|
@@ -66,13 +64,6 @@ export default {
|
|
|
data () {
|
|
|
return {
|
|
|
// show: true
|
|
|
- voiceSet: {
|
|
|
- text: 'The first step is one of awareness. It will be hard to make a change to positive thinking without being acutely intimate with the thoughts that run through your mind. Recently, I was amazed to discover deep buried emotions from negative thoughts that I had for fewer than 10 minutes. Without awareness, I would have carried the hurt and anger inside. Awareness helped me to bring them out to the open for me to deal with.',
|
|
|
- rate: 0.5,
|
|
|
- pitch: 1
|
|
|
- },
|
|
|
- msg: new SpeechSynthesisUtterance(), //构建语音合成实例
|
|
|
- syn: window.speechSynthesis
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
@@ -81,26 +72,55 @@ export default {
|
|
|
// let f = Object.getPrototypeOf(y) === y.__proto__;
|
|
|
|
|
|
// let c = [] instanceof Array;
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ mounted(){
|
|
|
+ var e = document.getElementById("e");
|
|
|
+ var flag = true;
|
|
|
+ var left = 0;
|
|
|
+
|
|
|
+ function render() {
|
|
|
+ if(flag == true){
|
|
|
+ if(left >= 100){
|
|
|
+ flag = false
|
|
|
+ }
|
|
|
+ e.style.left = ` ${left++}px`
|
|
|
+ }else{
|
|
|
+ if(left <= 0){
|
|
|
+ flag = true
|
|
|
+ }
|
|
|
+ e.style.left = ` ${left--}px`
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // setInterval(function(){
|
|
|
+ // render()
|
|
|
+ // },1000/60)
|
|
|
+
|
|
|
+ // (function animloop() {
|
|
|
+ // render();
|
|
|
+ // window.requestAnimationFrame(animloop);
|
|
|
+ // })();
|
|
|
+
|
|
|
+ setTimeout(function(){
|
|
|
+ change();
|
|
|
+ function change(){
|
|
|
+ e.style.left = '500px';
|
|
|
+ window.requestAnimationFrame(change);
|
|
|
+ }
|
|
|
+ },500)
|
|
|
+
|
|
|
+ let S = 0;
|
|
|
+ function fun() {
|
|
|
+ document.write("定时器"+"<br>");
|
|
|
+ //发起下一次fun执行请求
|
|
|
+ requestAnimationFrame(fun);
|
|
|
+ S++;
|
|
|
+ }
|
|
|
+ //开启函数fun第一次执行
|
|
|
+ // fun();
|
|
|
},
|
|
|
methods: {
|
|
|
- voicePlay() {
|
|
|
- this.msg.text = this.voiceSet.text;
|
|
|
- this.msg.lang = 'en';
|
|
|
- this.msg.volume = '1';
|
|
|
- this.msg.rate = this.voiceSet.rate;
|
|
|
- this.msg.pitch = this.voiceSet.pitch;
|
|
|
- this.syn.speak(this.msg);
|
|
|
- // console.log(speechSynthesis.getVoices()); //返回浏览器支持的语音包列表数组
|
|
|
- },
|
|
|
- voicePause(){
|
|
|
- this.syn.pause()
|
|
|
- },
|
|
|
- voiceResume(){
|
|
|
- this.syn.resume()
|
|
|
- },
|
|
|
- voiceCancel(){
|
|
|
- this.syn.cancel()
|
|
|
- },
|
|
|
// doc(){
|
|
|
// console.log(event.currentTarget.id)
|
|
|
// }
|
