html页面标尺,canvas实现标尺.html

刻度尺

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

.ruler-wrap {

width: 100%;

max-width: 600px;

/*height: 60px;*/

line-height: 1px;

overflow: hidden;

margin: 0 auto 50px;

}

.text-input{

display: block;

width: 100px;

height: 30px;

border-radius: 5px;

background: #f6f6f6;

border: none;

text-align: center;

font-size: 14px;

color: #4142cc;

font-weight: bold;

letter-spacing: 1px;

margin: 0 auto;

}

.text-input:focus{

outline: none;

}

//调用刻度尺方法

ruler.initPlugin({

el: "ruler", //容器id

startValue: 100,

background: "#f5f5f5",

success: function(res) {

console.log(res);

}

});

//调用刻度尺方法

ruler.initPlugin({

el: "ruler2", //容器id

maxScale: 300, //最大刻度

startValue: 50, //刻度开始的初始值

region: [10, 200], //选择刻度的区间范围

background: "#2bd4bc", //刻度尺背景色

markColor: "#c968ff", //中心刻度标记颜色

success: function(res) {

console.log(res);

}

});

var rulerText3 = document.getElementById("rulerText3");

rulerText3.value = 200;

//调用刻度尺方法

ruler.initPlugin({

el: "ruler3", //容器id

height: 50, //刻度尺高度

maxScale: 300, //最大刻度

startValue: 200, //刻度开始的初始值

region: [50, 220], //选择刻度的区间范围

background: "#ffa43c", //刻度尺背景色

color: "#fff", //刻度线和字体的颜色

markColor: "#3786db", //中心刻度标记颜色

isConstant: true, //是否不断地获取值

success: function(res) {

console.log(res);

rulerText3.value = res;

}

});

一键复制

编辑

Web IDE

原始数据

按行查看

历史