[JS]视频总结-第一部分_了解JavaScript
2024-05-09 23:44:16
第一部分_了解JavaScript:包括5个视频，学时在3个小时
01. 初探JavaScript魅力 - 1
02. 初探JavaScript魅力 - 2
<!doctype html> <html> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <head> <title>01-02</title> <!-- <link id="l1" rel="stylesheet" type="text/css" href="css2.css" /> --> <style> #div1 {width: 200px; height: 100px; background: #ccc; border: 1px solid #999; display: none;} #div2 {width:100px; height: 200px; background: #ccc; display: none;} #div2-1 {width:200px; height: 200px; border: 2px solid black;} .box {background:red;} </style> <script> function mover(){ var ol = document.getElementById("div1"); ol.style.display='block'; } function mout(){ with (document.getElementById('div1')){ style.display='none'; } } function aclick(){ alert("hello, ray!"); } function skin1(){ var ol = document.getElementById('l1'); ol.href='02css2-1.css'; } function skin2(){ var ol = document.getElementById('l1'); ol.href='02css2.css'; } function tvalue(){ var tv = document.getElementById('t1'); tv.value='abcdef'; tv.title='sdfaf'; } function showHide(){ var di = document.getElementById('div2'); if(di.style.display=='block'){ di.style.display='none'; }else{ di.style.display='block'; } } function toRed(){ var di = document.getElementById('div2-1'); di.className='box'; } </script> </head> <body> <!-- 1. --> <input type="checkbox" onclick="aclick()" onmouseover="mover()" onmouseout="mout()" /> <div id="div1"> hello, ray... </div> <!-- 2. --> <input type="button" value="button1" onclick="skin1()"/> <input type="button" value="button2" onclick="skin2()"/> <div> <input type="text" id="t1" placeholder='ray lee'/> <input type="button" onclick="tvalue()" value="modifyword"/> </div> <input type="button" value="display invisible" onclick="showHide()"> <div id="div2"> </div> <div> </div> <input type="button" value="改变类别" onclick="toRed()"/> <div id="div2-1"> </div> </body> </html> 03. 初探JavaScript魅力 - 3
04. 初探JavaScript魅力 - 4
<html> <head> <meta charset="utf-8"> <title>03-04</title> <style> #div1 {width:200px; height:200px; background:black;} #div2 {width:200px; height:200px; background:red;} div {width:200px; height:200px; float:left; border:1px solid black; margin:10px;} </style><!-- CSS 样式 --> <script> window.onload=function(){ var o1=document.getElementById('b1'); o1.onclick=function (){ confirm('hello, ray!', 'yes'); }<!-- 匿名函数--> }<!-- 页面加载完后，执行该代码--> function toColor(color){ var di1=document.getElementById('div1'); di1.style.background=color; } function setStyle(name, value){ var di2=document.getElementById('div2'); di2.style[name]=value; } </script><!-- JS 行为 --> </head> <body> <!-- <input type='button' value='变红' onclick="toColor('red')"/> <input type='button' value='变绿' onclick="toColor('green')"/> <input type='button' value='变蓝' onclick="toColor('blue')"/> <div id='div1'> </div> <input type='button' value='变宽' onclick="setStyle('width', '400px')"/> <input type='button' value='变高' onclick="setStyle('height', '400px')"/> <input type='button' value='变蓝' onclick="setStyle('background', 'blue')"/> <div id='div2'> </div> <input id ='b1' type='button' value='button1' /> --> <!-- 通过getElementByTagName 获得ID们 --> <div></div> <div></div> <div></div> <div></div> <script> var di=document.getElementsByTagName('div'); for(var i=0;i<di.length;i++){ di[i].style.background='red'; } </script> </body><!-- HTML5 结构 --> 05. 初探JavaScript魅力 - 5
<!doctype html> <html> <head> <meta charset="utf-8"> <title>05</title> <link rel="stylesheet" type="text/css" href="zns_style.css" /> <style> #div1 .active {background:yellow;} #div1 div {width:200px; height:200px; background:#ccc; border:2px solid #999; display:none;} #tab .active {background:white; color:red;} #tab .text {background:#fff; color:black; display:block; } #tab li {background:black; color:#fff; width:40px; height:80px; margin:10px; float:left; font-size:9px;} </style> <script> window.onload=function(){ var d1=document.getElementById("div1"); var d1b=d1.getElementsByTagName("input"); var d1d=d1.getElementsByTagName("div"); for(var i=0;i<d1b.length;i++) { d1b[i].index=i; d1b[i].onclick=function() { for(var j=0;j<d1b.length;j++) { d1b[j].className=""; d1d[j].style.display="none"; } this.className="active"; d1d[this.index].style.display="block"; }; } var text2=document.getElementById("tx2"); var button2=document.getElementById("bt2"); var di2=document.getElementById("div2"); button2.onclick=function() { di2.innerHTML=text2.value; alert(di2.innerHTML); } var di3=document.getElementById("tab"); var li1=di3.getElementsByTagName("li"); var di4=di3.getElementsByTagName("div")[0]; for(var i=0;i<li1.length;i++) { li1[i].index=i; li1[i].onmouseover=function() { for(var j=0;j<li1.length;j++) { li1[j].className=""; } this.className="active"; di4.innerHTML="<h2>"+(this.index+1)+"月活动</h2><p></p>"; }; } } </script> </head> <body> <div id="div1"> <input class="active" type="button" value="教育"/> <input type="button" value="培训"/> <input type="button" value="出国"/> <input type="button" value="招生"/> <div style="display:block;">111</div> <div>222</div> <div>333</div> <div>444</div> </div> <input id="tx2" type="text" /> <input id="bt2" type="button" value="显示内容"/> <div id="div2"> </div> <div id="tab" class="calendar"> <ul> <li class="active"><h2>1</h2><p>Jan</p></li> <li><h2>2</h2><p>Feb</p></li> <li><h2>3</h2><p>Mar</p></li> <li><h2>4</h2><p>Apr</p></li> <li><h2>5</h2><p>May</p></li> <li><h2>6</h2><p>Jun</p></li> <li><h2>7</h2><p>Jul</p></li> <li><h2>8</h2><p>Aug</p></li> <li><h2>9</h2><p>Sep</p></li> <li><h2>10</h2><p>Oct</p></li> <li><h2>11</h2><p>Nov</p></li> <li><h2>12</h2><p>Dec</p></li> </ul> <div class="text"> <h2>2323</h2> <p>32423#$5345</p> </div> </div> </body> </html>
转载于:https://www.cnblogs.com/webapplee/p/3771678.html
[JS]视频总结-第一部分_了解JavaScript相关推荐
- js判断对象为空_在 JavaScript 中如何检查对象为空
下面的代码片段,用于检查对象是否为空.对于较新的浏览器,你可以使用 ES6 的 "Object.keys".?对于较旧的浏览器,可以安装Lodash库并使用其" isEm ...
- js数组查找最接近_在JavaScript数组中找到最小元素的位置
在JavaScript数组中找到最小元素的位置 注* 之前有篇文章介绍过数据遍历的性能比较: for in 比for loop慢至少20倍 ,这是另外一篇比较数组查找性能的例子,通过对手工/inde ...
- js 格式化 java时间格式化_用JavaScript(js)对时间格式化
可以说是Web项目中不可或缺的一个Javascript类库,它可以帮助你快速的解决客户端编程的许多问题,下面贴出一个用js格式化时间的方法. Date.prototype.format=functio ...
- js获取唯一设备码_使用Javascript获取设备的唯一 id_javascript_酷徒编程知识库
你可以为此目的访问设备的uuid 在Phonegap中你可以使用Cordova设备插件/* Android: Returns a random 64-bit integer (as a string, ...
- js微信抢红包脚本代码_基于JavaScript实现微信抢红包功能
金额随机:额度在0.01和(剩余平均值*2)之间. 0){ let num = scramble(remainAmount,remainPeople); remainAmount = remainAm ...
- js等待 callback 执行完毕_前端开发，一篇文章让你彻底搞懂，什么是JavaScript执行机制！...
不论你是javascript新手还是老鸟,不论是面试求职,还是日常开发工作,我们经常会遇到这样的情况:给定的几行代码,我们需要知道其输出内容和顺序.因为javascript是一门单线程语言,所以我们可 ...
- vue.js视频课程_在此免费课程中学习Vue.js！ ✨
vue.js视频课程 by ZAYDEK 由ZAYDEK 在此免费课程中学习Vue.js! ✨ (Learn Vue.js in this free course! ?✨) 让我们做点Vueseful ...
- h5 video 手机 显示第一帧_解决h5嵌入app后video标签poster不能显示视频第一帧（表现为空白）...
这里我们先来描述一下问题,页面中使用了video标签,按照video标签的官方介绍下图介绍: 没有设置poster的情况下在浏览器中我们可以看到视频的第一帧,页面效果如下图左图所示:但是嵌入App后, ...
- 在别人网页上运行js脚本_初始JavaScript，世界上最流行的语言之一
1.JavaScript 是什么? JavaScript 是世界上最流行的语言之一,是一种运行在客户端的脚本语言 (Script 是脚本的意思) 脚本语言:不需要编译,运行过程中由 js 解释器( j ...
- 微信小程序_(校园视)开发视频的展示页_上
微信小程序_(校园视) 开发用户注册登陆 传送门 微信小程序_(校园视) 开发上传视频业务 传送门 微信小程序_(校园视) 开发视频的展示页-上 传送门 微信小程序_(校园视) 开发视频的展示页-下 ...
最新文章
- ruby生成C++头文件引用关系图
- 链客区块链技术问答社区
- 给书配代码-电力经济调度（3）：计及网络安全约束的经济调度模型
- Window7文件共享之法 [转载]
- Avalonia跨平台入门第二十一篇之玩耍CEF
- c#ovalshape_【原创】C# 实现拖拉控件改变位置与大小(SamWang)(附源代码下载)
- (转载)将h.264视频流封装成flv格式文件（二.开始动手）http://blog.csdn.net/yeyumin89/article/details/7932431...
- 蓝桥杯省赛2018年Java组B组
- 典型信息化案例点评（2）
- 定制自己的ubuntu 镜像文件 （remastersys, respin, USB live CD)
- 微信开发工具获取用户头像和用户昵称，实现本地和真机调试
- 数学建模线性规划之Lingo教程
- wpa_supplicant交叉编译
- 选择适合自己的测试广度和深度
- go “静态目录服务” http.FileServer
- Java LeetCode每日一题-从易到难带你领略算法的魅力（七）：Z 字形变换
- HP DL380 G3服务器重做RAID
- vSphere中Storage vMotion的流程详解
- android 挖孔屏适配_使用Flexible实现手淘H5页面的终端适配
- NOIP2017day2题解