时间戳

首页 > 解决方案 > 如何使用javascript在屏幕的右半部分或左半部分随机显示刺激物（图像、div，以最简单的为准）

javascript - 如何使用javascript在屏幕的右半部分或左半部分随机显示刺激物（图像、div，以最简单的为准）

问题描述

如何使用 javascript 在屏幕的右半部分或左半部分随机显示刺激物（图像、div，以最简单的为准）。

关于让按钮点击记录反应时间的任何想法，点击哪个按钮（左或右），以及刺激呈现在哪一侧？此外，当刺激出现在右侧时，左侧按钮应为“真”，反之亦然。 

     <head>
     <style >
        .divStyleLeft {
        width: 300px;
        height: 300px;
        background-color: lightblue;
        float: left;
    }

    .divStyleRight {
        width: 300px;
        height: 300px;
        background-color: lightgreen;
        float: right;
    }

    .maxWidth {
        width: 100%;
    }

    .button {
            float: right;
        }
    .button2 {

        float: left;
    }
</style>
</head>

<body onload="presentStimulus()">

<div class="button">

<button onclick="presentStimulus()">Click Me</button>
</div>

<div class="button2">
<button onclick="presentStimulus()">Click Me </button>
</div>

<div class="maxwidth"></div>
<div id="float" class="divStyleLeft" onclick="recordClick()">
    I AM NOT FLOATING
</div>


    <script>
        let numClicks= 0;
        let timeStart = 0;
        let timeEnd = 0;


        function Trial(trialTime, sidePresented,buttonClicked,) {
            this.trialTime = trialTime;
            this.sidePresented= sidePresented;
            this.buttonClicked= buttonClicked;
        }
        let allTrials = [];
        for(x = 0; x < 12; x++)
            allTrials.push(new Trial(0,0,0));

        Trial.prototype.toString=function(){
            return this.trialTime + "ms, Side : " + this.sidePresented     + ", Reaction Time: " + this.buttonClicked
                + "<br>";
        };

        function presentStimulus() {
            const elem = document.querySelector ( '#float' );
            const min = 1;
            const max = 2;
            const v = Math.floor(Math.random() * (max - min + 1)) +    min;
            console.log ( 'Random num is ' + v + ": ", '1 will go left,    2 will go right' );
            v === 1 ?
                ( () => {
                    elem.classList = [ 'divStyleLeft' ];
                    elem.innerText = 'Hello!';
                } ) () :
                ( () =>{
                    elem.classList = [ 'divStyleRight' ];
                    elem.innerText = 'Hi!';
                } ) ();
        }

        function recordClick()
        {
            let theData = document.getElementById("#float").data;
            timeEnd = Date.now();
            allTrials[numClicks].trialTime = timeEnd - timeStart;
            allTrials[numClicks].sidePresented = theData.sidePresented;
            allTrials[numClicks].buttonClicked = theData.buttonClicked;

            if (numClicks < 11) {
                numClicks++;
                presentStimulus();
            }
            else {
                document.getElementById("float").style.visibility =     "hidden";
                let output = "";
                for (x = 0; x < allTrials.length; x++)
                    output = output + "<b>:" + (x + 1) + "</b>:" +     allTrials[x].toString();
                document.getElementById("display").innerHTML = output;
            }

        }


    </script>

<p id="display"></p>


</body>

标签： javascripthtml

解决方案

有很多方法可以解决这个问题。

如果您使用的是普通的 'ol JS，我可能会在 CSS 中创建向左或向右浮动的类，可能显示为向左或向右显示的 flex 容器，无论您的具体需要是什么（同样，有很多方法去做，考虑到你的情况，一个可能比另一个更好）。

当您确定左或右（生成一个随机数或其他）时，使用所需的类更新 DOM 元素上的类列表，使其以这种方式或那种方式运行。

对于它的价值，这是一个简单的香草 JS 示例。同样，我不知道您的具体背景，但这应该让您开始了解如何看待它。浮动可能并不理想，您可能只想隐藏/显示左侧或右侧已经存在的容器，或者实际上创建全新的 DIV 并将它们插入已知的“持有人”容器（通常只是空 div），但想法是相同的; 生成随机数，更改要隐藏/显示/移动/任何元素的类列表，如有必要，根据需要更改 innerHTML 或文本。

<html>
<head>
<style>
.divStyleLeft {
    width: 300px;
    height: 300px;
    background-color: lightblue;
    float: left;
}

.divStyleRight {
    width: 300px;
    height: 300px;
    background-color: lightgreen;
    float: right;
}

.maxWidth {
    width: 100%;
}
</style>
</head>
<body>
<button onclick="onClick()">Click Me</button>

<div class="maxwidth">
<div id="floater" class="divStyleLeft">
I AM NOT FLOATING
</div>
<div>

<script>

function onClick () {
    const elem = document.querySelector ( '#floater' );
    const min = 1;
    const max = 2;
    const v = Math.floor(Math.random() * (max - min + 1)) + min;
    console.log ( 'Random num is ' + v + ": ", '1 will go left, 2 will go right' );
    v === 1 ?
    ( () => { 
        elem.classList = [ 'divStyleLeft' ]; 
        elem.innerText = 'I am floating LEFT';
    } ) () : 
    ( () =>{ 
        elem.classList = [ 'divStyleRight' ]; 
        elem.innerText = 'I am floating RIGHT';
    } ) ();
}
</script>
</body>
</html>

推荐阅读