闲扯 Javascript 01 实现选项卡

javascript 实现选项卡今天下午的两节课,在机房闲来没事 ,就学习了javascript 怎么获取HTML的标签,改变CSS样式,资料来源智能社! <script> window.onload=function () { var oDiv=document.getElementById('div1'); var aBtn=oDiv.getElementsByTagName('input'); var aDiv=oDiv.getElementsByTagName('div'); fo…

二、JavaScript语言--JS基础--JavaScript进阶篇--选项卡切换效果

利用JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居总价20万买一居 200万内购五环三居 140万安家东三环北京首现零首付楼盘 53万购东5环50平京楼盘直降5000 中信府公园楼王现房家居: 40平出租屋大改造美少女的混搭小窝经典清新简欧爱家 90平老房焕发新生新中式的酷色温情 66平撞色活泼家居瓷砖就像选好老婆卫生间烟道的设计二手房: 通州豪华3居260万二环…

Javascript学习笔记2.2 Javascript与DOM选项卡（滑动门）案例详解

学习了DOM的知识,今天开始做些练习,想到了一个网页滑动门的特效,见下图: 1.通过建立索引实现 <!doctype html> <html> <head> <meta charset="utf-8"> <title>js简单滑动门</title> <style type="text/css"> *{ padding:0; margin:0; font-size:14px;} li{…

7、JavaScript总结——实现选项卡切换的效果

编程挑战现在利用之前我们学过的JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居总价20万买一居 200万内购五环三居 140万安家东三环北京首现零首付楼盘 53万购东5环50平京楼盘直降5000 中信府公园楼王现房家居: 40平出租屋大改造美少女的混搭小窝经典清新简欧爱家 90平老房焕发新生新中式的酷色温情 66平撞色活泼家居瓷砖就像选好老婆卫生间烟道的设计二手房: 通州豪华3…

JavaScript效果之选项卡

拼了命学习js,想把学到的Javascript效果,可以记在博客里,在记录过程中,加深理解. gogogo,第一个效果,选项卡. 一.选项卡效果的实现思路选项卡效果的应用很广泛,几乎所有的网站都会用到选项卡,现在就来写选项卡. 选项卡的实现思路: 两个div,一个用来放在选项卡,一个用来放置每个选项卡内容. 首先,先把放置内容的div隐藏起来display:none,只保留一个显示display:block. 然后,通过点击选项卡,在该添加类的位置上添上属性类. 二.实现我写的这个选项卡界面…

javascript与jQuery选项卡效果

HTML结构: <!doctype html><html><head><meta charset="utf-8"><title>选项卡封装</title> </head> <body> <div class="div1" id="div1"> <ul class="list"> <li class=&q…

javascript简单的选项卡

实现一个简单的选项卡功能 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>一个选项卡</title> <style type = "text/css"> *{ padding:0; margin:0; } #main { width:600px; height:300px;…

用JavaScript实现的选项卡

Codes wins arguments! <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> .tab { border: 1px solid #000; border-bottom-color: #FFF; background-color: #FFF; } .tab-focus { backg…

闲扯 Javascript 00

引言 Javascript 的作用在此就不阐述了,相信你已经知道它的用途!那我说点什么呢? 不如就和大家先扯一把,后面的工作随后后展开吧! 首先声明:我个人对Javascript 认识,我只知道它是写脚本语句的,在加上学了点CSS+Html 标签,先说明只是一点喔, 各位看官就别喷了,喜欢就给小弟顶顶格式说明: <body>这里的银色区域放:HTML代码</body> <style>这里的浅绿色区域放:CSS代码</style&…

初识 Javascript.01 -- Javascript基础|输出方式、变量、变量命名规范、数据类型、

Javascript基础 1 聊聊Javascript 1.1 Javascript的历史来源 94年网景公司研发出世界上第一款浏览器. 95年 sun公司 java语言诞生网景公司和sun合作. Java+script ===> javascript 1.2 W3c规范 ☞结构标准 html ☞表现标准 css ☞行为标准 js 1.3 JavaScript和ECMAScript的关系 ECMAScript是一种由Ecma国际前身为欧洲计算机制造商协…

Eloquent JavaScript #01# values

When action grows unprofitable, gather information; when information grows unprofitable, sleep. Ursula K. Le Guin, The Left Hand of Darkness 索引作者的几个观点 ECMAScript standard Values, Types, and Operators Web browsers…

前端之JavaScript 01

一JavaScript介绍 js历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase.(客户端执行的语言) Netscape(网景)接收Nombas的理念,(Brendan Eich)在其Netscape Navigator 2.0产品中开发出一套livescript的脚本语言.Sun和Netscape共同完成.后改名叫Javascript 微软随后模仿在其IE3.0的产品中搭载了一个JavaScri…

前端面试准备笔记之JavaScript(01)

1.1 typeof 能判断哪些类型? typeof可以识别所有的值类型 typeof可以识别函数 //function typeof可以判断是否是引用类型(不可以再细分) //object 1.2 javascript如何检测一个变量是一个String类型?请写出函数实现方法一 typeOf function isString(obj) { return typeof(obj) === "string"? true:false } 方法二 constructor construct…

闲扯 Javascript 04 滚动条

物体运动基础让Div移动起来 offsetLeft的作用用定时器让物体连续移动效果原理让ul一直向左移动复制li innerHTML和+= 修改ul的width 滚动过界后,重设位置判断过界改变滚动方向修改speed 修改判断条件鼠标移入暂停移入关闭定时器移出重新开启定时器 <style> *{ margin:0px; padding:0px;} #div1{ width:712px; height:108px; margin:100px auto; position:r…

闲扯 Javascript 03 时钟和QQ延时框

时钟 : 所用到得图片 : 开启定时器 setInterval 间隔型 setTimeout 延时型停止定时器 clearInterval clearTimeout 效果思路获取系统时间 Date对象 getHours.getMinutes.getSeconds 显示系统时间字符串连接空位补零设置图片路径 charAt方法 <body style="background:#000; color:#FFF; font-size:50px;"> <div…

闲扯 Javascript 02 全选、不选、反选

<body> <input id="btn1" type="button" value="全选" /><br> <input id="btn2" type="button" value="不选" /><br> <input id="btn3" type="button" value=…

Javascript进阶篇——总结--DOM案例+选项卡效果

断断续续的把慕课的JavaScript基础和进阶看完了,期间不怎么应用有的都忘记了,接下来多开始写些效果,进行实际应用. 制作一个表格,显示班级的学生信息. 1. 鼠标移到不同行上时背景色改为色值为 #f2f2f2,移开鼠标时则恢复为原背景色 #fff 2. 点击添加按钮,能动态在最后添加一行 3. 点击删除按钮,则删除当前行 <!DOCTYPE html> <html> <head> <title> new document </title>…

[前端] html+css+javascript 实现选项卡切换效果

用html+css+js实现选项卡切换效果使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材:房产: 275万购昌平邻铁三居总价20万买一居 200万内购五环三居 140万安家东三环北京首现零首付楼盘 53万购东5环50平京楼盘直降5000 中信府公园楼王现房家居: 40平出租屋大改造美少女的混搭小窝经典清新简欧爱家 90平老房焕发新生新中式的酷色温情 66平撞色活泼家居瓷砖就像选好老婆卫生间烟道的设计二手房: 通州豪华3居260万二环稀缺2居250w…

JavaScript基础------入门基础

JavaScript他是一种描述性语言,使用JavaScript就是为了能和网页有更好的交互,下面切入主题进行讲解. 一.JavaScript 1.什么是JavaScript JavaScript是一种描述性语言,也是一种基于对象(Object)和事件驱动(Event Driven)的,并具有安全性的脚本语言. 2.JavaScript的特点总结 JavaScript主要用来向HTML页面添加交互行为. JavaScript是一种脚本语言,语法和Java类似. javaScript一般用来编写客…

入门必看--JavaScript基础

JavaScript他是一种描述性语言,其实他并不难学,只要用心学,一定会学好,我相信大家在看这篇文章的时候,一定也学过HTML吧,使用JavaScript就是为了能和网页有更好的交互,下面切入主题. 一.JavaScript 1.什么是JavaScript JavaScript是一种描述性语言,也是一种基于对象(Object)和事件驱动(Event Driven)的,并具有安全性的脚本语言. 2.JavaScript的特点 JavaScript主要用来向HTML页面添加交互行为. JavaSc…