javascript - 如何使用 JavaScript 将 html 页面内容保存在 .txt 文件中？

标签 javascript jquery html css

我已经创建了一个用于测验的静态 html 页面。 以下是我的代码

<style>
    body {
font-family: Open Sans;
}
#quiz {display:none;}
#prev {display:none;}
#start {display:none;}
#submit{display:none;}
ul{list-style:outside none none; margin:0px; padding:0px;}
.question>div>div>div>p{    color: #fff;
background-color: #337ab7;
padding: 6px;
border-radius: 3px;}
.navbar-default {background-color: #fff;border-color: #ddd; border-radius:0px;}
</style>
<body>
<div class='container question'>
    <div class='row'>
        <div class='col col-md-12' id='quiz'>
        </div>
    </div>
</div>

<div class='container question' >
<div class='row' id='quiz'>
</div>
</div>
<br/>
<div class='container'>
            <a href='#' class='btn btn-md btn-default pull-right' id='next'>Next</a>
            <a href='#' class='btn btn-md btn-default pull-left' id='prev'>Prev</a> 
            <a href='#' class='btn btn-md btn-default' id='start'>Start Over</a>


        <div class='button' id='submit' style='display:none;'>
            <input type='text' placeholder='Name' id="inputFileNameToSaveAs"/>
            <button type='submit' class='btn btn-success' onclick="saveTextAsFile()">Submit</button>
        </div>
</div>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>

    <script type="text/javascript">


    function saveTextAsFile()
    {
    var textToSave = document.getElementById("question").text;
    var textToSaveAsBlob = new Blob([textToSave], {type:"text/plain"});
    var textToSaveAsURL = window.URL.createObjectURL(textToSaveAsBlob);
    var fileNameToSaveAs = document.getElementById("inputFileNameToSaveAs").value;

    var downloadLink = document.createElement("a");
    downloadLink.download = fileNameToSaveAs;
    downloadLink.innerHTML = "Download File";
    downloadLink.href = textToSaveAsURL;
    downloadLink.onclick = destroyClickedElement;
    downloadLink.style.display = "none";
    document.body.appendChild(downloadLink);

    downloadLink.click();
    }

    function destroyClickedElement(event)
    {
        document.body.removeChild(event.target);
    }

    function loadFileAsText()
    {
        var fileToLoad = document.getElementById("fileToLoad").files[0];

        var fileReader = new FileReader();
        fileReader.onload = function(fileLoadedEvent) 
        {
            var textFromFileLoaded = fileLoadedEvent.target.result;
            document.getElementById("inputTextToSave").value = textFromFileLoaded;
        };
        fileReader.readAsText(fileToLoad, "UTF-8");
    }

                (function() {
      var questions = [
      {
        question: "Which one is correct?",
        choices: ['a!=b', 'a=!b', 'a:=b', 'a=-b'],
        correctAnswer: 0
      },

      ];

      var questionCounter = 0; //Tracks question number
      var selections = []; //Array containing user choices
      var quiz = $('#quiz'); //Quiz div object

      // Display initial question
      displayNext();

      // Click handler for the 'next' button
      $('#next').on('click', function (e) {
        e.preventDefault();

        // Suspend click listener during fade animation
        if(quiz.is(':animated')) {        
          return false;
        }
        choose();

        // If no user selection, progress is stopped
        if (isNaN(selections[questionCounter])) {
          alert('Please make a selection!');
        } else {
          questionCounter++;
          displayNext();
        }
      });

      // Click handler for the 'prev' button
      $('#prev').on('click', function (e) {
        e.preventDefault();

        if(quiz.is(':animated')) {
          return false;
        }
        choose();
        questionCounter--;
        displayNext();
      });

      // Click handler for the 'Start Over' button
      $('#start').on('click', function (e) {
        e.preventDefault();

        if(quiz.is(':animated')) {
          return false;
        }
        questionCounter = 0;
        selections = [];
        displayNext();
        $('#start').hide();
      });

      // Animates buttons on hover
      $('.button').on('mouseenter', function () {
        $(this).addClass('active');
      });
      $('.button').on('mouseleave', function () {
        $(this).removeClass('active');
      });

      // Creates and returns the div that contains the questions and 
      // the answer selections
      function createQuestionElement(index) {
        var qElement = $('<div>', {
          id: 'question'
        });

        var header = $('<p>Question ' + (index + 1)  + '</p>');
        qElement.append(header);

        var question = $('<h3>').append(questions[index].question);
        qElement.append(question);

        var radioButtons = createRadios(index);
        qElement.append(radioButtons);

        return qElement;
      }

      // Creates a list of the answer choices as radio inputs
      function createRadios(index) {
        var radioList = $('<ul>');
        var item;
        var input = '';
        for (var i = 0; i < questions[index].choices.length; i++) {
          item = $('<li>');
          input = '<input type="radio" name="answer" value=' + i + ' />';
          input += questions[index].choices[i];
          item.append(input);
          radioList.append(item);
        }
        return radioList;
      }

      // Reads the user selection and pushes the value to an array
      function choose() {
        selections[questionCounter] = +$('input[name="answer"]:checked').val();
      }

      // Displays next requested element
      function displayNext() {
        quiz.fadeOut(function() {
          $('#question').remove();

          if(questionCounter < questions.length){
            var nextQuestion = createQuestionElement(questionCounter);
            quiz.append(nextQuestion).fadeIn();
            if (!(isNaN(selections[questionCounter]))) {
              $('input[value='+selections[questionCounter]+']').prop('checked', true);
            }

            // Controls display of 'prev' button
            if(questionCounter === 1){
              $('#prev').show();
            } else if(questionCounter === 0){

              $('#prev').hide();
              $('#next').show();
            }
          }else {
            var scoreElem = displayScore();
            quiz.append(scoreElem).fadeIn();
            $('#next').hide();
            $('#prev').hide();
            $('#start').show();
            $('#submit').show();
          }
        });
      }

      // Computes score and returns a paragraph element to be displayed
      function displayScore() {
        var score = $('<h4>',{id: 'question'});

        var numCorrect = 0;
        for (var i = 0; i < selections.length; i++) {
          if (selections[i] === questions[i].correctAnswer) {
            numCorrect++;
          }
        }

        score.append('You got ' + numCorrect + ' questions out of ' +
                     questions.length + ' right!!!');
        return score;
      }
    })();


    </script>
        </body>

一切工作正常，但我想将选中的单选按钮值和最终结果保存在 .txt 文件中 我想保存用户的所有答案以及正确和错误的答案。

最佳答案

注意事项:
- 首先初始化变量textToSave，不设置任何值；
- document.getElementById("question").text; 应为 document.getElementById("question").innerHTML;
- 在choose正文中，将radio的值添加到变量textToSave

结果

var textToSave='';
function saveTextAsFile()
    {
   textToSave += ". Final Result : "+document.getElementById("question").innerHTML;
    var textToSaveAsBlob = new Blob([textToSave], {type:"text/plain"});
    var textToSaveAsURL = window.URL.createObjectURL(textToSaveAsBlob);
    var fileNameToSaveAs = document.getElementById("inputFileNameToSaveAs").value;

    var downloadLink = document.createElement("a");
    downloadLink.download = fileNameToSaveAs;
    downloadLink.innerHTML = "Download File";
    downloadLink.href = textToSaveAsURL;
    downloadLink.onclick = destroyClickedElement;
    downloadLink.style.display = "none";
    document.body.appendChild(downloadLink);

    downloadLink.click();
    }

    function destroyClickedElement(event)
    {
        document.body.removeChild(event.target);
    }

    function loadFileAsText()
    {
        var fileToLoad = document.getElementById("fileToLoad").files[0];

        var fileReader = new FileReader();
        fileReader.onload = function(fileLoadedEvent) 
        {
            var textFromFileLoaded = fileLoadedEvent.target.result;
            document.getElementById("inputTextToSave").value = textFromFileLoaded;
        };
        fileReader.readAsText(fileToLoad, "UTF-8");
    }

                (function() {
      var questions = [
      {
        question: "Which one is correct?",
        choices: ['a!=b', 'a=!b', 'a:=b', 'a=-b'],
        correctAnswer: 0
      },

      ];

      var questionCounter = 0; //Tracks question number
      var selections = []; //Array containing user choices
      var quiz = $('#quiz'); //Quiz div object

      // Display initial question
      displayNext();

      // Click handler for the 'next' button
      $('#next').on('click', function (e) {
        e.preventDefault();

        // Suspend click listener during fade animation
        if(quiz.is(':animated')) {        
          return false;
        }
        choose();

        // If no user selection, progress is stopped
        if (isNaN(selections[questionCounter])) {
          alert('Please make a selection!');
        } else {
          questionCounter++;
          displayNext();
        }
      });

      // Click handler for the 'prev' button
      $('#prev').on('click', function (e) {
        e.preventDefault();

        if(quiz.is(':animated')) {
          return false;
        }
        choose();
        questionCounter--;
        displayNext();
      });

      // Click handler for the 'Start Over' button
      $('#start').on('click', function (e) {
        e.preventDefault();

        if(quiz.is(':animated')) {
          return false;
        }
        questionCounter = 0;
        selections = [];
        displayNext();
        $('#start').hide();
      });

      // Animates buttons on hover
      $('.button').on('mouseenter', function () {
        $(this).addClass('active');
      });
      $('.button').on('mouseleave', function () {
        $(this).removeClass('active');
      });

      // Creates and returns the div that contains the questions and 
      // the answer selections
      function createQuestionElement(index) {
        var qElement = $('<div>', {
          id: 'question'
        });

        var header = $('<p>Question ' + (index + 1)  + '</p>');
        qElement.append(header);

        var question = $('<h3>').append(questions[index].question);
        qElement.append(question);

        var radioButtons = createRadios(index);
        qElement.append(radioButtons);

        return qElement;
      }

      // Creates a list of the answer choices as radio inputs
      function createRadios(index) {
        var radioList = $('<ul>');
        var item;
        var input = '';
        for (var i = 0; i < questions[index].choices.length; i++) {
          item = $('<li>');
          input = '<input type="radio" name="answer" value=' + i + ' />';
          input += questions[index].choices[i];
          item.append(input);
          radioList.append(item);
        }
        return radioList;
      }

      // Reads the user selection and pushes the value to an array
      function choose() {
        selections[questionCounter] = +$('input[name="answer"]:checked').val();
        textToSave += "Choosen Value : "+selections[questionCounter];
      }

      // Displays next requested element
      function displayNext() {
        quiz.fadeOut(function() {
          $('#question').remove();

          if(questionCounter < questions.length){
            var nextQuestion = createQuestionElement(questionCounter);
            quiz.append(nextQuestion).fadeIn();
            if (!(isNaN(selections[questionCounter]))) {
              $('input[value='+selections[questionCounter]+']').prop('checked', true);
            }

            // Controls display of 'prev' button
            if(questionCounter === 1){
              $('#prev').show();
            } else if(questionCounter === 0){

              $('#prev').hide();
              $('#next').show();
            }
          }else {
            var scoreElem = displayScore();
            quiz.append(scoreElem).fadeIn();
            $('#next').hide();
            $('#prev').hide();
            $('#start').show();
            $('#submit').show();
          }
        });
      }

      // Computes score and returns a paragraph element to be displayed
      function displayScore() {
        var score = $('<h4>',{id: 'question'});

        var numCorrect = 0;
        for (var i = 0; i < selections.length; i++) {
          if (selections[i] === questions[i].correctAnswer) {
            numCorrect++;
          }
        }

        score.append('You got ' + numCorrect + ' questions out of ' +
                     questions.length + ' right!!!');
        return score;
      }
    })();
<style>
    body {
font-family: Open Sans;
}
#quiz {display:none;}
#prev {display:none;}
#start {display:none;}
#submit{display:none;}
ul{list-style:outside none none; margin:0px; padding:0px;}
.question>div>div>div>p{    color: #fff;
background-color: #337ab7;
padding: 6px;
border-radius: 3px;}
.navbar-default {background-color: #fff;border-color: #ddd; border-radius:0px;}
</style>
<body>
<div class='container question'>
    <div class='row'>
        <div class='col col-md-12' id='quiz'>
        </div>
    </div>
</div>

<div class='container question' >
<div class='row' id='quiz'>
</div>
</div>
<br/>
<div class='container'>
            <a href='#' class='btn btn-md btn-default pull-right' id='next'>Next</a>
            <a href='#' class='btn btn-md btn-default pull-left' id='prev'>Prev</a> 
            <a href='#' class='btn btn-md btn-default' id='start'>Start Over</a>


        <div class='button' id='submit' style='display:none;'>
            <input type='text' placeholder='Name' id="inputFileNameToSaveAs"/>
            <button type='submit' class='btn btn-success' onclick="saveTextAsFile()">Submit</button>
        </div>
</div>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>


        </body>

关于javascript - 如何使用 JavaScript 将 html 页面内容保存在 .txt 文件中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42968097/

上一篇：css - firefox hack 可以使用吗？

下一篇：css - 无法获得覆盖引导 CDN 链接元素的特异性

相关文章：

javascript - 用于显示和隐藏多个 div 的压缩 javascript 代码

javascript - .each jQuery 仅以这种形式捕获最后一个元素

javascript - 检查直线两点之间是否存在坐标

javascript - 如何对仅更改内部状态的函数进行单元测试

php - Jquery 标记处理程序

javascript - 具有全选的多个复选框

JavaScript:如何通过 AJAX 打开返回的文件

css - 如何按指定布局div？

javascript - JS 学生电子邮件验证

php - 在 Laravel 中应用 Bootstrap 后页面出现盒装外观

©2024 IT工具网  联系我们