3

难住了，我想在点击按钮清除到localstorage数据的时候有一个纸皱的声音，但是在清除localstorage数据后必须刷新页面才能更新更改，而且刷新是不允许播放音效的. 所以我希望它等到音效完成然后触发刷新。谢谢！

我的 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>
4

2 回答 2

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()
    }
}

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

于 2012-12-03T06:55:57.537 回答
0

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

只是给链接一个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");
};

};

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

于 2013-03-04T00:04:27.473 回答