首先告诉前端小白们这个组合的含义

组合成员	带包含义
html	文本
css	样式
JavaScript	效果

它们各司其职，我们会将html的内容用css改变它的样式，颜色大小及一切，不管它的初始模样是怎么样的都可以在这里改变，然后是JavaScript给我们的html+css的组合添加一个效果，可以是我们之前做过的满天星以及飘落雪花的视觉效果，也可以是内部有着运算的数学效果。
今天为了更好理解JavaScript，我们用这样的一个组合写一个倒计时器。
1.html文本部分

    <div class="box">
        <div class="hour" id="hour">20</div>
        <div class="s">:</div>
        <div class="min" id="min">5</div>
        <div class="s">:</div>
        <div class="sec" id="sec">10</div>
    </div>

我们将倒计时器的内容分成五个部分，三个数字和两个符号，再用一个父级元素包裹起来
class名给css用来改变具体元素的样式，而id名可以给js用来添加效果。

2.css样式部分

        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 300px;
            margin: 0 auto;
        }
        .box > * {
            float: left;
        }

首先初始化容器内外边距，然后定义容器，这里用的是直接定义宽，然后用一个选择器使父级容器的所有子级容器依次浮动；

        .hour,
        .min,
        .sec{
            width: 40px;
            height: 40px;
            background: #999;
            font-size: 20px;
            text-align: center;
            line-height: 40px;
            color: #fff;
        }
        .s{
           height: 30px;
           width: 20px;
           line-height: 30px;
           font-size: 20px;
           text-align: center;
           /* color: turquoise; */
        }

对五个子元素进行样式的编写；

3.JavaScript效果

	    var hour = document.getElementById('hour');
        var min = document.getElementById('min');
        var sec = document.getElementById('sec');

首先选中这个几个元素，

		var t = 365;
		setInterval(function(){		
					t=t-1;
					var s = parseInt(t / 3600);
					var f = parseInt((t % 3600) / 60);
					var m = t % 60;
									
					hour.innerHTML=s;
					min.innerHTML=f;
					sec.innerHTML=m;	                           
				},1000)

我们定义一个值，单位自然是秒，让这个值来倒计时，我们通过算法使它用 时、分、秒 来表示（由于是数学问题，就不多说了）将最后的值赋给上面三个对象的属性。