js 初学笔记
来源:互联网 发布:dp是什么意思网络术语 编辑:程序博客网 时间:2024/06/04 00:22
为了应付作业,和龙哥商量了一下~决定写网页应付!但是,整个的设计,js,css,html的学习都很有趣。记忆力不好~果断地总结下~
1、w3school
入门必学的一些经典实例~~感觉其中一个比较有收获的是显示一个时钟
<html><head><script type="text/javascript">function startTime(){var today=new Date()var h=today.getHours()var m=today.getMinutes()var s=today.getSeconds()// add a zero in front of numbers<10m=checkTime(m)s=checkTime(s)document.getElementById('txt').innerHTML=h+":"+m+":"+st=setTimeout('startTime()',500)}function checkTime(i){if (i<10) {i="0" + i} return i}</script></head><body onload="startTime()"><div id="txt"></div></body></html>
学到了js的一些基本的思想和一些函数~比如这个document.getElementById();很好理解很好用的一个。
接着学到的另一个直接应用到主页的实例!
<html><head><script type="text/javascript">function mouseOver(){document.b1.src ="/i/eg_mouse.jpg"}function mouseOut(){document.b1.src ="/i/eg_mouse2.jpg"}</script></head><body><a href="/index.html" target="_blank"><img border="0" alt="Visit W3School!" src="/i/eg_mouse2.jpg" name="b1" onmouseover="mouseOver()" onmouseout="mouseOut()" /></a></body></html>
里面的两个function其实直接这样定义当然只适用于单个图片的,如果是多个呢??就这样~
function mouseOver(source,id){document.getElementById(id).src = source;}function mouseOut(source,id){document.getElementById(id).src = source;}
2、设计
这里要美观当然是要考自己的品味啦~!我们主打淡雅简洁,于是龙哥简单的p几张图!(PS果断要学)
经验是:参考其他优秀的设计:apple主页
3、动画
这里去到的是:http://www.cnblogs.com/cloudgamer/archive/2008/05/23/1205642.html
这位大牛的博客里搞的!收获很多!但是代码基本上是直接copy!实在有很多不懂的地方,主要是不熟悉他的code风格,不熟悉各种类,方法。这里就一点点学吧!
这个博客不错!
4、居中!
css的<div style = "position: relative; top:20%; left:13%;">这样一句简单的就可以解决位置问题!
5、page直接嵌入视频
<object style = "position: absolute; left:20%;" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="402" height="325"><param name="movie" value="http://v.ifeng.com/include/exterior.swf?guid=f779b261-1d77-4079-898e-9ada91803250&pageurl=http://www.ifeng.com&fromweb=other&AutoPlay=false" /><param name="quality" value="high" /><param name="allowScriptAccess" value="always" /><embed src="http://v.ifeng.com/include/exterior.swf?guid=f779b261-1d77-4079-898e-9ada91803250&pageurl=http://www.ifeng.com&fromweb=other&AutoPlay=false" quality="high" allowScriptAccess="always" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="400" height="325"></embed></object>
这段来自凤凰网的代码!直接ctrl +c+V!tudou和youku的写起来不一样!!
就这点东西,但是自己慢慢搞懂的过程实在很好玩!花了很多时间在设计上!
- js 初学笔记
- js初学笔记
- node.js初学笔记
- JS初学笔记
- js初学笔记第一课
- js初学笔记(一)
- js初学笔记(二)
- js初学笔记(三)
- JS初学笔记(2)
- JS初学笔记(3)
- JS初学笔记(4)
- pomelo+cocos2d-js之初学笔记一
- JS初学笔记·事件处理
- 【学习笔记】 初学JS写了个轮播图
- js初学
- 初学JS
- 初学JS
- 初学js
- 表单处理
- 零售连锁商业智能分析(BI)实例(ZT) <2>
- Treats for the Cows 记忆化搜索
- 单片机实时温度采集并通过串口通信上传电脑显示
- Perl 脚本中使用ls 获取目录名或文件名注意事项
- js 初学笔记
- 集群NAS技术架构
- Android Native code 的绘图方法2
- django创建博客
- ORACLE LOB 大对象处理
- 广度遍历二叉树
- 如何自定义组件(JavaBean)
- 层次遍历二叉树(相同类型的结构体可以直接赋值)
- django 博客一