JS小练习

var sum = 0;
        for (var i = 0;i <= 100;i++){
            sum += i;
        }
        console.log(sum);

输出1-100所有数之和

for (var i = 1;i<=100;i++){
            if(i % 2 === 0){
                console.log(i);
            }
        }

将1-100，2的倍数打印

for(var i = 1;i <= 6;i++){
            for(var j =1;j<=i;j++){
                document.write('*');
            }
            document.write('<br>');
        }

制作直角三角形

for(var i = 1;i <= 6;i++){
            for(var s =i;s<6;s++){
                document.write('&nbsp;');
            }
            for(var j=1;j<=2*i-1;j++){
               document.write('*');
            }document.write('<br>');
        }

制作等腰三角形

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box{
            width:100px;
            height:100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script type="text/javascript">
        var oDiv = document.getElementById('box');
        oDiv.onclick=function () {
            oDiv.style.backgroundColor = 'green';
        }
    </script>
</body>
</html>

点击红盒子变为绿盒子

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box{
            width:100px;
            height:100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script type="text/javascript">
        var oDiv = document.getElementById('box');
        var isRed = true;

        oDiv.onclick = function () {
            if (isRed){
                oDiv.style.backgroundColor = 'green';
                isRed = false;
            }else{
                oDiv.style.backgroundColor = 'red';
                isRed = true;
            }
        }

    </script>
</body>
</html>

红绿盒子切换

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按按钮改变值</title>
</head>
<body>
    <input type="text" name="user" value="123" id="oinput">
    <button id="btn">按钮</button>
    <div id="box">
        哈哈哈
        <h3>alex</h3>
    </div>
    <script type="text/javascript">
        function $(id) {
            return document.getElementById(id)
        }
        
        $('btn').onclick = function () {
            $('btn').innerText = 'asd';
            $('box').innerHTML = '<h2>yuan</h2>';
            $('oinput').value=321;
        };
        
    </script>
</body>
</html>

点击按钮，改变值

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        a{
            display:block;
        }
    </style>
</head>
<body>
    <a href="javarscript:void(0);">
        <img src="images/img.png" alt="图片" id="prev">
    </a>
    <script type="text/javascript">
        var oImg = document.getElementsByTagName('img')[0];
        oImg.onmouseover = function () {
            this.src = 'images/img-hover.png';
        };
        oImg.onmouseleave = function () {
            this.src= 'images/img.png';
        };
    </script>
</body>
</html>

鼠标悬浮上或离开，图片（属性链接）切换

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box{
            width:100px;
            height:200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <button id="btn">隐藏</button>
    <div id="box"></div>
    <script type="text/javascript">
        function $(id) {
            return document.getElementById(id);
        }

        var isShow = true;
        $('btn').onclick = function () {
            if (isShow){
                $('btn').innerText = '显示';
                $('box').style.display = 'none';
                isShow = false;
            }else{
                $('btn').innerText = '隐藏';
                $('box').style.display = 'block';
                isShow = true;
            }
        }
        
    </script>
</body>
</html>

盒子显示、隐藏方法一

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box{
            width:100px;
            height:200px;
            background-color: red;
        }
        .active{
            display: none;
        }
    </style>
</head>
<body>
    <button id="btn">隐藏</button>
    <div id="box"></div>
    <script type="text/javascript">
        function $(id) {
            return document.getElementById(id);
        }

        var isShow = true;
        $('btn').onclick = function () {
            if(isShow){

                $('box').className += ' active';
                this.innerText = '显示';
                isShow = false;
            }else{

                $('box').className = 'box';
                this.innerText = '隐藏';
                isShow = true;
            }
        }

    </script>
</body>
</html>

盒子显示、隐藏方法二

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <button id="create">显示</button>
    <button id="remove">隐藏</button>
    <div id="box">
        <h4 id="ha">哈哈</h4>
    </div>
    <script type="text/javascript">
        function $(id) {
            return document.getElementById(id);
        }


        $('create').onclick = function () {
            var oP = document.createElement('h2');//创建h2
            oP.innerText = 'alex';//文本内容设置
            $('box').appendChild(oP);//父元素添加子元素


            $('remove').onclick = function () {
            $('box').removeChild(oP);//父元素移除子元素
        };
        };

    </script>
</body>
</html>

点击按钮，增删子节点

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        body,html{
            width:100%;
            height:100%;
        }
        #bg{
            position: relative;
            top:0;
            left:0;
            height:100%;
            width:100%;
            background-color:rgba(0,0,0,.3)
        }

        #login{
            width:300px;
            height:300px;
            background-color: yellow;
            position: relative;
            line-height: 300px;
            text-align: center;
            border-radius: 3px;
            margin:0 auto;
            top:25%;
        }

        #close{
            position:absolute;
            width:20px;
            background-color: red;
            top:0;
            right:0;
            line-height: 20px;
            text-align: center;
        }
        

    </style>
