如何使多个JavaScript函数的输出显示在HTML中

How to make the output of multiple JavaScript functions display in HTML?

本文关键字：显示 HTML 输出 何使多 JavaScript 函数      更新时间：2023-09-26

因此，我试图在一个单独的HTML文件中显示使用benchmark.js的JavaScript文件中几个函数调用的结果。我的js文件看起来像这样（忽略方法和类的名称）：

class.init(function(context) {
    Benchmark("function description", {
        'defer': true,
         fn': function(deferred) {
         var x = context.ones([100, 100]);
         var y = x.repeat(2, 0);
         context.barrier(function (){
             deferred.resolve();
          });
    },
    'onComplete': function(event) {
    //This is what I'd like to print out
    console.log(this.name + ": " + (this.stats.mean * 1000).toFixed(2) + " ms");
    //
    } 
}).run();

有多个类似的函数调用。

我的HTML看起来很轻快：

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title> Sublime Webpage </title>
    </head>
    <body>
        <div class="main">
          <div class="head">
             <h1>Hello</h1>
          </div>
          <script src="filename.js"></script>
        </div>
    </body>
</html>

目前，它只是将结果打印到控制台，这总比什么都没有好，但显然不是我想要的。我和某人进行了简短的交谈，他们建议我使用jQuery。我对此进行了研究，并尝试使用document.write（this.name+"："+（this.stats.mean*1000）.toFixed（2）+"ms"）代替console.log（），但这似乎不起作用。有人有什么建议吗？

使用document.createTextNode:

// add an output div to your html
<div id='output'></div>
// in your benchmark code
var output = document.getElementById('output');
output.appendChild(document.createTextNode('some result'));

Fiddle

相关文章：