var inner = document.getElementsByClassName('inner'); // onmouseover="mOver(this)" onmouseout="mOut(this)" // aEle[i].style.transform = "rotateY(" + (i * (360 / aEle.length)) + "deg) translateZ(" + radius + "px)"; var int = self.setInterval("mOut()",3000); function mOut(){ inner.style.transform="rotateY("+360+"deg)"; inner.style.transition = "transform 3s"; }优化代码
时间: 2023-08-03 09:07:24 浏览: 141
首先,`setInterval`中传递的参数应该是一个函数名或函数表达式,而不是一个字符串。所以应该将`setInterval`的参数改为`setInterval(mOut, 3000)`。
另外,`getElementsByClassName`返回的是一个HTMLCollection,而不是一个单独的元素。因此,应该使用`inner[0]`来获取第一个匹配的元素。
最后,`mOut`函数中的`rotateY`值应该是相对于当前的值进行旋转,而不是固定的360度。所以应该先获取当前的rotateY值,再加上360度。
优化后的代码如下:
```
var inner = document.getElementsByClassName('inner')[0];
var int = setInterval(mOut, 3000);
function mOut() {
var currentRotation = parseInt(inner.style.transform.replace(/[^0-9\-]/g, ''));
inner.style.transform = "rotateY(" + (currentRotation + 360) + "deg)";
inner.style.transition = "transform 3s";
}
```
相关问题
var total=0.0; //加 //获取所有+按钮 var increment = document.getElementsByClassName("increase"); for (var i = 0; i < increment.length; i++) { //为a标签添加index属性,用于记录下标 increment[i].index = i; //点击+数量增加的功能函数 increment[i].onclick = function () { var flag = this.index; //获取当前按钮对应的数量框 var q = document.getElementsByClassName("quantity")[flag]; var newvalue = parseInt(q.value) + 1; q.setAttribute('value', newvalue); } } //减 //获取所有-按钮 var decrement=document.getElementsByClassName('decrease'); //点击-数量减少的功能函数 for(var j=0;j<decrement.length;j++) { decrement[j].index=j; decrement[j].onclick=function() { var flag=this.index; //获取当前a标签对应的那个数量框 var q=document.getElementsByClassName("quantity")[flag]; if(parseInt(q.value)>1) { var newvalue=parseInt(q.value)-1; q.setAttribute('value',newvalue); } } }能否根据这个加减写一个小计代码
可以,根据上述加减代码,可以在数量框的HTML代码中添加一个小计标签,然后在加减按钮的点击函数中,根据当前数量框的值和商品单价计算小计,并将小计的值设置为小计标签的文本内容。以下是示例代码:
HTML代码:
```html
<div class="item">
<span class="name">商品名称</span>
<span class="price">商品单价</span>
<div class="quantity-wrapper">
<a href="#" class="decrease">-</a>
<input type="text" class="quantity" value="1">
<a href="#" class="increase">+</a>
</div>
<span class="subtotal">小计</span>
</div>
```
JavaScript代码:
```javascript
var increment = document.getElementsByClassName("increase");
var decrement = document.getElementsByClassName("decrease");
var quantity = document.getElementsByClassName("quantity");
var price = document.getElementsByClassName("price");
var subtotal = document.getElementsByClassName("subtotal");
for (var i = 0; i < increment.length; i++) {
increment[i].index = i;
increment[i].onclick = function() {
var flag = this.index;
var q = quantity[flag];
var p = price[flag].textContent;
var s = subtotal[flag];
var newvalue = parseInt(q.value) + 1;
q.setAttribute("value", newvalue);
s.textContent = (newvalue * parseFloat(p)).toFixed(2);
calculateTotal();
};
}
for (var j = 0; j < decrement.length; j++) {
decrement[j].index = j;
decrement[j].onclick = function() {
var flag = this.index;
var q = quantity[flag];
var p = price[flag].textContent;
var s = subtotal[flag];
if (parseInt(q.value) > 1) {
var newvalue = parseInt(q.value) - 1;
q.setAttribute("value", newvalue);
s.textContent = (newvalue * parseFloat(p)).toFixed(2);
calculateTotal();
}
};
}
function calculateTotal() {
var total = 0.0;
for (var k = 0; k < subtotal.length; k++) {
total += parseFloat(subtotal[k].textContent);
}
document.getElementById("total").textContent = total.toFixed(2);
}
```
这段代码实现了商品数量的加减以及每个商品的小计计算,同时还有一个总计的计算函数。注意,需要将每个商品的单价在HTML代码中设置为一个文本节点,例如`<span class="price">10.00</span>`,这样在JavaScript代码中才能通过`textContent`属性获取到它的值。小计和总计需要在计算时进行四舍五入,保留两位小数,可以使用`toFixed`方法实现。
<div class="hf"> <ul class="hf-ul"> <li class="hf-li"><img src="images/1.jpg"></li> <li class="hf-li"><img src="images/2.jpg"></li> <li class="hf-li"><img src="images/4.jpg"></li> </ul> </div> var div1=document.querySelector(".hf") var btn=document.querySelector("button") var lis=document.getElementsByClassName('hf-li') //给按钮绑定点击事件 btn.onclick=function(){ //获取当前div对象的高度 var h1=div1.style.height //判断当前div的高度是否等于260px if(h1=="260px"){ div1.style.height="0px" document.querySelector("#MainMenu").style.margin="0 0 0 0" }else{ div1.style.height="260px" document.querySelector("#MainMenu").style.margin="260px 0 0 0" } } //遍历li对象 for(var i=0;i<lis.length;i++){ //给每个li对象绑定点击事件 lis[i].onclick=function(){ //获取当前li对象中的图片路径 var imgUrl=this.lastElementChild.getAttribute("src") //给body对象设置背景图片 document.body.style="background:url("+imgUrl+") ;background-size: 100% 100%;" document.querySelector("#MainMenu").style.margin="0 0 0 0" //让div对象隐藏 div1.style.height="0px" } }这段代码的意思
这段代码是一段 JavaScript 代码,主要实现以下功能:
1. 当点击按钮时,如果当前 div 的高度为 260px,则将其高度设为 0px,并将 id 为 MainMenu 的元素的 margin 设为 0 0 0 0;否则将其高度设为 260px,并将 id 为 MainMenu 的元素的 margin 设为 260px 0 0 0。
2. 遍历所有 class 为 hf-li 的 li 元素,并给每个 li 元素绑定点击事件。当点击某个 li 元素时,获取该 li 元素下的图片路径,并将 body 元素的背景图片设为该路径所对应的图片,并将 id 为 MainMenu 的元素的 margin 设为 0 0 0 0,同时将 div 元素设为隐藏(高度为 0px)。
阅读全文