Javascript 如何组合这些HTML文件以便在单个网页上同时运行它们？_Javascript_Html

Javascript 如何组合这些HTML文件以便在单个网页上同时运行它们？

javascript html

Javascript 如何组合这些HTML文件以便在单个网页上同时运行它们？,javascript,html,Javascript,Html,我对HTML/Javascript的了解非常有限。我正在使用我在网上找到的这段代码，并希望将这两个程序结合起来，这样我就可以在上面玩brickbreaker游戏，并在下面更新实时数据。这两个活动不需要链接，但希望它们出现在同一网页上，都在视图中，而无需滚动。谢谢你的帮助 <!DOCTYPE HTML> <html> <head> <script> window.onload = function () { var dataPoints1 = []

我对HTML/Javascript的了解非常有限。我正在使用我在网上找到的这段代码，并希望将这两个程序结合起来，这样我就可以在上面玩brickbreaker游戏，并在下面更新实时数据。这两个活动不需要链接，但希望它们出现在同一网页上，都在视图中，而无需滚动。谢谢你的帮助

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {

var dataPoints1 = [];
var dataPoints2 = [];
var dataPoints3 = [];

var chart = new CanvasJS.Chart("chartContainer", {
    zoomEnabled: true,
    title: {
        text: "Protein Activity"
    },
    axisX: {
        title: "chart updates every 1 secs"
    },
    axisY:{
        prefix: "",
        includeZero: false
    },
    toolTip: {
        shared: true
    },
    legend: {
        cursor:"pointer",
        verticalAlign: "top",
        fontSize: 22,
        fontColor: "dimGrey",
        itemclick : toggleDataSeries
    },
    data: [{
        type: "line",
        xValueType: "dateTime",
        yValueFormatString: "####.00",
        xValueFormatString: "hh:mm:ss",
        showInLegend: true,
        name: "Blue Protein",
        dataPoints: dataPoints1
        },
        {
            type: "line",
            xValueType: "dateTime",
            yValueFormatString: "####.00",
            xValueFormatString: "hh:mm:ss",
            showInLegend: true,
            name: "Red Protein" ,
            dataPoints: dataPoints2
    },
    {
        type: "line",
        xValueType: "dateTime",
        yValueFormatString: "####.00",
        xValueFormatString: "hh:mm:ss",
        showInLegend: true,
        name: "Green Protein" ,
        dataPoints: dataPoints3
}]
});

function toggleDataSeries(e) {
    if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
        e.dataSeries.visible = false;
    }
    else {
        e.dataSeries.visible = true;
    }
    chart.render();
}
//initial interval was 3000 (every 3 seconds)
var updateInterval = 1000; // 1 second interval 1000
// initial value originally 600 and 605
var yValue1 = 0;
var yValue2 = 0
var yValue3 = 0;

var time = new Date;
// starting at 9.30 am

time.setMinutes(00);
time.setSeconds(00);

function updateChart(count) {

    count = count || 1;
    var deltaY1, deltaY2, deltaY3;
    for (var i = 0; i < count; i++) {
        time.setTime(time.getTime() + updateInterval);
        // dropping the parenthetical manipulators
        // the change is between 0 and 1 ... place holder until we connect with the game
        deltaY1 =  Math.random() ;
        deltaY2 =  Math.random();
        deltaY3 =  Math.random();

    // adding random value and rounding it to two digits.
    yValue1 = Math.round((yValue1 + deltaY1)*100)/100;
    yValue2 = Math.round((yValue2 + deltaY2)*100)/100;
    yValue3 = Math.round((yValue3 + deltaY3)*100)/100;
    // pushing the new values
    dataPoints1.push({
        x: time.getTime(),
        y: yValue1
    });
    dataPoints2.push({
        x: time.getTime(),
        y: yValue2
    });
    dataPoints3.push({
        x: time.getTime(),
        y: yValue3
    });
    }

    // updating legend text with  updated with y Value
    chart.options.data[0].legendText = " Blue Protein:  " + yValue1;
    chart.options.data[1].legendText = " Red Protein:  " + yValue2;
    chart.options.data[2].legendText = " Green Protein:  " + yValue3;
    chart.render();

}
// generates first set of dataPoints
updateChart(0);
setInterval(function(){updateChart()}, updateInterval);

}
</script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>


