console 命令行工具 X clear

console

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>五星评分</title>
</head>
<body>
    <!-- 物流服务，服务态度 -->
    <div class="fbox">
        <!-- <div class="box">
            <div>商品评价：</div>
            <div class="rating">
                <input type="radio" id="1" name="rating" value="1">
                <label for="1">☆</label>
                <input type="radio" id="2" name="rating" value="2">
                <label for="2">☆</label>
                <input type="radio" id="3" name="rating" value="3">
                <label for="3">☆</label>
                <input type="radio" id="4" name="rating" value="4">
                <label for="4">☆</label>
                <input type="radio" id="5" name="rating" value="5">
                <label for="5">☆</label>
            </div>
        </div> -->
    </div>
    <div class="btnSub">提 交</div>
    <!--  ★ ✰ ☆ -->
   <script>
        const fbox = document.querySelector('.fbox');
        const btnSub = document.querySelector('.btnSub');
        let star01 = 0;
        let star02 = 0;
        let star03 = 0;
        let arr = ['商品评价：','物流服务：','服务态度：']
        let strHtml = '';
        arr.forEach((item,index) => {
            fbox.innerHTML += `
                <div class="box${index}">
                    <div>${item}</div>
                    <div class="rating${index}">
                        <input type="radio" id="1" name="rating" value="1">
                        <label for="1">☆</label>
                        <input type="radio" id="2" name="rating" value="2">
                        <label for="2">☆</label>
                        <input type="radio" id="3" name="rating" value="3">
                        <label for="3">☆</label>
                        <input type="radio" id="4" name="rating" value="4">
                        <label for="4">☆</label>
                        <input type="radio" id="5" name="rating" value="5">
                        <label for="5">☆</label>
                    </div>
                </div>
            `
            goodBox(`box${index}`,`rating${index}`)
        })


        function goodBox(boxDom,ratDom){
            const box = document.querySelector(boxDom);
            const labels = document.querySelectorAll(`${ratDom} label`);
            const rating = document.querySelector(ratDom);
            let currentRating = 0;

            labels.forEach((label,index) => {
                moveLive(label, 'mouseover','mouseout','orange','#fff',index,1);
                label.addEventListener('mouseout', ()=>{
                    moveFor(labels.length, 1, '#fff');
                })
                moveLive(label, 'click','mouseout','','orange',index,2);
            })

            function moveLive(dom, eventType, eventTypeLive, initColor, hoverColor, index, ismouse){
                dom.addEventListener(eventType, ()=>{
                    if(ismouse == 1){
                        currentRating = index + 1;
                        moveFor(labels.length, 1, '#fff');
                        moveFor(currentRating, 2, initColor);
                    }

                    dom.addEventListener(eventTypeLive,()=>{
                        moveFor(currentRating, ismouse, hoverColor);
                    })
                    if( eventType == 'click'){
                        console.log(dom.htmlFor);
                        return dom.htmlFor
                    }
                })
            }

            function moveFor(maxLength, ismouse, c){
                for(let i = 0; i < maxLength; i ++ ){
                    if(ismouse == 1){
                        labels[i].innerText = '☆'
                    }else {
                        labels[i].innerText = '★'
                    }
                    labels[i].style.color = c;
                }
            }
        }
        
    </script>
</body>
</html>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    padding-left: 20px;
}

.box0 {
    display:flex;
    align-items:center;
    margin-top:20px;
    color:#fff;
}
.box1 {
    display:flex;
    align-items:center;
    margin-top:20px;
    color:#fff;
}
.box2 {
    display:flex;
    align-items:center;
    margin-top:20px;
    color:#fff;
}

.rating0,
.rating1,
.rating2 {
    display: flex;
    /* flex-direction: row-reverse; */
    font-size: 24px;
}

.rating0 label,
.rating1 label,
.rating2 label {
    cursor: pointer;
    width:32px;
    text-align:cneter;
}

.rating0 input[type="radio"],
.rating1 input[type="radio"],
.rating2 input[type="radio"] {
    display: none;
}

/* .rating1 label:hover {
    color: orange;
} */

.btnSub {
    width:50px;
    height:30px;
    border-radius: 10px;
    background: pink;
    color:#fff;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
    margin: 30px 80px 0px;
}