JS实现跑马灯效果

JS实现跑马灯效果

上课无聊，没事写一个玩一玩，使用红黄绿三种也是切换，用js写一个颜色判断的函数，再用`setInterval('color()',100);`调用函数，100为0.1秒，下面是代码，想要看效果的戳这里www.rain1024.com-js77

下面是代码

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;style&gt;
    .content{
        background-color: red;
        width: 200px;
        height: 200px;
        margin: auto;
        margin-left: 50px;
        color: chartreuse;
        float:left;
    }
    .content2{
        background-color: red;
        width: 200px;
        height: 200px;
        margin: auto;
        color: chartreuse;
    }
    .figure{
        width: 800px;
        height: 100px;
        /*background-color: #FFFFFF;*/
    }
    .all{
        width: 900px;
        height: 200px;
        margin: auto;
    }
&lt;/style&gt;
&lt;script&gt;
    //    设置每秒刷新一次
    function myshuaxing() {
        window.location.reload();
    }
//    setTimeout('fun()',2000);
    setInterval('color()',100);
//    setInterval('color_out()',1000);
//    setTimeout('color_out()',1000);
&lt;/script&gt;
&lt;script type="text/javascript"&gt;
//    setTimeout('color_over()',2000);
//    setTimeout('color_out()',2000);
//    alert('123');
    function fun(value){
        var value = prompt('324');
        if(value==1){
            document.getElementById('state').innerHTML = 'true';
        }else{
            document.getElementById('state').innerHTML = 'false';
        }
    }
    function color(){
        var show = document.getElementById('show').innerText;
        var sum = document.getElementById('number').innerText;
        if(show==1){
            var value = document.getElementById('content');
//        alert(value.style.backgroundColor);
            value.style.backgroundColor='red';
            document.getElementById('show').innerText = 2;
            var value = document.getElementById('content2');
            value.style.backgroundColor = '#FFFFFF';
            var value = document.getElementById('content3');
            value.style.backgroundColor = '#FFFFFF';
        }else if(show==2){
            var value = document.getElementById('content2');
//        alert(value.style.backgroundColor);
            value.style.backgroundColor='yellow';
            document.getElementById('show').innerText = 3;
            var value = document.getElementById('content');
            value.style.backgroundColor = '#FFFFFF';
            var value = document.getElementById('content3');
            value.style.backgroundColor = '#FFFFFF';
        }else{
            var value = document.getElementById('content3');
//        alert(value.style.backgroundColor);
            value.style.backgroundColor='chartreuse';
            document.getElementById('show').innerText = 1;
            var value = document.getElementById('content');
            value.style.backgroundColor = '#FFFFFF';
            var value = document.getElementById('content2');
            value.style.backgroundColor = '#FFFFFF';
        }
        sum = parseInt(sum);
        sum = sum + 1;
        document.getElementById('number').innerText = sum;
    }
    function color_over(){
//        document.getElementById('state').innerHTML = 'true';
        var value = document.getElementById('content');
        value.style.backgroundColor="blue";
    }
    function color_out(){
    //        document.getElementById('state').innerHTML = 'true';
        var value = document.getElementById('content');
        value.style.backgroundColor="red";
    }
    function counter(){
        var value1 = document.getElementById('value1').value;
        var value2 = document.getElementById('value2').value;
        var fig = document.getElementById('fig').value;
        var result = 0;
        value1 = parseFloat(value1);
        value2 = parseFloat(value2);
        if(fig==1){ //+
            result = value1 + value2;
        }else if(fig==2){ //-
            result = value1 - value2;
        }else if(fig==3){  //*
            result = value1 * value2;
        }else if(fig==4){  // /
            result = value1 / value2;
        }
        document.getElementById('result').value = result;
    }
&lt;/script&gt;
&lt;div align="center"&gt;
    &lt;label id="show" style="display: none"&gt;1&lt;/label&gt;
    已刷新次数：&lt;label id="number" &gt;0&lt;/label&gt;
