Question

我有一个小问题javascript（再次）。说我有一些文字，我希望它在一段时间（0.5秒）之后出现并再次点击它会立即消失（没有时间延迟）

所以我希望代码切换具有时间差的文本类

<html>
<head>
<style>
.show{display:block;}
.hide{display:none;}
</style>
<script>
function myfunc(){
the code here , 
}
</script>
</head>
<body>
<span id="text" class="hide" onclick="myfunc()">lorem ipsum dolor sit amet consecteteur</span>
</body>

我可以想到其余的css和html我需要的是javascript代码

Answer 1

你要求的东西是javascript的基础。

以下是一些供您阅读和学习的文档

timers
className（如何设置元素的类名）
getElementById
onclick event handler（保留unobtrusive - 如果可能，请避免使用内联事件处理程序）

示例| JSFiddle

我为你做了一个简单的例子来实验和学习

<强>的Javascript

//Get the references to the elements we're working on
var my_text = document.getElementById("text"),
    my_toggler = document.getElementById("toggler");

//Set timeout delay to 500 milliseconds
var delay = 500;

//Declare timer callback function
function click_callback(){
    my_text.className = "show";
}

//Have a global variable to reset the timer
var my_timer;

//Declare the onclick event handler
function text_onclick(e){
    /*
        Clear the timer so we don't create more timers
        that will trigger the callback several times
    */
    if(my_timer) clearTimeout(my_timer);

    if(my_text.className === "hide")
        my_timer = setTimeout(click_callback, delay);
    else
        my_text.className = "hide";
}

//Add the event handler to the toggler element
my_toggler.onclick = text_onclick;

<强> HTML

<div id="container">
    <div id="text" class="hide">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br />
        Etiam feugiat venenatis nulla vitae egestas.
    </div>
</div>
<div id="toggler">Toggle</div>

<强> CSS

.show{ }

.hide{
    opacity: 0; /* Using opacity to "fill" the container */
    /* display: none; Also works, but acts differently.*/
}

#container{
    border: 1px solid lightgray;
    padding: 3px 5px;
    margin-bottom: 5px;
    display: inline-block;
}

#toggler{
    text-align: center;
    border: 1px solid lightblue;
    display: block;
    padding: 5px;
    cursor: default;
    width: 50px;

    /* Make non-selectable*/
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#toggler:hover{
    background-color: #4488DD;
    border-color: lightgray;
    color: white;
}

#toggler:active{
    background-color: #66AAFF;
}

Answer 2

function myfunc()
{
    document.getElementById("text").style.visibility = 'hidden';
}

Answer 3

你应该使用这样的东西：

setTimeout(function() {
    // Do something after 0.5 seconds
    // Here you should display your text and bind the click event 
}, 500);

如何使用javascript定时和切换onclick事件

3 个答案:

示例| JSFiddle