<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<title>jQuery+CSS3可自定义设置数值圆形温度计代码</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-size: 0.28rem;
}
.box {
background: #fff;
width: 4.8rem;
height: 4.8rem;
margin: 2rem auto;
border-radius: 50%;
position: relative;
box-shadow: 0 -0.06rem 0.06rem rgba(0, 0, 0, 0.1) inset, 0 -0.06rem 2rem rgba(0, 0, 0, 0.08) inset, 0 0 0.2rem rgba(0, 0, 0, 0.1);
}
.set-box {
text-align: center;
}
.set-box input {
height: 0.6rem;
width: 1.8rem;
text-align: center;
}
.set-box button {
height: 0.6rem;
width: 0.8rem;
}
.calibration {
position: relative;
width: 100%;
height: 100%;
}
.calibration span {
position: absolute;
margin-left: 0.22rem;
margin-top: 0.21rem;
}
.pointer {
top: 1.4rem;
left: 1.4rem;
position: absolute;
width: 2rem;
height: 2rem;
transition: 0.8s;
}
.pointer i {
position: absolute;
height: 78%;
top: 50%;
width: 0.06rem;
margin-left: -0.03rem;
background: #000;
left: 50%;
z-index: 0;
}
.pointer i:before {
position: absolute;
content: '';
width: 0;
height: 0;
left: 0;
bottom: -0.1rem;
border-top: 0.1rem solid #000;
border-left: 0.03rem solid transparent;
border-right: 0.03rem solid transparent;
}
.pointer:before {
content: '';
position: absolute;
width: 0.2rem;
height: 0.2rem;
background: #000;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.tisp {
position: absolute;
left: 0;
right: 0;
bottom: 0.32rem;
text-align: center;
}
</style>
</head>
<body>
<div class="box">
<div class="calibration"></div>
<div class="pointer">
<i></i>
</div>
<div class="tisp">℃</div>
</div>
<div class="set-box">
<input type="tel" value="" placeholder="请输入摄氏度" />
<button>设置</button>
</div>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/*--西安-水神--*/
//计算rem
//var winWidth = $(window).width();
//$('html').css('font-size',winWidth/(750/100) + 'px')
$('html').css('font-size', '50px')
/**-核心代码-**/
var obj = {
//生成环形坐标
getLocArr: function() {
var num = this.calibration.length + 1;
var arr = [];
var r = $('.box').width() / 2.4;
var du = 360 / num;
var Angle = 0; //初始角度
for (var times = 0; times < num; times++) {
var hudu = (2 * Math.PI / 360) * (du * times - Angle);
var x = Math.sin(hudu) * r + r;
var y = Math.cos(hudu) * r + r;
arr.push(x + "-" + y);
}
return arr;
},
//刻度
calibration: [22, 23, 24, 25, 26, 27, 28],
//生成刻度
elFn: function() {
//深拷贝
var arr = this.calibration.concat();
arr.reverse();
arr.unshift('');
var xy = this.getLocArr();
for (var i = 0; i < arr.length; i++) {
var left = xy[i].split('-')[0];
var top = xy[i].split('-')[1];
$('.calibration').append('<span style="left:' + left + 'px;top:' + top + 'px">' + arr[i] + '</span>')
}
},
//设置度数
setAngle: function(kd) {
if (kd == 0) {
var s = 0
} else {
var s = (kd - (obj.calibration[0] - 1)) * (360 / (obj.calibration.length + 1))
}
$('.pointer').css('transform', 'rotate(' + s + 'deg)')
}
}
//生成刻度/角度
obj.elFn();
obj.setAngle(0);
//设置摄氏度
$('button').click(function() {
var kd = $('input').val() || 0;
if (kd == 0 || kd < obj.calibration[0] || kd > obj.calibration[obj.calibration.length - 1]) {
alert('请设置正确的温度')
obj.setAngle(0);
} else {
obj.setAngle(kd, );
}
})
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
<p>来源：<a href="https://www.lanrenzhijia.com/" target="_blank">懒人</a></p>
</div>
</body>
</html>
jQuery+CSS3可自定义设置数值圆形温度计代码.zip
版权申诉
82 浏览量
2023-09-22
00:22:24
上传
评论
收藏 35KB ZIP 举报
jQuery+CSS3可自定义设置数值圆形温度计代码.zip （2个子文件） 
js 
jquery.min.js 94KB
index.html 4KB资源评论
码云笔记
- 粉丝: 2w+
- 资源: 5851
最新资源
- sap-me-nonconformance-how-to-guide-en.pdf
- sap-me-nonconformance-how-to-guide-en.pdf
- MSI3401-VB一款SOT23封装P-Channel场效应MOS管
- sap-me-mobile-how-to-guide-en.pdf
- 策略模式代码示例 Java版
- Distilling Step-by-Step与DIT.pdf
- 汉诺塔（Tower of Hanoi）python.pdf
- sap-me-message-board-how-to-guide-en.pdf
- MSI3400-VB一款SOT23封装N-Channel场效应MOS管
- sap-me-labor-tracking-how-to-guide-en.pdf
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
