js 初学笔记

最新推荐文章于 2024-07-25 22:09:37 发布

xxx_bug

最新推荐文章于 2024-07-25 22:09:37 发布

阅读量395

点赞数

分类专栏： js 文章标签： function numbers apple border css div

本文链接：https://blog.csdn.net/xxx_bug/article/details/7649163

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

为了应付作业，和龙哥商量了一下~决定写网页应付！但是，整个的设计，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<10
m=checkTime(m)
s=checkTime(s)
document.getElementById('txt').innerHTML=h+":"+m+":"+s
t=setTimeout('startTime()',500)
}

function checkTime(i)
{
if (i<10) 
  {i="0" + i}
  return i
}
</script>
</head>

<body οnlοad="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"  οnmοuseοver="mouseOver()" οnmοuseοut="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的写起来不一样！！

就这点东西，但是自己慢慢搞懂的过程实在很好玩！花了很多时间在设计上！

xxx_bug

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 初学笔记

为了应付作业，和龙哥商量了一下~决定写网页应付！但是，整个的设计，js，css，html的学习都很有趣。记忆力不好~果断地总结下~1、w3school入门必学的一些经典实例~~感觉其中一个比较有收获的是显示一个时钟function startTime(){var today=new Date()var h=today.getHours()var m=today.get
复制链接

扫一扫

专栏目录