-1

我对 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 代码

4

3 回答 3

2

你要求的东西对javascript来说是非常基本的。

这里有一些文档供您阅读和学习

示例 | 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;
}
于 2013-09-30T16:23:22.633 回答
0

你应该使用这样的东西：

setTimeout(function() {
    // Do something after 0.5 seconds
    // Here you should display your text and bind the click event 
}, 500);
于 2013-09-30T16:13:02.133 回答
0 
function myfunc()
{
    document.getElementById("text").style.visibility = 'hidden';
}
于 2013-09-30T16:03:44.567 回答