学习js的几个小练习

最新推荐文章于 2024-05-14 23:26:36 发布

小静仔

最新推荐文章于 2024-05-14 23:26:36 发布

阅读量6.2k

点赞数 2

分类专栏： js HTML

本文链接：https://blog.csdn.net/shelbyandfxj/article/details/79560091

版权

js 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

HTML

5 篇文章 0 订阅

订阅专栏

这些小练习是从别人的博客上看到的，我练手的是入门级的练习，这些小练习让我认清了自己的能力，果然还是刚入门，这让一边找工作的我非常心塞，链接贴在下面啦，入门，或者想学习的可以去看看。个人做了下面两个练习后呢，觉得还是结合项目来做的好，里面的小练习，项目里面都会用到，不懂的话可以看一下练习。

链接：http://fgm.cc/learn/

好啦，接下来开启我的练习：

1、效果非常简单，就是五个按钮来简单地改变框框的样式，但是我还是做了有一会吧，先尝试用addEventListener()这个方法不管用，想用nodeValue来获取按钮的值也不管用，想将inputs[i].value的值传入点击事件方法也遇到问题。种种尝试之后，我发现在onclick事件中有一个this，它指向的是当前点击的一个节点，因此可以通过this.value来获取按钮的值，我觉得我的写法效率不高，而不具有复用性。在这个例子中，我学会了一个挺好用的属性cssText，可用cssText为节点添加属性，同样，当你将cssText中的值设置为空，那么通过element.style.xxx修改的样式会被覆盖，即恢复了原来的样式。

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #outer {
            margin: 0 auto;
            width: 500px;
            text-align: center;
        }
        #div1 {
            margin: 10px auto;
            display: block;
            background: black;
            width: 100px;
            height: 100px;
        }
    </style>
    <script type="text/javascript" language="javascript">

	//别人的写法

	var changeStyle = function (elem, attr, value)
	{
    		elem.style[attr] = value
	};
	window.onload = function ()
	{
    		var oBtn = document.getElementsByTagName("input");
    		var oDiv = document.getElementById("div1");
    		var oAtt = ["width","height","background","display","display"];
    		var oVal = ["200px","200px","red","none","block"];


    		for (var i = 0; i < oBtn.length; i++)
    		{
        		oBtn[i].index = i;
        		oBtn[i].onclick = function ()
        		{
            		this.index == oBtn.length - 1 && (oDiv.style.cssText = "");	//按位与，当前面为假时，后面的不执行）
            		changeStyle(oDiv, oAtt[this.index], oVal[this.index])
        		}   
    		}
	};

	//下面是我的写法

        window.onload = function() {
            var box = document.getElementById('div1');
            var inputs = document.getElementsByTagName('input');
            for (var i in inputs) {
                inputs[i].onclick = function() {
                    var value = this.value;
                    if (value === '变宽') {
                        box.style.width = '200px';
                    } else if (value === '变高') {
                        box.style.height = '200px';
                    } else if (value === '变色') {
                        box.style.backgroundColor = 'red';
                    } else if (value === '隐藏') {
                        box.style.display = 'none';
                    } else {
                        box.style.cssText = "";   //这是参照下面的写法改了的，原来的就是一个个恢复原来的样式。
                    }
                }
            }
        }
    </script>
</head>
<body>
    <div id="outer">
        <input type="button" value="变宽">
        <input type="button" value="变高">
        <input type="button" value="变色">
        <input type="button" value="隐藏">
        <input type="button" value="重置">
        <div id="div1"></div>
    </div>
</body>
</html>

2、

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="test.js"></script>
    <style>
        html, body {
            height: 100%;
        }
        body {
            font: 12px/1.5 Tahoma;
        }
        body, ul, li {
            margin: 0;
            padding: 0;
        }
        ul { 
            overflow: hidden;   //overflow:hidden;这个用法为被浮动影响而溢出的ul自动设定了高度
        }
        li{
            list-style: none;
            float: left;
        }
        #outer {
            width: 500px;
            overflow: hidden;
            margin: 0 auto;
            zoom: 1;
        }
        #skin {
            margin: 10px 0;
            padding: 0;
        }
        #skin li {
            border-width: 4px;
            border-style: solid;
            height: 6px;
            width: 6px;
            margin-right: 10px;
        }
        #red {
            border-color: red;
            background-color: red;
        }
        #green {
            border-color: green;
            background-color: green;
        }
        #black {
            border-color: black;
            background-color: black;
        }
        #nav {
            border: 1px solid white;
        }
        #nav li {
            text-align: center;
            background-color: green;
            width: 82px;
            line-height: 25px;
            border-right: 1px solid white;
        }
        #nav li.last {
            width: 83px;
            border-right-width: 0;
        }
        #nav li a {
            color: white;
        }
        a:link, a:visited {
            text-decoration: none;
        }
        a:hover {
            text-decoration: underline;
            color: white;
        }
    </style>
    <script type="text/javascript" language="javascript">
        function changeColor(color) {
            /*
            1、var navs = document.getElementById('nav').getElementsByTagName('li');  
              for (var i=0; i<navs.length; i++) {}   
            2、var navs = document.getElementById('nav').getElementsByTagName('li').childNodes;  
              for (var i in navs) {} 
            3、var navs = document.getElementById('nav').getElementsByTagName('li');
              for (var i in navs) {} 
              这里不能跟onclick的用法一样，大概是一个需要的是对象，一个需要的是节点，其实这里还是不清楚。
            */
            var navs = document.getElementById('nav').getElementsByTagName('li');  
            for (var i=0; i<navs.length; i++) {
              //  console.log(typeof i +"     "+ i);   //number
                navs[i].style.background = ''+color;
                if(color === 'green') 
                    document.body.style.background = '#A3C5A8';
                else if (color === 'red')
                    document.body.style.background = '#FDD';
                else 
                    document.body.style.background = '#ccc';
            }
        }
        window.onload = function() {
            var lis = document.getElementById('skin').getElementsByTagName('li');
            var curt = document.getElementsByClassName('current')[0];
            curt.style.background = "white";
            changeColor(curt.id);
            for(var i in lis) {
              //  console.log(typeof i +"    "+i);  //string
                lis[i].onclick = function () {
                    for (var e=0; e<lis.length; e++) {
                        lis[e].className = "";
                        lis[e].style.cssText = '';
                    }
                    this.className = 'current';
                    this.style.backgroundColor = 'white';
                    changeColor(this.id);
                }
            }
        }
    </script>
</head>
<body>
    <div id="outer">
        <ul id="skin">
            <li id="red"></li>
            <li id="green" class="current"></li>
            <li id="black"></li>
        </ul>
        <ul id="nav">
            <li><a href="">新闻</a></li>
            <li><a href="">娱乐</a></li>
            <li><a href="">体育</a></li>
            <li><a href="">电影</a></li>
            <li><a href="">音乐</a></li>
            <li class="last"><a href="">旅游</a></li>
        </ul>
    </div>
</body>
</html>

小静仔

关注

2
点赞
踩
13

收藏

觉得还不错? 一键收藏
2
评论
学习js的几个小练习

第一个效果非常简单，就是五个按钮来简单地改变框框的样式，但是我还是做了有一会吧，先尝试用addEventListener()这个方法不管用，想用nodeValue来获取按钮的值也不管用，想将inputs[i].value的值传入点击事件方法也遇到问题。种种尝试之后，我发现在onclick事件中有一个this，它指向的是当前点击的一个节点，因此可以通过this.value来获取按钮的值，我觉得我的写
复制链接

扫一扫