2024年11月05日

你可能不知道的10个CSS3中的隐藏特性

CSS3为web设计增添了许多令人惊叹的特性，这其中你经常会用到box-shadow（图层阴影），border-radius（边框圆角），transform（变形）这一类受欢迎的常用特性。但是还有一些强大的功能，你可能没有接触到，它们就象是埋藏在地下的宝藏，静静等待着你的发掘。

W3C正不断致力于为设计师、开发人员和用户开发新的CSS特性，下面我们就来看看你可能不知道的CSS3中的10个隐藏特性：

1.Tab尺寸控制

2024年11月05日

web前端入门到实战:元素显示隐藏的9种思路

在网页制作中，元素的显示隐藏是非常常见的需求。本文将介绍元素显示隐藏的9种思路

display

对于元素显隐来说，最常见就是display:none | display:block，但是使用这种方法有个问题，元素的display属性在隐藏前并不都是block，还有可能是inline、inline-block等

注意：如果要适用于任何元素需要提前储存元素的display值

2024年11月05日

CSS必知|重点属性overflow|实践技巧|温故知新

学海无涯，不要沉浸在知识的海洋里，迷失自己。

要知道自己想要什么，抓住重点，不忘初心。

这个世界上百分之20的人，掌握着百分之80的财富。

接下来一系列教程，就带领大家抓住重点，一起做那百分之20的人。

往期知识点回顾：

2024年11月05日

CSS 这些你冷落的属性，其实很好用能极大提升效率

一个成功的Web App必须有良好的用户体验。当我们谈及改善用户体验时，你会想到什么？

2024年11月05日

12 个 CSS 高级技巧汇总（css高级样式）

喜欢的可以收藏转发加关注

下面这些CSS高级技巧，一般人我可不告诉他哦。

使用 :not() 在菜单上应用/取消应用边框给body添加行高所有一切都垂直居中逗号分隔的列表使用负的 nth-child 选择项目对图标使用SVG优化显示文本对纯CSS滑块使用 max-height继承 box-sizing表格单元格等宽用Flexbox摆脱外边距的各种hack使用属性选择器用于空链接

使用 :not() 在菜单上应用/取消应用边框

2024年11月05日

js函数--倒计时模块+无缝滚动（js实现倒计时效果）

倒计时

效果：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>倒计时函数</title>
    <script>
    var timer=(function{
        return function (json){
 if(json.currentTime){
 var now=new Date;
 var year=now.getFullYear;//返回年份（4位数字）
 var month=now.getMonth+1;//返回月份（0-11，所以+1）
 var day=now.getDate;//返回某天（1-31）
 var h=now.getHours;//返回小时（0-23）
 var m=now.getMinutes;//返回分钟（0-59）
 var s=now.getSeconds;//返回秒数（0-59）
 //补O
 m=m<10?'0'+m:m;
 s=s<10?'0'+s:s;
 var weekday=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
 document.getElementById(json.objId).innerHTML=year+'年'+month+'月'+day+'日'+weekday[now.getDay()]+'   '+h+':'+m+':'+s;
 setTimeout(function{timer(json)},1000);
 }else{
 var endtime=new Date(json.endtime);//结束时间
 var nowtime = new Date;//当前时间
 var lefttime=parseInt((endtime.getTime-nowtime.getTime)/1000); //计算差的秒数
 //一天24小时  一小时60分钟  一分钟60秒
 d=parseInt(lefttime/3600/24);
 h=parseInt((lefttime/3600)%24);
 m=parseInt((lefttime/60)%60);
 s=parseInt(lefttime%60);
 document.getElementById(json.objId).innerHTML=d+"天"+h+"小时"+m+"分"+s+"秒";
 if(lefttime>0){setTimeout(function{timer(json)},1000);}
 }
        }
    })
        
        window.onload=function{
 timer({
 currentTime:true,
 objId:'thisTime'
 })
 timer({
 objId:'countDown',
 endtime:"2016/9/1,18:00"
 })
        }
    </script>
</head>
<body>
    <b>当前时间:</b> <span id="thisTime"></span><br/><br/>
    <b>距离2016/9/1 18:00还有:</b> <span id="countDown"></span>
</body>
</html>

2024年11月05日