web代码编写（比较简单

编写一个简单的页面，仅包含一个文本框和一个按钮。文本框内初始文本为“请输入文本”，当焦点进入文本框时，文本框内文本清空。单击按钮，判断文本框中的文本若为空，则弹出警告框“请输入文本！”，若非空，则文本框内文本的颜色每隔1秒变化一次，按“红、绿、蓝”顺序轮替。

代码如下，记得采纳哦！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" value="请输入文本">
    <button>点击</button> 
</body>
<script>
    var ipt = document.getElementsByTagName("input")[0];
    var btn = document.getElementsByTagName("button")[0];
    var timer = null;
    ipt.onfocus = function(){
        this.value = "";
        clearInterval(timer)
    }
    btn.onclick = function(){
        var text = ipt.value
        if(text == ""){
            alert("请输入文本！")
        }else{
            var Colors = ["red","green","blue"]
            ipt.style.color = Colors[0]; //第一次立马变红，防止定时器的开始停顿一秒
            var i = 1;
            timer = setInterval(function(){
                ipt.style.color = Colors[i];
                i++;
                if (i-1 == 2){
                    i = 0;
                }
            },1000)
        }
    }
</script>
</html>

img

楼上已经给出了满足题意的答案，但在未输入值时点击按钮也会变色。
我这边优化了一下，通过id来取元素的话会更通用些，文本提示常用placeholder。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" placeholder="请输入文本" id="t_text">
    <button id="t_btn">点击</button> 
</body>
<script>
    var ipt = document.getElementById("t_text");
    var btn = document.getElementById("t_btn");
    var timer = null;
    var Colors = ["red","green","blue"]
    ipt.onfocus = function(){
        this.value = "";
        clearInterval(timer)
    }
    btn.onclick = function(){
        var text = ipt.value
        if(text == ""){
            alert("请输入文本！")
        }else{
            ipt.style.color = Colors[0]; //第一次立马变红，防止定时器的开始停顿一秒
            var i = 1;
            timer = setInterval(function(){
                ipt.style.color = Colors[i%3];
                i++;
            },1000)
        }
    }
</script>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" placeholder="请输入文本" id="t_text">
    <button id="t_btn">点击</button> 
</body>
<script>
    var ipt = document.getElementById("t_text");
    var btn = document.getElementById("t_btn");
    var timer = null;
    var Colors = ["red","green","blue"]
    ipt.onfocus = function(){
        this.value = "";
        clearInterval(timer)
    }
    btn.onclick = function(){
        var text = ipt.value
        if(text == ""){
            alert("请输入文本！")
        }else{
            ipt.style.color = Colors[0]; //第一次立马变红，防止定时器的开始停顿一秒
            var i = 1;
            timer = setInterval(function(){
                ipt.style.color = Colors[i%3];
                i++;
            },1000)
        }
    }
</script>
</html>

比较简单 建议自己写写

楼上已经放代码了我就懒得再写一遍了，看不懂的话可以和我交流


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" placeholder="请输入文本" id="t_text">
    <button id="t_btn">点击</button> 
</body>
<script>
    var ipt = document.getElementById("t_text");
    var btn = document.getElementById("t_btn");
    var timer = null;
    var Colors = ["red","green","blue"]
    ipt.onfocus = function(){
        this.value = "";
        clearInterval(timer)
    }
    btn.onclick = function(){
        var text = ipt.value
        if(text == ""){
            alert("请输入文本！")
        }else{
            ipt.style.color = Colors[0]; //第一次立马变红，防止定时器的开始停顿一秒
            var i = 1;
            timer = setInterval(function(){
                ipt.style.color = Colors[i%3];
                i++;
            },1000)
        }
    }
</script>
</html>

楼上写的很好 那我就不写了