sdasda
2 years ago by montherqat in JavaScript
Raw Download 
<!DOCTYPE HTML>
<html>
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@300&display=swap" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .div {
            color: rgb(40, 165, 216);
            display: flex;
            justify-content: center;
            text-align: center;
            font-size: 30px;
            margin-top: 0px;
        }
        .all {
            background-color: white;
            border-radius: 12px;
            width: 30%;
            margin-top: 0px;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        }
        .a {
            display: grid;
            gap: 10px;
        }
        .b {
            display: grid;
            gap: 14px;
        }
        .container {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
            margin-bottom: 25px;
        }
        .header {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .number {
            border-radius: 12px;
            padding: 4px;
            background-color: rgba(218, 217, 217, 0.284);
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
        integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <script src="https://code.jquery.com/jquery-3.6.0.js"
        integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
</head>
<body>
    <section class="droid-arabic-kufi">
        <div class="div" id="demo"></div>
        <script>
            const demo = $("#demo")
            // Set the date we're counting down to
            var countDownDate = new Date("jun 19, 2022 13:00:00").getTime();
            // Update the count down every 1 second
            var x = setInterval(function () {
                demo.html("")
                // Get today's date and time
                var now = new Date().getTime();
                // Find the distance between now and the count down date
                var distance = countDownDate - now;
                // Time calculations for days, hours, minutes and seconds
                var days = Math.floor(distance / (1000 * 60 * 60 * 24));
                var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                var seconds = Math.floor((distance % (1000 * 60)) / 1000);
                // Output the result in an element with id="demo" 
                // document.getElementById("demo").innerHTML = " الوقت المتبقي لتخرج دفعة وطن<br> " + days + "D " + hours + "H "
                //     + minutes + "M " + seconds + "S";
                var div = $(
                    `
                    <div class="all">
                        <div class="header">
                            <i class="fa fa-graduation-cap" aria-hidden="true"></i>   
                            <p>الوقت المتبقي لتخرج دفعة وطن</p>
                            </div>
                          <div class="container">
                            <div class="a">
                             <div class="number">Day</div>
                             <div class="number">${days}</div>
                            </div>
                            <div class="b">
                             <div>:</div>   
                             <div>:</div>   
                            </div>
                            <div class="a">
                             <div class="number">Hou</div>
                             <div class="number">${hours}</div>
                            </div>
                            <div class="b">
                             <div>:</div>   
                             <div>:</div>   
                            </div>
                            <div class="a">
                             <div class="number">Min</div>
                             <div class="number">${minutes}</div>
                            </div>
                            <div class="b">
                             <div>:</div>   
                             <div>:</div>   
                            </div>
                            <div class="a">
                             <div class="number">Sec</div>
                             <div class="number">${seconds}</div>   
                            </div>
                          </div>
                          
                    </div>
                        `
                )
                demo.append(div)
                // If the count down is over, write some text 
                if (distance < 0) {
                    clearInterval(x);
                    demo.html("")
                    let div = $(
                        `
                    <div class="all" style="padding:10px">
                        <i class="fa fa-graduation-cap" aria-hidden="true"></i>   
                        مبارك تخرجكم
                        </div>
                        `
                    )
                    demo.append(div)
                    // document.getElementById("demo").innerHTML = "مبارك تخرجكم";
                }
            }, 1000);
        </script>
</body>
</html>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
Recent Public Pastes
bootp - 12 hours ago Untitled - 18 hours ago Untitled - 18 hours ago Untitled - 18 hours ago Untitled - 1 day ago Subscription - 1 day ago Untitled - 2 days ago Tets - 2 days ago markplace-items-73463434 - 3 days ago ПРИВАТНАЯ ВИДЕО КОЛЛЕКЦИЯ С МАЛОЛЕТКАМИ СЛИВ МАЛОЛЕТОК ШКОЛЬНИЦ МОЛОДЫЕ МОДЕЛИ - 3 days ago