JavaScript练习

最新推荐文章于 2024-06-28 10:13:21 发布

2201_75456772

最新推荐文章于 2024-06-28 10:13:21 发布

阅读量149

点赞数 3

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/2201_75456772/article/details/138514272

版权

1.冒泡排序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function bubbleSort(arr) {
            const len = arr.length;
            for (let i = 0; i < len - 1; i++) {
                for (let j = 0; j < len - 1 - i; j++) {
                    if (arr[j] > arr[j + 1]) {
                        const t = arr[j];
                        arr[j] = arr[j + 1];
                        arr[j + 1] = t;
                    }
                }
            }
            return arr;
        }
 
        const arr = [64, 34, 25, 12, 22, 11, 90];
        console.log("排序前：", arr);
        console.log("排序后：", bubbleSort(arr));
 
    </script>
</body>
</html>

2.选择排序、

<script>
        function selectSort(arr) {
            const len = arr.length;
            for (let i = 0; i < len - 1; i++) {
                let min = i;
                for (let j = i + 1; j < len; j++) {
                    if (arr[j] < arr[min]) {
                        min = j;
                    }
                }
                if (min !== i) {
                    const t = arr[i];
                    arr[i] = arr[min];
                    arr[min] = t;
                }
            }
            return arr;
        }
 
        const arr = [64, 34, 25, 12, 22, 11, 90];
        console.log("排序前：", arr);
        console.log("排序后：", selectSort(arr));
        
    </script>

3.插入排序

<script>
        function insertSort(arr) {
            const len = arr.length;
            for (let i = 1; i < len; i++) {
                let current = arr[i];
                let j = i - 1;
                while (j >= 0 && arr[j] > current) {
                    arr[j + 1] = arr[j];
                    j--;
                }
                arr[j + 1] = current;
            }
            return arr;
        }
 
        const arr = [64, 34, 25, 12, 22, 11, 90];
        console.log("排序前：", arr);
        console.log("排序后：", insertSort(arr));
 
    </script>

4.驼峰

<script>
        function toCamelCase(str) {
            let words = ['get', 'element', 'by', 'id'];
            return words.map((word, index) => {
                if (index === 0) {
                    return word.toLowerCase();
                } else {
                    return word[0].toUpperCase() + word.slice(1);
                }
            }).join('');
        }
        
        const originalStr = "getelementbyid";
        const camelCaseStr = toCamelCase(originalStr);
        console.log(camelCaseStr);
 
    </script>

5.抽奖

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>抽奖</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        .container {
            width: 800px;
            height: 800px;
            border: 1px dashed red;
            position: absolute;
            left: 50%;
            margin-left: -400px;
            text-align: center;
            line-height: 100px;
        }
        .container .box, .box2 {
            width: 300px;
            height: 300px;
            background: red;
            border-radius: 50%;
            margin: auto;
            margin-top: 50px;
            text-align: center;
            line-height: 300px;
        }
        .box2 {
            background: deepskyblue;
        }
        #show {
            font-size: 30px;
            color: white;
            font-weight: bold;
        }
        #start {
            width: 300px;
            height: 50px;
            background: palevioletred;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="box" id="box">
<span id="show">
奖品
</span>
    </div>
    <button id="start" onclick="start()">开始抽奖</button>
</div>
<script type="text/javascript">
    var flag = false;
    var goods = ["香蕉", "橘子", "八宝粥", "宝马五元代金券", "电脑", "iPhoneX", "1QB", "黄钻"];
    var show = document.getElementById("show");
    var _start = document.getElementById("start");
    var _box = document.getElementById("box")
    var timer;
    function start() {
        if (!flag) {
            flag = true;
            _start.innerHTML = "停止抽奖"
            timer = setInterval(function() {
                var index = Math.floor(Math.random()*goods.length);
                var good = goods[index]
                show.innerText = good;
                _box.className = "box2";
            }, 10)
        } else {
            flag = false;
            _start.innerHTML = "开始抽奖";
            clearInterval(timer);
            _box.setAttribute("class", "box");
        }
    }
</script>
</body>
</html>

5.星星点灯

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        window.onload = test;
        function test() {
            document.onclick = start;
        }
        function start(e) {
            var x = e.pageX;
            var y = e.pageY;
            var image = document.createElement("img");
            image.src = "./img/star.jpg";
            image.style.position = "absolute";
            var w = getRandom(20,200);
            var h = getRandom(20,200);
            image.style.width = w +"px";
            image.style.top = (y - (h/2))+"px";
            image.style.left = (x - (w/2) ) +"px";
            document.body.appendChild(image);
        }
 
        function getRandom(min,max) {
            return parseInt(Math.random()*(max - min + 1)) + min;
        }
    </script>
</head>
<body style="background: #000;">
</body>
</html>

7.全选反选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Checkbox Select/Deselect Example</title>
    <style type="text/css">
        li {
            height: 30px;
        }
    </style>
    <script type="text/javascript">
        function change(node) {
            var all_check = document.getElementsByClassName("all_check");
            for (var i = 0; i < all_check.length; i++) {
                if (node.checked == true) {
                    all_check[i].checked = true;
                } else {
                    all_check[i].checked = false;
                }
            }
        }
    </script>
</head>
<body>
 
<!-- 全选复选框 -->
<label>
    <input type="checkbox" onclick="change(this)"> 全选
</label>
 
<!-- 一组可以被全选/反选的复选框 -->
<label>
    <input type="checkbox" class="all_check"> 选项1
</label>
<label>
    <input type="checkbox" class="all_check"> 选项2
</label>
<label>
    <input type="checkbox" class="all_check"> 选项3
</label>
<!-- ... 其他复选框 ... -->
 
</body>
</html>