Home/ Questions/Q 7903573
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T09:46:43+00:00

Okay so I have a box that I made in CSS and what I

  • 0

Okay so I have a box that I made in CSS and what I want it to do is basically spin. However the part that I am lost at is, how do I control the speed at which box spins at using a range/slider?

This is my HTML Code:

<!DOCTYPE html>

<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="box.css" />
<link rel="javascript" href="spin.js" />
</head>


<body>
    <div id="box">
        <p id="text">Something goes here...</p>
    </div>
    <div id="control">
        <input id="controlo" type="range" min="10" max="50" step="5" value="25" />
    </div>
</body>
</html>

This is my CSS Code:

body{
    text-align:center;
}

#box{
    display:block;
    width:150px;
    margin:150px auto;
    padding:15px;
    text-align:center;
    border:7px solid blue;
    background:red;
    -webkit-transition: -webkit-transform 1.5s linear;
}

.eg {
 -webkit-transform: rotate(360deg);   
}

And finally the JavaScript Code:

var cur = 0;

function doit() {
    var speed = +$("#controlo").val();
    cur = (cur + speed);
    $("#box").css("-webkit-transform", "rotate(" + cur + "deg)");
}

setInterval(doit, 100);

I cant get this box to spin. I don’t know whats wrong but please help!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You’re including the JavaScript wrong.

    You should include it like this:

    <script type="text/javascript" src="spin.js"></script>

    and not like this:

    <link rel="javascript" href="spin.js" />

    You should also make sure that you’ve included jQuery before. So prepend

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    • 0