JS页面分解质因数（附加纯CSS炫彩流光按钮）

最新推荐文章于 2023-06-03 15:32:17 发布

胡辣汤多放醋

最新推荐文章于 2023-06-03 15:32:17 发布

阅读量904

点赞数

本文链接：https://blog.csdn.net/qq_42424503/article/details/104716979

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>分解质因数</title>
    <style>
        body{
            background: #111111;
        }
        /*按钮样式*/
        #a1{
            z-index: 1;
            position:fixed;/*Relative 定位 相对定位元素的定位是相对其正常位置。*/
            left:43%;
            top:43%;
            width: 200px;
            height: 60px;
            text-align: center;
            line-height: 60px;
            color: #ffffff;
            font-size: 24px;
            text-transform: uppercase;
            text-decoration: none;
            font-family: sans-serif;
            box-sizing: border-box;
            background: linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
            background-size: 400%;
            border-radius: 30px;
        }

        #a1:hover{
            animation: animate 8s linear infinite;
        }
        @keyframes animate {
            0%{
                background-position: 0%;
            }
            100%{
                background-position: 400%;
            }
        }
        #a1:before{

            content: '';
            position: absolute;
            top: -5px;
            left: -5px;
            right: -5px;
            bottom: -5px;
            z-index: -1;
            background: linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
            background-size: 400%;
            border-radius: 40px;
            apacity:0;
            transition: 0.5s;
            /*按钮彩色光辉*/
        }
        #a1:hover:before{
            filter: blur(20px);
            apacity:1;
            animation: animate 8s linear infinite;
        }
        #a2{
            position: absolute;
            left: 40%;
            top: 30%;
            width: 280px;
            height: 40px;
            text-align: center;
            line-height: 60px;
            font-size: 18px;
            border-radius: 10px;
            font-family: 新細明體-ExtB;
        }

    </style>
</head>
<body>
<input type="number" name="num"  id="a2" placeholder="请任意输入一个自然数" >
<a href="#" id="a1" onclick="aaa();">开始分解</a>
<div id="div1" style="background:#111111;width: 1060px;height: 150px;color: white;position: absolute;
left: 200px;top:60%;font-family: 楷体;font-size: 24px">质数：只能被1和本身这两个不同的自然数整数的自然数叫质数，例如：2，3，5，7，11，......<br>
合数：合数指自然数中除了能被1和本身整除外，还能被其他数（0除外）整除的数<br>
    分解质因数 ：把合数表示为质因数乘积的形式叫做“分解质因数”。<br>
PS：只要你的计算机的计算速度够快，你可以输入任意长度的自然数</div>

</body>
<script>

function aaa() {
    var arr=[];
    var a =document.getElementsByName("num")[0];//取出输入框的内容
    var v=a.value;
    var b = v;
    arr.push(b+"=");
    for (i = 2; i < v; i++) {
        //判断这个v能不能被i整除，如果能，则应该分解一次，
        // 分解后，v的值应该发生变化
        if (v% i == 0) {
            arr.push(i+"*");
            v/= i;
            i = 1;
        }
    }
    arr.push(v);
    document.getElementById("div1").innerHTML=(arr.join(""));

}
</script>
</html>

胡辣汤多放醋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS页面分解质因数（附加纯CSS炫彩流光按钮）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>分解质因数</title> <style> body{ background: #111111; ...
复制链接

扫一扫