Built with blockbuilder.org
xxxxxxxxxx
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body {
margin:0;
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
},
button {
margin: 0 7px 0 0;
background-color: #f5f5f5;
border: 1px solid #dedede;
border-top: 1px solid red;
border-left: 1px solid pink;
fill: blue;
border: solid thin green;
font-size: 18px;
line-height: 130%;
text-decoration: none;
font-weight: bold;
color: #565656;
cursor: pointer;
},
.countdown{
width: 150px;
height: 150px;
font-size: 5em;
font-weight: bold;
}
</style>
</head>
<body>
<script type="text/javascript">
var body = d3.select("body"), duration = 5000;
body.append("div").append("input")
.attr("type", "button")
.attr("class", "countdown")
.attr("value", "0")
.style("width", "150px")
.transition().duration(duration).ease(d3.easeLinear)
.style("width", "400px")
.attr("value", "9");
body.append("div").append("input")
.attr("type", "button")
.attr("class", "countdown")
.attr("value", "0")
.transition().duration(duration).ease(d3.easeLinear)
.styleTween("width", widthTween)
.attrTween("value", valueTween);
function widthTween(a){
var interpolate = d3.scaleQuantize()
.domain([0, 1])
.range([50, 200, 250, 350, 400]);
return function(t){
return interpolate(t) + "px";
};
}
function valueTween(){
var interpolate = d3.scaleQuantize()
.domain([0, 1])
.range([1, 2, 3, 4, 5, 6, 7, 8, 9]);
return function(t){
return interpolate(t);
};
}
</script>
</body>
https://d3js.org/d3.v4.min.js