Question

我想在网页顶部添加提醒。 javascript如下;

window.onload = function () {

    var dps = []; // dataPoints

    var chart = new CanvasJS.Chart("chartContainer",{
        title :{
            text: "Cell 1 Temperature (\xB0C)"
        },
        axisX: {
            title:"Time (seconds)",

        },
        axisY:{
            title: "Temperature (\xB0C)",
        },          
        data: [{
            type: "line",
            dataPoints: dps 
        }]
    });

    var xVal = 0;
    var yVal = 100; 
    var updateInterval = 100;
    var dataLength = 5000; // number of dataPoints visible at any point

    var updateChart = function (count) {
        count = count || 1;
        // count is number of times loop runs to generate random dataPoints.

        for (var j = 0; j < count; j++) {   
            yVal = yVal +  Math.round(5 + Math.random() *(-5-5));
            dps.push({
                x: xVal,
                y: yVal
            });
            xVal++;
        };
        if (dps.length > dataLength)
        {
            dps.shift();                
        }
        chart.render();     

        //print stuff
        document.getElementById("cell1").innerHTML=yVal + "&deg;C";
    };

    // generates first set of dataPoints
    updateChart(dataLength); 

    // update chart after specified time. 
    setInterval(function(){updateChart()}, updateInterval);
}

基本上当yVal变量小于-100或大于100时，我想在网页顶部打印一个警告对话框。我希望当值在-100和100之间时警报消失。我还希望将警报固定到网页的顶部，这样当它出现时它会保持在那里，即使用户向下滚动。

我尝试将以下代码添加到javascript：

if (-100>yVal>100) {
            document.getElementById("alert1").innerHTML="DANGA'";
        } else {
            document.getElementById("alert2").innerHTML="S'All GOOOD";
        }

并在HTML中提供以下警告：

    <div class="alert alert-danger" style="position: fixed" id="alert1"></div>
    <div class="alert alert-success" style="position: fixed" id="alert2"></div>

但是有几个问题。首先，一旦触发这些警报永远不会改变。并且始终存在这些警报，在触发之前不会有任何文本。

如果有人知道如何让这些警报出现并且仅在需要时消失，并且当存在以保持在固定位置时，那将是值得赞赏的。

谢谢

使用HTML5 / Bootstrap和Javascript添加动态警报（具有固定位置）？

0 个答案: