「fakefish误人子弟系列」原生js效果之初夜

draveness 发布于2019-08-21 12:12 / 3373人阅读

摘要：，在经过一系列艰难的决定之后，我开出了这么一个误人子弟系列其实就是炒冷饭。我不知道会写多少篇，反正写着再说，出问题了请见谅，毕竟是误人子弟嘛，有问题请评论，我好修改。函数中有个重要的东西，叫数组，举个例子主要是这个函数把一系列参数弹窗。

Hello，在经过一系列艰难的决定之后，我开出了这么一个误人子弟系列~~其实就是炒冷饭。~~

我不知道会写多少篇，反正写着再说，出问题了请见谅，毕竟是误人子弟嘛，有问题请评论，我好修改。

先从简单的开始。

来吃狗。

比如现在有这些dom，我们通过这个button的点击去修改div的一些属性。怎么做呢？

var attributes=["width","height","background","display","display"];
var values=["200px","200px","red","none","block"];
var div=document.getElementById("div");
var btns=document.getElementsByTagName("input");
for(var i=0,len=btns.length;i

为了方便，我们把要改的一些属性写出数组，然后遍历那几个按钮，加上索引，然后绑定点击事件，修改样式，简单的来说就是类似div.style["width"] = "200px"的方式修改。

demo


讲讲切换css样式，就是传说中的换肤功能的基础。

页面中引入css样式的一般都是用，所以我们通过修改这个href来改变页面中的外链样式。

red
blue
this is a div


var btns=document.getElementsByTagName("span");
var link=document.getElementsByTagName("link");
for(var i=0,len=btns.length;i

这样我们可以切换red.css和blue.css来切换皮肤。

demo


js函数中有个重要的东西，叫arguments数组，举个例子






window.onload=function(){
    var inputs=document.getElementsByTagName("input");
    var button=document.getElementsByTagName("button")[0];
    button.onclick=function(){
        fun(inputs[0].value,inputs[1].value);
    }
}
function fun(){
    for(var i in arguments){
        alert(arguments[i]);
    }
}


主要是这个fun函数把一系列参数弹窗。

demo


夜深了，先放这么三段吧。

未完成的demo本体

云服务器 GPU云服务器原生js效果系列之系列之二架构之坑系列

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87488.html

纯CSS+HTML自定义checkbox效果

摘要：应该是一个比较常用的功能了，不过浏览器自带的往往样式不怎么好看，而且不同浏览器效果也不一样。出于美化和统一视觉效果的需求，的自定义就被提出来了。个人建议用的和伪元素和是一个东西。 checkbox应该是一个比较常用的html功能了，不过浏览器自带的checkbox往往样式不怎么好看，而且不同浏览器效果也不一样。出于美化和统一视觉效果的需求，checkbox的自定义就被提出来了。这里对实...

sevi_stuo 2019-08-28 18:15 评论0 收藏0
javascript作用域和闭包之我见

摘要：查询是在作用域链中，一级级的往上查找该变量的引用。作用域和作用域链作用域的概念，应该两张图几句话就能解释吧。这个建筑代表程序中的嵌套作用域链。一层嵌一层的作用域形成了作用域链，变量在作用域链中的函数内得到了自己的定义。 javascript作用域和闭包之我见看了《你不知道的JavaScript(上卷)》的第一部分——作用域和闭包，感受颇深，遂写一篇读书笔记加深印象。路过的大牛欢迎指点...

SoapEye 2019-08-20 14:51 评论0 收藏0