Question

难倒，当我点击按钮清除本地存储数据时，我希望有一个纸张揉声播放，但是在清除本地存储数据以更新更改后必须刷新页面，并且刷新不允许声音效果发挥。所以我希望它等到声音效果结束然后触发刷新。谢谢！

我的HTML：

<audio controls="controls">
    <source src="paper_crumple.mp3" type="audio/mpeg" />
</audio>

<section class="note">

    <h3 id="clear">Clear Note</h3>
    <h1 id="title" contenteditable="true">Note Title</h1>
    <h2 id="date" contenteditable="true">Date Written</h2>
    <p id="note" contenteditable="true">Hello! Click on the note card and start editing!
        <br>
        <br>
        Try refreshing the page, notice that your content stays.
        <br>
        Try closing your browser, shutting your computer off, and then opening it up again.
        <br>It still stays! This is all thanks to the html5 localstorage api.
        <br>
        <br>
        Note that the data will not sync between different browsers, computers, or any other devices such as your mobile phone.
        <br>
        <br>
        This note is responsive! Try adjusting your window size and see how the width adjusts.
        <br>
        Also note that when you get to mobile width, the note adjusts to best take use of the limited space.
        <br>
        <br>
        Tips: You can press ctrl+b for <b>bold</b> text. Similarly you can do the same thing but for <u>underlined</u> or <i>italic text</i>.</p>

</section>

我的JavaScript：

    <script class="jsbin" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
    $(function() {

      var title = document.getElementById('title');

      $(title).blur(function() {
        localStorage.setItem('title', this.innerHTML);
      });

      // when the page loads
      if ( localStorage.getItem('title') ) {
        title.innerHTML = localStorage.getItem('title'); 
      }

      // to reset
      // localStorage.clear();

    });

    $(function() {

      var date = document.getElementById('date');

      $(date).blur(function() {
        localStorage.setItem('date', this.innerHTML);
      });

      // when the page loads
      if ( localStorage.getItem('date') ) {
        date.innerHTML = localStorage.getItem('date'); 
      }

      // to reset
      // localStorage.clear();

    });

    $(function() {

      var note = document.getElementById('note');

      $(note).blur(function() {
        localStorage.setItem('note', this.innerHTML);
      });

      // when the page loads
      if ( localStorage.getItem('note') ) {
        note.innerHTML = localStorage.getItem('note'); 
      }

      // to reset
      // localStorage.clear();

    });

    window.onload = function() {
        var clear = document.getElementById("clear");
        var myaudio = new Audio('paper_crumple.mp3');
        clear.onclick = function() {
            myaudio.play()
            localStorage.clear()    
            // window.location.reload()
        }
    }
</script>

Answer 1

尝试使用已结束的事件http://dev.w3.org/html5/spec/single-page.html#event-media-ended

clear.onclick = function() {
    myaudio.play()
    localStorage.clear()    
    myaudio.onended = function () {
        window.location.reload()
    }
}

这基本上是说 - “完成播放声音后 - 重新加载页面”

Answer 2

对于想要解决这个问题的人，我终于开始工作，所以我想我会与社区分享我的解决方案。

刚给链接一个ID并使href的内容等于：javascript：void（0）;

<a href="javascript:void(0);" id="clear">Clear Note</a>

然后我把它放到文件script.js文件中：

window.onload = function() {

var clear = document.getElementById("clear");
var audioElement = document.createElement('audio');
    audioElement.setAttribute('src', 'paper_crumple.mp3');
    audioElement.setAttribute('preload', 'auto');
    audioElement.setAttribute('onended', 'window.location.reload()');

function playAudio() {
    audioElement.load;
    audioElement.play();
};

clear.onclick = function() {
    localStorage.clear();
    playAudio();
    $("#wrapper").addClass("fadeOutDown");
};

};

希望这对任何人都有帮助！

在Javascript / jQuery中播放声音后刷新页面

2 个答案: