Javascript melaksanakan kemahiran undur dan pop timbul effects_javascript

Dalam pembangunan bahagian hadapan, tidak dapat dielakkan untuk menggunakan kira detik. Contohnya, jika anda melakukan acara Double Eleven, anda perlu melakukan beberapa kerja publisiti setengah bulan sebelum acara bermula dan anda perlu memaklumkan kepada pengguna bila acara diskaun akan bermula. Pada masa ini, kira detik digunakan, seperti mengingatkan pengguna apabila aktiviti akan bermula pada halaman tertentu di seluruh tapak. Pada peringkat akhir acara, terutamanya apabila hanya tinggal kira-kira 1 hari sebelum acara berakhir, kira detik timbul akan digunakan. Kira detik ini ditetapkan di bahagian atas halaman utama keseluruhan tapak (sudah tentu ia juga boleh ditetapkan di tempat lain, seperti tengah halaman utama, dsb.), dan tetingkap pop timbul ditetapkan untuk hilang secara automatik selepas 10 saat terpulang kepada pengguna untuk memutuskan sama ada untuk mengklik pada halaman aktiviti yang sepadan dan membeli produk.

Sokongan teknikal diperlukan: CSS3, pustaka jQuery

Kod HTML adalah seperti berikut:

<section class="the_body">
  <div class="countdown">
    <h3>距中国雄于地球之日还有</h3>
    <div class="countdown_time">
     <span class="the_days"><i>0</i><i>3</i></span>
     <i class="date_text">天</i>
     <span class="the_hours"><i>0</i><i>7</i></span>
     <i class="date_text">时</i>
     <span class="the_minutes"><i>4</i><i>7</i></span>
     <i class="date_text">分</i>
     <span class="the_seconds"><i>1</i><i>1</i></span>
     <i class="date_text">秒</i>
    </div>
  </div>
</section>

Kod css adalah seperti berikut:

