JS

Posted panbee

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS相关的知识，希望对你有一定的参考价值。

感觉JS里面还是有很多小技巧的,知道套路了,其实实现起来其实也还没有想象中的那么复杂.不过我觉得还是要把所学的知识融会贯通吧,不能学了JS就忘了前面的知识,结合起来才会威力无穷.

1.跑马灯:弹弹弹

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单行文字弹动</title>
    <script type="text/javascript">
    window.onload = function(){
        window.setInterval(scrolling,10);
    }
    var str = "神奇的JavaScript";
    var str_length = str.length;
    var flag = true;
    function scrolling(){
        //寻找目标
        var inpObj = document.getElementById("input");    
        if (flag) {
            str = " "+str;
            inpObj.value = str;
            if (str.length==137) {flag=false;}
        }else{
            str = str.substr(1);
            inpObj.value = str;
            if (str.length==str_length) {flag=true;}
        }    
    }
    </script>
</head>
<body>
<input type="text" value="神奇的JavaScript" id="input" size="80" />    
</body>
</html>

 

2.显示/隐藏选项卡,这个真是太简单.......

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示隐藏功能</title>
    <style type="text/css">
        *{
            margin:0px;
            padding: 0px;
        }
        .box{
            width:600px;
            border: 1px solid #000;
            margin: 100px auto;
        }
        .title{
            width:100%;
            height:30px;
            border: 1px solid #000;
            line-height: 30px;
        }
    </style>
    <script type="text/javascript">
        var flag = false;
        function hid(){
            var conObj = document.getElementById("content");
            var button = document.getElementById("button");
            if(flag){
                conObj.style.display="block";
                flag=false;
                button.innerHTML = "隐藏";
            }else{
                conObj.style.display="none";
                flag=true;
                button.innerHTML = "显示";
            }
        }
    </script>
</head>
<body>
<div class="box">
    <div class="title">这里是一个标题<button onclick="hid()" id="button">隐藏</button></div>
    <div id="content" style="display: block;">
        <p>1.whatya you want for me.</p>
        <p>2.I have loved you for a thousand years.</p>
        <p>3.One step closer!</p>
        <p>4.How did I fall in love with you?</p>
    </div>
</div>
</body>
</html>

3.点出一个世界...

<!DOCTYPE html>
<html lang="en" onclick="clickPic(event)">
<head>
    <meta charset="UTF-8">
    <title>点到你开花</title>
    <script type="text/javascript">
    function clickPic(e){
        var x = e.clientX;
        var y = e.clientY;
        var width = getRandom(10,100);
        var random = getRandom(0,160);
        var divObj = document.createElement("div");
        var imgObj = document.createElement("img");
        document.body.appendChild(divObj);
        divObj.appendChild(imgObj);
        if (random<10){imgObj.src = "images/P_00"+random+".jpg";}
        else if (random<100){imgObj.src = "images/P_0"+random+".jpg";}
        else if (random<160){imgObj.src = "images/P_"+random+".jpg";}
        imgObj.width = width;
        imgObj.style = "position:relative;left:0px;top:0px;"
        divObj.style = "position:absolute;left:"+x+"px;top:"+y+"px;border:1px solid #ccc;padding:5px;border-radius:10px;box-shadow:5px 5px 10px gray;"
    }
    function getRandom(min,max){
        return Math.floor(Math.random()*(max-min)+min);
    }
    </script>
</head>
<body>
    
</body>
</html>

 

以上是关于JS的主要内容，如果未能解决你的问题，请参考以下文章

VSCode自定义代码片段9——JS中的面向对象编程

js代码片段: utils/lcoalStorage/cookie

JS代码片段：一个日期离现在多久了

js常用代码片段(更新中)

js常用代码片段

Chrome-Devtools代码片段中的多个JS库