</head>
<body>
    <button id="btn">登录</button>
    <script type="text/javascript">
        function $(id) {
            return document.getElementById(id);
        }

        //获取标签
        var oDiv = document.createElement('div');
        var oP = document.createElement('p');
        var oSpan = document.createElement('span');

        //获取id值
        oDiv.id='bg';
        oP.id = 'login';
        oSpan.id='close';

        //填充文本
        oP.innerHTML = '登录框弹出';
        oSpan.innerText = 'X';

        //连环追加节点
        oDiv.appendChild(oP);
        oP.appendChild(oSpan);

        $('btn').onclick = function () {
            this.parentNode.appendChild(oDiv);
            this.style.display = 'none';
        };
        oSpan.onclick =function () {
            oDiv.parentNode.removeChild(oDiv);
             $('btn').style.display='inline-block';
        }




    </script>
</body>
</html>

简易模态框

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        button{
            width:100px;
            height:40px;
            cursor:pointer;
            margin-left: 10px;
        }
        button.active {
            background-color: green;
        }
    </style>
</head>
<body>
    <button class="active">按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    <button>按钮6</button>
</body>
<script type="text/javascript">
    var oBtn = document.getElementsByTagName('button');
    for(var i = 0;i<oBtn.length;i++){
        oBtn[i].onmouseover = function () {   //注意是oBtn[i]
            for(var j = 0;j<oBtn.length;j++){
                oBtn[j].className = '';//其余无active类，颜色不发生变化
            }
        this.className = 'active';//添加active类，颜色改变
        }
    }

    /*鼠标离开，所有按钮都恢复为无色*/
    for (var i = 0;i<oBtn.length;i++){
        oBtn[i].onmouseout = function () {
            this.className = '';
        }
    }
</script>
</html>

模拟hover选择器

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        ul{
            list-style: none;
            width:100%;
            overflow: hidden;
        }
        #tab{
            width:480px;
            margin:20px auto;
            border:1px solid red;
        }

        li{
            float:left;
            width:160px;
            line-height:60px;
            text-align: center;
            background-color: #ccc;
        }

        #tab ul li a{
            width:100%;
            height:100%;
            text-decoration: none;
            color: black;
            display: block;
        }
        li.active{
            background-color: red;
        }
        #tab p{
            height:200px;
            line-height: 200px;
            text-align: center;
            display: none;
            background-color: red;
        }
        #tab p.active {
            display: block;
        }
    </style>
</head>
<body>
<div id="tab">
    <ul>
        <li class="active"><a href="javarscript:;">首页</a></li>
        <li><a href="javarscript:;">新闻</a></li>
        <li><a href="javarscript:;">图片</a></li>
    </ul>
    <p class="active">首页内容</p>
    <p>新闻内容</p>
    <p>图片内容</p>
</div>
<script>
    var tabLi = document.getElementsByTagName('li');
    var tabP = document.getElementsByTagName('p');
    for (var i = 0;i<tabLi.length;i++){
        tabLi[i].index = i;//在li中添加对应的索引
        tabLi[i].onclick = function () {
            for (var j = 0;j<tabLi.length;j++){
                tabLi[j].className = '';
                tabP[j].className = '';
            }
            this.className = 'active';
            tabP[this.index].className = 'active';//找到对应索引的tabP，添加类名

        }
    }
</script>
</body>
</html>

tab栏选项卡 1

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        ul{
            list-style: none;
            width:100%;
            overflow: hidden;
        }
        #tab{
            width:480px;
            margin:20px auto;
            border:1px solid red;
        }

        li{
            float:left;
            width:160px;
            line-height:60px;
            text-align: center;
            background-color: #ccc;
        }

        #tab ul li a{
            width:100%;
            height:100%;
            text-decoration: none;
            color: black;
            display: block;
        }
        li.active{
            background-color: red;
        }
        #tab p{
            height:200px;
            line-height: 200px;
            text-align: center;
            display: none;
            background-color: red;
        }
        #tab p.active {
            display: block;
        }
    </style>
</head>
<body>
<div id="tab">
    <ul>
        <li class="active"><a href="javarscript:;">首页</a></li>
        <li><a href="javarscript:;">新闻</a></li>
        <li><a href="javarscript:;">图片</a></li>
    </ul>
    <p class="active">首页内容</p>
    <p>新闻内容</p>
    <p>图片内容</p>
</div>
<script>
    var tabLi = document.getElementsByTagName('li');
    var tabP = document.getElementsByTagName('p');
    for (let i = 0;i<tabLi.length;i++){
        
        tabLi[i].onclick = function () {
            for (var j = 0;j<tabLi.length;j++){
                tabLi[j].className = '';
                tabP[j].className = '';
            }
            this.className = 'active';
            tabP[i].className = 'active';//找到对应索引的tabP，添加类名

        }
    }
</script>
</body>
</html>

tab栏选项卡（let语法）

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box{
            width:100px;
            height:100px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <button id="animate">开始动画</button>
    <button id="clear">清除动画</button>
    <script>
        var oAnimate = document.getElementById('animate');
        var oClear = document.getElementById('clear');
        var oDiv = document.getElementById('box');
        var num=0;
        let timer;
        oAnimate.onclick=function () {
            clearInterval(timer);//清除原来的定时器
            timer= setInterval(function () { //设置定时器
                num+=3;
                console.log(num);
                oDiv.style.marginLeft = num +'px';
            },100);
            
        };
        oClear.onclick =function () {
            clearInterval(timer)
        }


    </script>
</body>
</html>

动画（周期定时器）

posted on 2019-03-07 13:26 赫晓蕊阅读(114) 评论(0) 收藏举报

刷新页面返回顶部

赫晓蕊

JS小练习

导航

公告