.the_body{width: 100%;max-width: 640px;min-width: 320px;margin: 0 auto;}
.countdown{background:#ffec20;padding: 10px 0;}
.countdown h3{margin:0;padding:5px 0;color:#f53544;text-align:center;font-size:14px;}
.countdown .countdown_time{display:block;width:100%;text-align:center;}
.countdown .countdown_time i{display:inline-block;position:relative;padding:0 3px;font-style:normal;background:#fff;
margin:0 2px;border-radius:3px;box-shadow:0px 1px 1px #ccc;border-bottom:1px solid #cfcfcf;font-weight
:bold;}
.countdown .countdown_time i:after{content:"";width:100%;border:1px solid #cfcfcf;border-width:1px 0 0;position:absolute;
bottom:1px;left:0;}
.countdown .countdown_time i:before{content:"";width:100%;border:1px solid #cfcfcf;border-width:1px 0 0;position:absolute;
bottom:3px;left:0;}
.countdown .countdown_time .date_text{background:transparent;font-weight:bold;box-shadow:none;
border-bottom:none;text-decoration:none;padding: 0;}
.countdown .countdown_time .date_text:after{content:"";border:none;}
.countdown .countdown_time .date_text:before{content:"";border:none;}

Kod JavaScript adalah seperti berikut:

<script>
function remaintime() {
 var date = new Date("Jan 1,2015 00:00:00");//设置倒计时结束时间
 var nowdate = new Date();//获取当前日期
 var remaintime = date.getTime() - nowdate.getTime();//获取现在到倒计时结束时间的毫秒数
 var remainday = Math.floor(remaintime / (1000 * 60 * 60 * 24));//计算求得剩余天数
 var remainhour = Math.floor((remaintime - remainday * 1000 * 60* 60 * 24)/ (1000 * 60 * 60));//计算求得剩余小时数
 var remainminute = Math.floor((remaintime - remainday * 1000 * 60* 60 * 24 - remainhour * 1000 * 60 * 60)/ (1000 * 60));//计算求得剩余分钟数
 var remainsecond = Math.floor((remaintime - remainday * 1000 * 60 * 60 * 24- remainhour * 1000 * 60 * 60 - remainminute *
    1000 * 60) / (1000));//计算求得剩余秒数
 //当剩余天数小于10时，就在其前加一个0，以下剩余小时数、分钟数与秒数与此相同
 if (remainday < 10) {
  remainday = "0" + remainday;
 }else{remainday+="";
 //当剩余天数大于10时，剩余天数为数值，这是需要将该值转换为字符串，以下的剩余小时数、分钟数与秒数与此相同
}
 if (remainhour < 10) {
  remainhour = "0" + remainhour;
 }else{remainhour+="";}
 if (remainminute < 10) {
  remainminute = "0" + remainminute;
 }else{remainminute+="";}
 if (remainsecond < 10) {
  remainsecond = "0" + remainsecond;
 }else{remainsecond+="";}
 $(".the_days i:first-child").html(remainday.substr(0, 1));
 $(".the_days i:last-child").html(remainday.substr(1, 2));
 $(".the_hours i:first-child").html(remainhour.substr(0, 1));
 $(".the_hours i:last-child").html(remainhour.substr(1, 2));
 $(".the_minutes i:first-child").html(remainminute.substr(0, 1));
 $(".the_minutes i:last-child").html(remainminute.substr(1, 2));
 $(".the_seconds i:first-child").html(remainsecond.substr(0, 1));
 $(".the_seconds i:last-child").html(remainsecond.substr(1, 2));
 setTimeout("remaintime()",1000);//设置1秒后调用remaintime函数
}
remaintime();
setTimeout(function(){$(".countdown").hide();},10000);//在首页设置的弹窗效果，在分页这段代码可以不设置
</script>

Ini adalah kesan undur yang saya tulis sendiri Sudah tentu, semua orang boleh menetapkan kesan undur mengikut pilihan mereka sendiri. Sebagai contoh, anda hanya boleh memaparkan "hari, jam, minit dan minit", tetapi saya secara peribadi merasakan bahawa tetapan "hari, jam, minit dan saat" tidak mencukupi suasana. Gaya di sini juga boleh diubah mengikut pilihan anda sendiri, tetapi kesan terakhir adalah untuk mewujudkan suasana yang berapi-api sebelum acara.

Bagi kod html, kod css dan kod JavaScript di sini, sila ambil perhatian:

Saya tidak akan menerangkan secara terperinci tentang kod 1.html Perkara utama ialah cara menyediakan dom untuk memudahkan operasi JavaScript

Kod 2.css, di sini terutamanya menggunakan kelas pseudo :before dan :after untuk menetapkan kesan tiga dimensi nilai undur

3. Kod JavaScript juga merupakan fungsi yang sangat mudah Di sini anda perlu menukar masa yang tinggal kepada rentetan untuk memudahkan pemintasan dan paparan rentetan. Selain itu, gunakan fungsi setTimeout untuk menetapkan fungsi yang akan dilaksanakan setiap 1 saat untuk memaparkan masa yang tinggal secara dinamik Sudah tentu, anda juga boleh menggunakan fungsi setInterval Kesan kedua-dua tetapan fungsi ini pada dasarnya adalah sama.

Pada ketika ini, kesan kira detik mudah dicipta. Jika anda ingin menetapkan undur tetingkap timbul pada halaman utama, anda boleh menetapkan latar belakang menjadi lebih sejuk untuk menarik pengguna mengklik, dan tetapkan tetingkap pop timbul untuk hilang secara automatik selepas 10 saat (atau tetapkan butang tutup, dsb. .).

Terdapat banyak cara untuk melaksanakan kira detik ini saya akan perkenalkan di sini dahulu dan akan terus meringkaskannya apabila saya mempunyai masa.

Di atas adalah keseluruhan kandungan artikel ini saya harap ia akan membantu semua orang dalam memahami javascript.