-
- Ocio 2020-07-30
math.round四舍五入
- 0赞 · 0采集
-
- VictoryLang 2020-07-05
并没有出现老师的小数闪烁情况，但是出现了多小数形式的current值，所以为了完善，避免复现BUG，还是使用了Math.round函数
- 0赞 · 0采集
-
- 林疏雪正是在下 2019-11-07
获取任意值属性封装函数，敲在本地运行记录验证
- 0赞 · 0采集
-
- little慕慕 2019-08-10
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>More</title>
<style type="text/css">
body, ul, li, span {
margin: 0;
padding: 0;
}
ul {
list-style: none;
padding-left: 0;
}
ul li {
background-color: red;
width: 200px;
height: 100px;
margin-bottom: 20px;
border: 4px solid black;
}
#li3 {
filter: alpha(opacity=30);/*针对IE设置透明度*/
opacity: 0.3;/*针对火狐/chrome浏览器*/
}
</style>
<script>
window.onload = function() {
// var aLi = document.getElementsByTagName("li");
// for(var i=0;i<aLi.length;i++){
// aLi[i].timer = null;
// aLi[i].onmouseover = function() {
// startMove(this, 400);
// };
// aLi[i].onmouseout = function() {
// startMove(this, 200);
// }
// }
var li1=document.getElementById("li1");
var li2=document.getElementById("li2");
var li3=document.getElementById("li3");
li1.onmouseover=function(){
startMove(this,'width',400);
}
li1.onmouseout=function(){
startMove(this,'width',200);
}
li2.onmouseover=function(){
startMove(this,'height',200);
}
li2.onmouseout=function(){
startMove(this,'height',100);
}
li3.onmouseover=function(){
startMove(this,'opacity',100);
}
li3.onmouseout=function(){
startMove(this,'opacity',30);
}
}
function getStyle(obj,attr) {
if(obj.currentStyle){//IE浏览器
return obj.currentStyle[attr];
}
else{//firefox浏览器
return getComputedStyle(obj,false)[attr];
}
}
function startMove(obj,attr,liTa) {
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var icur=null;
if(attr=='opacity'){
icur=Math.round(parseFloat(getStyle(obj,attr))*100);
}
else{
icur=parseInt(getStyle(obj,attr));
}
var speed = (liTa-icur)/8;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if (icur == liTa) {
clearInterval(obj.timer);
}
else {
if(attr=='opacity'){
obj.style.filter='alpha(opacity:'+(icur+speed)+')';
obj.style.opacity=(icur+speed)/100;
}
else{
obj.style[attr] = icur+speed+'px';
}
}
},30)
}
</script>
</head>
<body>
<ul>
<li id="li1"></li>
<li id="li2"></li>
<li id="li3"></li>
</ul>
</body>
</html>
- 0赞 · 0采集
-
- 慕粉0815224883 2019-04-01
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> p标签</title> <style type='text/css'> *{ margin:0px; padding:0px; } li{ width:200px; height:100px; margin:20px; list-style:none; background-color:yellow; opacity: 0.3; filter: alpha(opacity:30); } </style> <script type='text/javascript'> window.onload=function(){ var Li1=document.getElementById('li1'); var Li2=document.getElementById('li2'); Li1.onmouseover=function(){ startMove(this,'opacity',100); } Li1.onmouseout=function(){ startMove(this,'opacity',30); } Li2.onmouseover=function(){ startMove(this,'height',400); } Li2.onmouseout=function(){ startMove(this,'height',100); } } function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } } function startMove(obj,attr,target){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var icur=null; if(attr=='opacity'){ icur = Math.round(parseFloat(getStyle(obj,attr))*100); } else{ icur=parseInt(getStyle(obj,attr)); } var speed=(target-icur)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(icur==target){ clearInterval(obj.timer); } else{ if(attr == 'opacity'){ obj.style.filter='alpha(opacity:'+icur+speed+')'; obj.style.opacity=(icur+speed)/100; } else{ obj.style[attr]=icur+speed+'px'; } } },30) } </script> </head> <body> <ul> <li id='li1'></li> <li id='li2'></li> </ul> </body> </html>- 0赞 · 0采集
-
- 花花世界11 2018-12-03
window.onload = function(){ var Li1 = document.getElementById('li1'); Li1.timer = null; // 为 需要运动的对象添加一个计时器 // var Li2 = document.getElementById('li2'); // var Li3 = document.getElementById('li3'); // alert(Math.round(0.3000009)); Li1.onmouseover = function(){ StartMove(this, 'opacity', 100); }; Li1.onmouseout = function(){ StartMove(this, 'opacity', 30); }; }; // var timer = null; 多物体运动时不要使用公用值 // var alpha = 30; function StartMove(obj, attr, Target){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var attr_cur = 0; // 需要改变的属性的当前值 if (attr === 'opacity'){ attr_cur = parseFloat(getStyle(obj, attr)) * 100; } else { attr_cur = parseInt(getStyle(obj, attr)); } var speed = (Target - attr_cur) / 8; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); if (attr_cur === Target){ clearInterval(obj.timer); } else if (attr === 'opacity'){ obj.style[attr] = (attr_cur + speed)/100; obj.style.filter = 'Alpha(opacity = '+ (attr_cur + speed) +')'; } else { obj.style[attr] = attr_cur + speed + 'px'; } },30); }; function getStyle(obj, attr){ if (obj.currentStyle){ return obj.currentStyle[attr]; } else { return window.getComputedStyle(obj, false)[attr]; } }我用的Html5 没有遇到透明度小数不精确的现象，我通过输出观察发现透明度确实有不精确的现象，但是经过下一次变化后小数就会被清除掉。
- 2赞 · 1采集
-
- ParseDark 2018-08-26
针对IE设置透明度： obj.style.filter = "alpha(opacity: 100)"
针对火狐/chrome浏览器： obj.style.opacity = 0.2
- 1赞 · 1采集
-
- 慕粉2308425049 2018-07-17
parseInt（）获取整数
透明度都是以小数get到，
透明度没有单位
obj.style.filter = 'alpha(opacity:' + (当前值+变量) + ')'; //针对IE浏览器
obj.style.opacity = (当前值，+ 变量）/100;//针对Firefox和Chrome浏览器
Math.round()//四舍五入的函数
- 1赞 · 1采集
-
- 阿宅娘 2018-05-24
getStyle()方法：opacity(透明度)需另外判断
function startMove3(e,attr,iTarget){
clearInterval(e.timer3);
e.timer3 = setInterval(function(){
var icur=0;
if(attr == 'opacity'){
icur=Math.round(parseFloat(getStyle(e,attr))*100);
}
else{
icur=parseInt(getStyle(e,attr));
}
var speed=(iTarget-icur)/10;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(icur == iTarget){
clearInterval(e.timer3);
}
else{
if(attr == 'opacity'){
e.style.opacity=(icur+speed)/100;
e.style.filter="alpha(opacity:"+icur+speed+")";
}
else{
e.style[attr]=icur+speed+"px";
// e.style.height=icur+speed+"px";
}
}
},50)
}
//获取样式,兼容处理
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}
else{
return getComputedStyle(obj,false)[attr];
}
}- 0赞 · 0采集
-
- GYNexus 2018-03-23
1、获取当前透明度不用parseInt<br> 2、设置透明度要考虑兼容<br> obj.style.filter='alpha(opacity:'+(当前透明度+变化速度)+')';<br> obj.style.opacity=(当前透明度+变化速度)/100;<br>针对chrome和火狐浏览器 3、透明度不加“px”<br> 在使用parseInt()时处理透明度小数时,会有影响 单位设置<br> 相应位置进行判断 IE/FireFox<br> 取相应值 Math.round()四舍五入取整数值<br> Math.round(parseFloat(getStyle(obj,attr))*100)
- 0赞 · 0采集
-
- 白鹿max 2018-01-15
- 四舍五入
-
截图0赞 · 0采集
-
- 慕网老油条丶 2018-01-01
- 那个IEEE754的出错解释，完全没有指出根本原因，看起来仅仅是搬运别人的知识。 实际上出错的根本原因是，十进制小数不一定能等价地转换为二进制小数。 比如：0.7转化为二进制小数是0.101100110011001100...这个无限循环小数。 所以当0.7存入内存中时，实际上存入的是类似0.70000...00001，7后面有多少个零取决于所使用语言的浮点数精度。
- 0赞 · 0采集
-
- 慕仙5237505 2017-11-01
- 透明度
-
截图0赞 · 0采集
-
- 慕仙5237505 2017-11-01
- 记住透明度变化
-
截图0赞 · 0采集
-
- qq_与陌Dance_0 2017-08-17
- 解决startMove(obj,attr,iTarget)函数的两个bug： 1、当attr为opacity时，parseInt获取值可能永远为0；因此代码修改为： if(attr == "opacity"){ icur = Math.round(parseFloat(getStyle(obj,attr)) * 100; } else{ icur = parseInt(getStyle(obj,attr), 10); } 2、当attr为opacity或其他非px单位的属性时，obj.style[attr]显示值单位异常；因此代码修改为： if(attr == "opacity"){ obj.style.filter = "filter:alpha(opacity:" + (icur + speed) + ")"; obj.style.opacity = (icur + speed) / 100; } else{ obj.style[attr] = icur + speed + "px"; } 注意： 1、计算机不能精确处理浮点数，因此浮点数一般不用来做比较或一些精确度要求较高的计算；因此此处的parseFloat值还要用Math.round四舍五入一下。 2、parseInt的第二个参数（表示进制）最好写上。如果第一个参数是字符串，那么parseInt会将"0x"开头的string当做16进制数、将"0"开头的string当做8进制数。 3、parseInt和parseFloat要求string的第一个字符必须为数字，否则返回NaN；parseInt会将string中的第一个非数字字符及其后的字符全部丢弃，而parseFloat会将string中的第一个非数字字符（除了第一个点号及点号后紧跟的数字）及其后的字符全部丢弃。 4、当+运算的一边为字符串时，会优先执行字符串连接操作，因此有数学运算时最好用括号包含或用另一个变量表示。
- 0赞 · 0采集
-
- 无赖7 2017-04-03
- parseFloat()方法的精确度不够严格，需要做处理。 处理方法可以使用四舍五入法，Math.round();
- 0赞 · 1采集
-
- 精慕门3383071 2017-03-30
- 四舍五入处理
-
截图0赞 · 0采集
-
- 精慕门3383071 2017-03-30
- 四舍五入处理
-
截图0赞 · 0采集
-
- 精慕门3383071 2017-03-30
- 获取的时候需要做判断，设置的时候也需要做判断
-
截图0赞 · 1采集
-
- 精慕门3383071 2017-03-30
- getStyle不支持opacity变化，所以这里需要做判断
-
截图0赞 · 1采集
-
- 慕粉2339543979 2017-03-26
- js动画
-
截图0赞 · 0采集
-
- 夜莺z 2017-03-16
- Math.round();四舍五入
- 0赞 · 0采集
-
- 夜莺z 2017-03-16
- 计算机不能严格精确的存储小数 如0.07*100，不能得到7，而是7.00000000000001
-
截图0赞 · 0采集
-
- qq_鹿鸣飞_0 2017-03-07
- 改变大小
-
截图0赞 · 0采集
-
- 白小九 2017-03-07
- 解决startMove(obj,attr,iTarget)函数的两个bug： 1、当attr为opacity时，parseInt获取值可能永远为0；因此代码修改为： if(attr == "opacity"){ icur = Math.round(parseFloat(getStyle(obj,attr)) * 100; } else{ icur = parseInt(getStyle(obj,attr), 10); } 2、当attr为opacity或其他非px单位的属性时，obj.style[attr]显示值单位异常；因此代码修改为： if(attr == "opacity"){ obj.style.filter = "filter:alpha(opacity:" + (icur + speed) + ")"; obj.style.opacity = (icur + speed) / 100; } else{ obj.style[attr] = icur + speed + "px"; } 注意： 1、计算机不能精确处理浮点数，因此浮点数一般不用来做比较或一些精确度要求较高的计算；因此此处的parseFloat值还要用Math.round四舍五入一下。 2、parseInt的第二个参数（表示进制）最好写上。如果第一个参数是字符串，那么parseInt会将"0x"开头的string当做16进制数、将"0"开头的string当做8进制数。 3、parseInt和parseFloat要求string的第一个字符必须为数字，否则返回NaN；parseInt会将string中的第一个非数字字符及其后的字符全部丢弃，而parseFloat会将string中的第一个非数字字符（除了第一个点号及点号后紧跟的数字）及其后的字符全部丢弃。 4、当+运算的一边为字符串时，会优先执行字符串连接操作，因此有数学运算时最好用括号包含或用另一个变量表示。
-
截图1赞 · 1采集
-
- 慕粉1812221138 2017-02-19
- JS动画基本模板
-
截图0赞 · 0采集
-
- 慕后端7861320 2016-12-09
- Math.round();四舍五入取整
- 0赞 · 0采集
-
- 慕粉4215582 2016-12-06
- getStyle parseFloat
- 0赞 · 0采集
-
- 菲尔活该 2016-12-06
- 由于计算机不能很精确的存储浮点数，使用parseFloat时，有时会出现一堆小数。 解决：Math.round()四舍五入
- 0赞 · 0采集
-
- 范米粒 2016-11-30
- 任意属性变化
-
截图0赞 · 0采集
