加载弹出模式的延迟

时间:2017-03-08 20:02:18

标签: javascript jquery modal-dialog

我喜欢这个脚本,因为它很简单,但我是JS的新手,我不知道如何在显示“欢迎”问候之前添加5秒延迟。

var hasSeenGreeting = localStorage.getItem("greeting");

if(!hasSeenGreeting){
       document.getElementById("welcome").style.display = "block";
       localStorage.setItem("greeting", "true");
}

document.querySelector(".button").addEventListener("click", function(){
  localStorage.removeItem("greeting", "true");
});

1 个答案:

答案 0 :(得分:3)

您可以使用setTimeout()。 Here is a reference link

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:weightSum="1">
<!-- A CardView that contains a TextView -->
<android.support.v7.widget.CardView
    android:id="@+id/card_view"
    android:layout_width="375dp"
    android:layout_height="wrap_content"
    android:layout_margin="4dp"
    android:backgroundTint="#eeeeee"
    card_view:cardCornerRadius="4dp">

    <TextView
        android:id="@+id/serNo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:text="number"
        android:layout_margin="20dp"
        android:textColor="@color/cardview_dark_background" />

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center">

        <EditText
            android:id="@+id/ip1_text"
            android:layout_width="100dp"
            android:layout_height="30dp"
            android:layout_alignParentLeft="true"
            android:layout_marginTop="20dp"
            android:background="@color/cardview_light_background"
            android:inputType="number"
            android:maxLength="2" />

        <EditText
            android:id="@+id/ip3_text"
            android:layout_width="80dp"
            android:layout_height="30dp"
            android:layout_below="@+id/ip1_text"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="10dp"
            android:background="@color/cardview_light_background"
            android:inputType="number"
            android:maxLength="1" />

        <EditText
            android:id="@+id/ip2_text"
            android:layout_width="100dp"
            android:layout_height="30dp"
            android:layout_marginLeft="20dp"
            android:layout_marginTop="20dp"
            android:layout_toRightOf="@+id/ip1_text"
            android:background="@color/cardview_light_background"
            android:inputType="number"
            android:maxLength="2" />

        <EditText
            android:id="@+id/ip4_text"
            android:layout_width="80dp"
            android:layout_height="30dp"
            android:layout_below="@+id/ip2_text"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="40dp"
            android:layout_marginTop="10dp"
            android:layout_toRightOf="@+id/ip3_text"
            android:background="@color/cardview_light_background"
            android:inputType="number"
            android:maxLength="1" />
    </RelativeLayout>
</android.support.v7.widget.CardView>
</LinearLayout>

在上面的代码中,我将匿名函数传递给setTimeout调用。在该函数内部,我执行代码来设置welcome div的显示属性 - 以及设置localStorage值。

另一种实现此目的的方法是将这些调用放在自己的函数中,然后在setTimeout中调用它。例如:

setTimout(function() {
    document.getElementById("welcome").style.display = "block";
    localStorage.setItem("greeting", "true");
}, 5000); // 5 second delay in ms.

Here is a JS Fiddle for reference

祝你好运!