6.21学习正则表达式. 双色球.编钟-CSDN博客

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body
        {
            background-color: white;
        }
        .case
        {
            margin: 100px auto;
            width: 500px;
            height: 500px;
            background-color:black;
        }
        .clock
        {
            width: 500px;
        }
        .hour{
            position: relative;
            top: -554px;
            left: 235px;
        }
        .minute
        {
            position: relative;
            top: -552px;
            left: 201px;
        }
        .second
        {
            position: relative;
            top: -554px;
            left: 166px;
        }

        .case1{
            width: 1200px;
            height: 200px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin: 0 auto;
        }
        .red{
            width: 150px;
            height: 150px;
            border-radius: 50%;
            background: red;
            font-size: 65px;
            color: white;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .blue{
            width: 150px;
            height: 150px;
            border-radius: 50%;
            font-size: 65px;
            color: white;
            background: blue;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

    </style>
</head>
<body>
<div class="case">
    <img class="clock" src="images/clock.jpg">
    <img class="hour" src="images/hour.png">
    <img class="minute" src="images/minute.png">
    <img class="second" src="images/second.png">
</div>

<div class="box">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div id="last"></div>
</div>



<div class="case1">
    <div class="red"></div>
    <div class="red"></div>
    <div class="red"></div>
    <div class="red"></div>
    <div class="red"></div>
    <div class="red"></div>
    <div class="blue"></div>
</div>




</body>
<script>
    // var date=new Date()
    // var hours=date.getHours()
    // var minutes=date.getMinutes()
    // var seconds=date.getSeconds()
    // var hour=document.getElementsByClassName("hour")[0]
    // var minute=document.getElementsByClassName("minute")[0]
    // var second=document.getElementsByClassName("second")[0]
    // if(hours>=12) {
    //     hours = 0
    // }
    // hour.style.transform="rotate("+(hours*30+minutes*0.5)+"deg)"
    // minute.style.transform="rotate("+(minutes*6+seconds*0.1)+"deg)"
    // second.style.transform="rotate("+seconds*6+"deg)"

    function time() {
        var date=new Date()
        var hours=date.getHours()
        var minutes=date.getMinutes()
        var seconds=date.getSeconds()
        var mil=date.getMilliseconds()
        var hour=document.getElementsByClassName("hour")[0]
        var minute=document.getElementsByClassName("minute")[0]
        var second=document.getElementsByClassName("second")[0]
            if(hours>=12) {
                hours = hours-12;
        }
        hour.style.transform="rotate("+((hours-12)*30+minutes*0.5)+"deg)";
        minute.style.transform="rotate("+(minutes*6+seconds*0.1)+"deg)";
        second.style.transform="rotate("+seconds*6+"deg)";
    }
       setInterval(time,1000)


       //qiu

// var a=1;b=2;c=3;
//    d=4;
//    a+"xioashi"+"sdsa"
//     document.write(`"${a}小时${b}分钟${d} "+")//es6写法${b(变量)`}(`遇见$符就但当变量,其他的全当字符串)
//     <div style="width:100px;height:200px;"></div>


    // var per={
    //     key:()=>{
    //         alert(1)
    // }
    // }
    // per.key()//es6写法

    // var regEXP=/[a(A)-z]大小写的a[0-9a-z(简写)](0到9)/gi(不区分大小写);
    // var reg=new regEXP();
    // var str='aaaaaafffdsdsd你好呀';
    // document.write(regEXP.text(str)+"</br>");
    // document.write(regEXP.match(str)+"</br>");
    // document.write(regEXP.replace(str,"1234")+"</br>");
    // document.write(regEXP.search(str)+"</br>");
    // document.write(regEXP.spilt(str)+"</br>");


    var a=new Array();
    var red=document.getElementsByClassName("red")
    var blue=document.getElementsByClassName("blue")[0]
    var c=0;
    for(var i=0;i<red.length;i++){
        a[i]=parseInt(Math.random()*32+1);
        for(var j=0;j<i;j++){
            if(a[i]==a[j]){
                a[i]=parseInt(Math.random()*32+1);
                j--;
            }

        }
    }
    function compare(a,b){
        return a - b;
    }
    a.sort(compare)
    for(var i=0;i<red.length;i++){
        red[i].innerText=a[i]
    }
    c=parseInt(Math.random()*15+1)
    blue.innerText=c


    //
    // var cc=document.getElementsByTagName("div");
    // var arr=[];
    // for(i=0;i<cc.length-1;i++){
    //     var  x= parseInt(Math.random()*33)+1;
    //     arr[i]=x
    //     for(j=0;j<i;j++){
    //         if(arr[i]==arr[j]){
    //             i--
    //         }
    //     }
    // }
    // cc[6].innerText=parseInt(Math.random()*16)+1;
    // arr.sort(function (num1, num2){
    //     return num1-num2
    // });
    // for (i=0;i<cc.length-1;i++){
    //     cc[i].innerText=arr[i]
    // }



</script>
</html>



</body>
</html>