&lt;label id="state" style="color: red;font-size: 30px;"&gt;&lt;/label&gt;&lt;/div&gt;
&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
&lt;div class="all"&gt;
&lt;div class="content" id="content" onmouseover="color_over();" onmouseout="color_out();"&gt;
&lt;/div&gt;
&lt;div class="content" id="content2" onmouseover="color_over();" onmouseout="color_out();"&gt;
&lt;/div&gt;
&lt;div class="content" id="content3" onmouseover="color_over();" onmouseout="color_out();"&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
&lt;/body&gt;
&lt;/html&gt;

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<style>

.content{

background-color: red;

width: 200px;

height: 200px;

margin: auto;

margin-left: 50px;

color: chartreuse;

float:left;

}

.content2{

background-color: red;

width: 200px;

height: 200px;

margin: auto;

color: chartreuse;

}

.figure{

width: 800px;

height: 100px;

/*background-color: #FFFFFF;*/

}

.all{

width: 900px;

height: 200px;

margin: auto;

}

</style>

// 设置每秒刷新一次

function myshuaxing() {

window.location.reload();

}

// setTimeout('fun()',2000);

setInterval('color()',100);

// setInterval('color_out()',1000);

// setTimeout('color_out()',1000);

</script>

// setTimeout('color_over()',2000);

// setTimeout('color_out()',2000);

// alert('123');

function fun(value){

var value = prompt('324');

if(value==1){

document.getElementById('state').innerHTML = 'true';

}else{

document.getElementById('state').innerHTML = 'false';

}

function color(){

var show = document.getElementById('show').innerText;

var sum = document.getElementById('number').innerText;

if(show==1){

var value = document.getElementById('content');

// alert(value.style.backgroundColor);

value.style.backgroundColor='red';

document.getElementById('show').innerText = 2;

var value = document.getElementById('content2');

value.style.backgroundColor = '#FFFFFF';

var value = document.getElementById('content3');

value.style.backgroundColor = '#FFFFFF';

}else if(show==2){

var value = document.getElementById('content2');

// alert(value.style.backgroundColor);

value.style.backgroundColor='yellow';

document.getElementById('show').innerText = 3;

var value = document.getElementById('content');

value.style.backgroundColor = '#FFFFFF';

var value = document.getElementById('content3');

value.style.backgroundColor = '#FFFFFF';

}else{

var value = document.getElementById('content3');

// alert(value.style.backgroundColor);

value.style.backgroundColor='chartreuse';

document.getElementById('show').innerText = 1;

var value = document.getElementById('content');

value.style.backgroundColor = '#FFFFFF';

var value = document.getElementById('content2');

value.style.backgroundColor = '#FFFFFF';

}

sum = parseInt(sum);

sum = sum + 1;

document.getElementById('number').innerText = sum;

}

function color_over(){

// document.getElementById('state').innerHTML = 'true';

var value = document.getElementById('content');

value.style.backgroundColor="blue";

}

function color_out(){

// document.getElementById('state').innerHTML = 'true';

var value = document.getElementById('content');

value.style.backgroundColor="red";

}

function counter(){

var value1 = document.getElementById('value1').value;

var value2 = document.getElementById('value2').value;

var fig = document.getElementById('fig').value;

var result = 0;

value1 = parseFloat(value1);

value2 = parseFloat(value2);

if(fig==1){ //+

result = value1 + value2;

}else if(fig==2){ //-

result = value1 - value2;

}else if(fig==3){ //*

result = value1 * value2;

}else if(fig==4){ // /

result = value1 / value2;

}

document.getElementById('result').value = result;

}

</script>

已刷新次数：<label id="number" >0</label>

</div>

</div>

</div>

</body>

</html>

上课无聊，没事写一个玩一玩，使用红黄绿三种也是切换，用js写一个颜色判断的函数，再用setInterval('color()',100);调用函数，100为0.1秒，下面是代码，想要看效果的戳这里www.rain1024.com-js77

下面是代码

发表回复 取消回复

上课无聊，没事写一个玩一玩，使用红黄绿三种也是切换，用js写一个颜色判断的函数，再用`setInterval('color()',100);`调用函数，100为0.1秒，下面是代码，想要看效果的戳这里www.rain1024.com-js77

发表回复取消回复