window.onload=函数（）{
var dataPoints1=[]；
var dataPoints2=[]；
var dataPoints3=[]；
var chart=new CanvasJS.chart（“chartContainer”{
可缩放：对，
标题：{
正文：“蛋白质活性”
},
axisX：{
标题：“图表每1秒更新一次”
},
axisY：{
前缀：“”，
包括：错
},
工具提示：{
分享：真的
},
图例：{
光标：“指针”，
垂直排列：“顶部”，
尺寸：22，
fontColor:“浅灰色”，
itemclick:toggleDataSeries
},
数据：[{
键入：“行”，
xValueType:“日期时间”，
yValueFormatString:“#####.00”，
xValueFormatString:“hh:mm:ss”，
showInLegend：是的，
名称：“蓝色蛋白质”，
数据点：数据点1
},
{
键入：“行”，
xValueType:“日期时间”，
yValueFormatString:“#####.00”，
xValueFormatString:“hh:mm:ss”，
showInLegend：是的，
名称：“红色蛋白质”，
数据点：数据点2
},
{
键入：“行”，
xValueType:“日期时间”，
yValueFormatString:“#####.00”，
xValueFormatString:“hh:mm:ss”，
showInLegend：是的，
名称：“绿色蛋白质”，
数据点：数据点3
}]
});
函数切换数据系列（e）{
if（typeof（e.dataSeries.visible）==“undefined”| | e.dataSeries.visible）{
e、 dataSeries.visible=false；
}
否则{
e、 dataSeries.visible=true；
}
chart.render（）；
}
//初始间隔为3000（每3秒一次）
var updateInterval=1000；//1秒间隔1000
//初始值最初为600和605
var yValue1=0；
变量yValue2=0
var yValue3=0；
var时间=新日期；
//上午9时30分开始
时间。设置分钟（00）；
时间。设置秒（00）；
函数updateChart（计数）{
计数=计数| | 1；
变量deltaY1、deltaY2、deltaY3；
对于（变量i=0；i


及

Gamedev画布研讨会
*{填充：0；边距：0；}
画布{背景：#eee；显示：块；边距：0自动；}
var canvas=document.getElementById（“myCanvas”）；
var ctx=canvas.getContext（“2d”）；
var-ballRadius=10；
var x=canvas.width/2；
变量y=画布高度-30；
var-dx=2；
var-dy=-2；
高度=10；
宽度=75；
var-pallex=（canvas.width-pallewidth）/2；
var-rightspressed=false；
var leftPressed=false；
var brickRowCount=5；
var brickColumnCount=3；
var brickWidth=75；
var brickHeight=20；
var=10；
var brickOffsetTop=30；
var brickOffsetLeft=30；
var得分=0；
var=3；
var=[]；
对于（变量c=0；c桨叶x&&x<桨叶x+桨叶宽度）{
dy=-dy；
}
否则{
生命--；
如果（！活着）{
警报（“游戏结束”）；
document.location.reload（）；
}
否则{
x=画布宽度/2；
y=画布高度-30；
dx=3；
dy=-3；
pallex=（canvas.width-pallewidth）/2；
}
}
}
如果（右键按下&&pallex0）{
叶片x-=7；
}
x+=dx；
y+=dy；
请求动画帧（绘制）；
}
draw（）；
您可以分别创建不同的java脚本文件，并将它们链接到同一HTML页面
 在较高的层次上，这是您在创建新的HTML页面时希望采用的方法，该页面结合了原来的两个：


确保没有任何重复的代码（例如冗余的
标记），确保具有id=”“
属性的任何元素都具有唯一的id，并且应该有一个良好的开端。
JavaScript使用画布或div元素来显示代码。您必须输入body元素：
<canvas id="myCanvas" width="480" height="320"></canvas>



及


如果没有相同的函数名和变量名，可以添加
和
之间的所有代码
您的屏幕分辨率是另一个问题。您可以在
和
元素中看到“宽度”和“高度”变量。如果你的屏幕分辨率足够高的总和（我想，它一定足够高），你会在一页中看到其中的两页。其中一些是CSS，一些是javascript，我会使用两页，然后在第三页中编写两个iFrame来组合
<canvas id="myCanvas" width="480" height="320"></canvas>

<div id="chartContainer" style="height: 300px; width: 100%;"></div>