js制作倒计时效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { background: url(images/23on23-01_2.jpg) no-repeat -60px -80px; } img { width: 100%; height: 100%; } div { margin: 200px; } span { display: inline-block; width: 40px; height: 40px; background-color:#fff; font-size: 20px; color: red; text-align: center; line-height: 40px; } </style> </head> <body> <div> 距离高考还有 <span class="tian">0</span> 天 <span class="hour">1</span> 时 <span class="minute">2</span> 分 <span class="second">3</span> 秒 </div> <script> // 1.获取元素 var tian = document.querySelector('.tian') //天数的盒子 var hour = document.querySelector('.hour') //小时的盒子 var minute = document.querySelector('.minute') //分钟的盒子 var second = document.querySelector('.second') //秒数的盒子 var inputTime = +new Date('2021/6/7 9:00'); // 返回的是用户输入时间总的毫秒数 countDown(); // 我们先调用一次这个函数，防止第一次刷新页面有空白 // 2.开启定时器 setInterval(countDown,1000) function countDown() { var nowTime = +new Date(); // 返回的是当前时间总的毫秒数 var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数 var t = parseInt(times/60/60/24) t = t < 10 ? '0' + t : t; tian.innerHTML = t; var h = parseInt(times / 60 / 60 % 24); //时 h = h < 10 ? '0' + h : h; hour.innerHTML = h; // 把剩余的小时给 小时黑色盒子 var m = parseInt(times / 60 % 60); // 分 m = m < 10 ? '0' + m : m; minute.innerHTML = m; var s = parseInt(times % 60); // 当前的秒 s = s < 10 ? '0' + s : s; second.innerHTML = s } </script> </body> </html>
仿新浪注册页面案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 600px; margin: 100px auto; } .message { display: inline-block; font-size: 12px; color: #999; background: url(images/mess.png) no-repeat left center; padding-left: 20px; } .wrong { color: red; background-image: url(images/wrong.png); } .right { color: green; background-image: url(images/right.png); } </style> </head> <body> <div class="register"> <input type="password" class="ipt"> <p class="message">请输入6~16位密码</p> </div> <script> var inp = document.querySelector('.ipt') var p = document.querySelector('.message') inp.onblur = function() { if(this.value.length<6 || this.value.length>16) { p.className = 'message wrong' p.innerHTML = '您的输入有误' } else { p.className = 'message right' p.innerHTML = '您输入的正确' } } </script> </body> </html>
仿淘宝固定模块和返回顶部案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .slider-bar { position: absolute; left: 50%; top: 300px; margin-left: 600px; width: 45px; height: 130px; background-color: pink; } .w { width: 1200px; margin: 10px auto; } .header { height: 150px; background-color: purple; } .banner { height: 250px; background-color: skyblue; } .main { height: 1000px; background-color: yellowgreen; } span { display: none; position: absolute; bottom: 0; } </style> </head> <body> <div class="slider-bar"> <span class="goBack">返回顶部</span> </div> <div class="header w">头部区域</div> <div class="banner w">banner区域</div> <div class="main w">主体部分</div> <script> var sliderbar = document.querySelector('.slider-bar') var banner = document.querySelector('.banner') // console.log(banner.offsetTop); var bannerTop = banner.offsetTop // 当我们侧边栏固定定位之后应该变化的数值 var sliderTop = sliderbar.offsetTop - bannerTop // 获取main主体元素 var main = document.querySelector('.main') var goBack = document.querySelector('.goBack') var mainTop = main.offsetTop // scroll页面滚动模块 document.addEventListener('scroll',function() { // window.pageYOffset页面被卷去的头部 // console.log(window.pageYOffset); // 当我们页面被卷去的头部大于等于了 172 此时 侧边栏就要改为固定定位 if(window.pageYOffset>=bannerTop) { sliderbar.style.position = 'fixed' sliderbar.style.top = sliderTop + 'px' } else{ sliderbar.style.position = 'absolute' sliderbar.style.top = '300px' } if(window.pageYOffset>=mainTop) { goBack.style.display = 'block' } else{ goBack.style.display = 'none' } }) goBack.addEventListener('click',function(){ // 里面的x,y不加单位 // window.scroll(0,0) // 因为是窗口滚动,所以目标是window animate(window, 0) }) //动画函数 function animate(obj, target, callback) { // console.log(callback); callback = function() {} 调用的时候 callback() // 先清除以前的定时器，只保留当前的一个定时器执行 clearInterval(obj.timer); obj.timer = setInterval(function() { // 步长值写到定时器的里面 // 把我们步长值改为整数 不要出现小数的问题 // var step = Math.ceil((target - obj.offsetLeft) / 10); var step = (target - window.pageYOffset) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); if (window.pageYOffset == target) { // 停止动画 本质是停止定时器 clearInterval(obj.timer); // 回调函数写到定时器结束里面 // if (callback) { // // 调用函数 // callback(); // } callback && callback(); } // 把每次加1 这个步长值改为一个慢慢变小的值 步长公式：(目标值 - 现在的位置) / 10 // obj.style.left = window.pageYOffset + step + 'px'; window.scroll(0,window.pageYOffset + step) }, 15); } </script> </body> </html>
