javascript课程设计个人网页(web课程设计个人网站)
javascript html 设计一个登录界面
注册页面代码：
!DOCTYPE?html
html?lang="en"
head
????meta?charset="UTF-8"
????title注册/title
/head
body
form?method="post"?onsubmit="return?false"?id="form"
????input?type="text"?name="username"?placeholder="用户名"br
????input?type="password"?name="password"?placeholder="密码"br
????input?type="password"?name="rePassword"?placeholder="再次输入密码"br
????input?type="submit"?onclick="register_user()"?value="注册"br
/form
a?href="login.html"去登录/a
script
????var?localDB?=?openDatabase('localDB',?'1.0',?'Test?DB',?2?*?1024?*?1024);
????localDB.transaction(function?(ts)?{
????????ts.executeSql('CREATE?TABLE?IF?NOT?EXISTS?user(username,password)')
????});
????function?register_user()?{
????????var?username?=?document.getElementsByTagName("input")[0].value;
????????var?password?=?document.getElementsByTagName("input")[1].value;
????????var?rePassword?=?document.getElementsByTagName("input")[2].value;
????????if(password?!=?rePassword)
????????{
????????????alert("两次输入的密码不同，请重新输入");
????????}else
?{
????????????localDB.transaction(function(ts){
????????????????ts.executeSql("INSERT?INTO?user?(username,password)?VALUES?('"+username+"','"+password+"');");
????????????????alert("注册成功");
????????????});
????????}
????}
/script
/body
/html
登录页面代码：
!DOCTYPE?html
html?lang="en"
head
????meta?charset="UTF-8"
????title登录/title
/head
body
form?onsubmit="return?false"?method="post"
????input?type="text"?placeholder="用户名"br
????input?type="password"?placeholder="密码"br
????input?type="submit"?value="登录"?onclick="login()"br
/form
a?href="register.html"去注册/a
script
????var?localDB?=?openDatabase('localDB',?'1.0',?'Test?DB',?2?*?1024?*?1024);
????localDB.transaction(function?(ts)?{
????????ts.executeSql("SELECT?*?FROM?user",[],function?(tx,?results)?{
????????????var?len?=?results.rows.length;
????????????if(len=0)
????????????{
????????????????localDB.transaction(function?(ts)?{
????????????????????ts.executeSql('CREATE?TABLE?IF?NOT?EXISTS?user(username,password)')
????????????????});
????????????}
????????});
????});
????function?login()?{
????????var?username?=?document.getElementsByTagName("input")[0].value;
????????var?password?=?document.getElementsByTagName("input")[1].value;
????????localDB.transaction(function?(ts)?{
????????????ts.executeSql("SELECT?*?FROM?user?WHERE?username='"+username+"';",[],function?(ts,?res)?{
????????????????if(res.rows.length=0)
????????????????{
????????????????????alert("登录失败，用户未注册");
????????????????}else?if?(password?==?res.rows[0].password)
????????????????{
????????????????????alert("登录成功,三秒后跳转到百度");
????????????????????setInterval(function?()?{
????????????????????????location.href?=?"";
????????????????????},3000);
????????????????}else
?{
????????????????????alert("登录失败，密码错误");
????????????????}
????????????});
????????})
????}
/script
/body
/html
以上代码使用了WEB SQL，还请选择合适的浏览器查看。
用javascript制作网页
第一、把所有复选框的name改成一样的
第二、(全选、反选)script type="text/javascript"
//复选框全选
function checkAll(formvalue) {
var roomids = document.getElementsByName(formvalue);
for ( var j = 0; j roomids.length; j++) {
if (roomids.item(j).checked == false) {
roomids.item(j).checked = true;
}
}
}
//复选框全不选
function uncheckAll(formvalue) {
var roomids = document.getElementsByName(formvalue);
for ( var j = 0; j roomids.length; j++) {
if (roomids.item(j).checked == true) {
roomids.item(j).checked = false;
}
}
}
//复选框选择转换
function switchAll(formvalue) {
var roomids = document.getElementsByName(formvalue);
for ( var j = 0; j roomids.length; j++) {
roomids.item(j).checked = !roomids.item(j).checked;
}
}
/script
第三、弹出新页面：script window.open(页面名);script/
课程设计：使用JavaScript制作一个网页上的贪吃蛇游戏
html
head
title贪吃蛇 Snake v2.4/title
style
body{
font-size:9pt;
}
table{
border-collapse: collapse;
border:solid #333 1px;
}
td{
height: 10px;
width: 10px;
font-size: 0px;
}
.filled{
background-color:blue;
}
/style
/head
script
function $(id){return document.getElementById(id);}
/**************************************************************
* javascript贪吃蛇 v2.4 br /
* author: sunxing007 05/14/2009br /
* 转载请注明来自 谢谢！br /
* v2.4修正了蛇身颜色可以随着蛇前进而移动
**************************************************************/
//贪吃蛇类
var Snake = {
tbl: null,
/**
* body: 蛇身，数组放蛇的每一节，
* 数据结构{x:x0, y:y0, color:color0},
* x,y表示坐标,color表示颜色
**/
body: [],
//当前移动的方向,取值0,1,2,3, 分别表示向上,右,下,左, 按键盘方向键可以改变它
direction: 0,
//定时器
timer: null,
//速度
speed: 250,
//是否已经暂停
paused: true,
//行数
rowCount: 30,
//列数
colCount: 30,
//初始化
init: function(){
var colors = ['red','orange','yellow','green','blue','purple','#ccc'];
this.tbl = $("main");
var x = 0;
var y = 0;
var colorIndex = 0;
//产生初始移动方向
this.direction = Math.floor(Math.random()*4);
//构造table
for(var row=0;rowthis.rowCount;row++){
var tr=this.tbl.insertRow(-1);
for(var col=0;colthis.colCount;col++) {
var td=tr.insertCell(-1);
}
}
//产生20个松散节点
for(var i=0; i10; i++){
x = Math.floor(Math.random()*this.colCount);
y = Math.floor(Math.random()*this.rowCount);
colorIndex = Math.floor(Math.random()*7);
if(!this.isCellFilled(x,y)){
this.tbl.rows[y].cells[x].style.backgroundColor = colors[colorIndex];
}
}
//产生蛇头
while(true){
x = Math.floor(Math.random()*this.colCount);
y = Math.floor(Math.random()*this.rowCount);
if(!this.isCellFilled(x,y)){
this.tbl.rows[y].cells[x].style.backgroundColor = "black";
this.body.push({x:x,y:y,color:'black'});
break;
}
}
this.paused = true;
//添加键盘事件
document.onkeydown= function(e){
if (!e)e=window.event;
switch(e.keyCode | e.which | e.charCode){
case 13: {
if(Snake.paused){
Snake.move();
Snake.paused = false;
}
else{
//如果没有暂停，则停止移动
Snake.pause();
Snake.paused = true;
}
break;
}
case 37:{//left
//阻止蛇倒退走
if(Snake.direction==1){
break;
}
Snake.direction = 3;
break;
}
case 38:{//up
//快捷键在这里起作用
if(event.ctrlKey){
Snake.speedUp(-20);
break;
}
if(Snake.direction==2){//阻止蛇倒退走
break;
}
Snake.direction = 0;
break;
}
case 39:{//right
if(Snake.direction==3){//阻止蛇倒退走
break;
}
Snake.direction = 1;
break;
}
case 40:{//down
if(event.ctrlKey){
Snake.speedUp(20);
break;
}
if(Snake.direction==0){//阻止蛇倒退走
break;
}
Snake.direction = 2;
break;
}
}
}
},
//移动
move: function(){
this.timer = setInterval(function(){
Snake.erase();
Snake.moveOneStep();
Snake.paint();
}, this.speed);
},
//移动一节身体
moveOneStep: function(){
if(this.checkNextStep()==-1){
clearInterval(this.timer);
alert("Game over!\nPress Restart to continue.");
return;
}
if(this.checkNextStep()==1){
var _point = this.getNextPos();
var _x = _point.x;
var _y = _point.y;
var _color = this.getColor(_x,_y);
this.body.unshift({x:_x,y:_y,color:_color});
//因为吃了一个食物，所以再产生一个食物
this.generateDood();
return;
}
//window.status = this.toString();
var point = this.getNextPos();
//保留第一节的颜色
var color = this.body[0].color;
//颜色向前移动
for(var i=0; ithis.body.length-1; i++){
this.body[i].color = this.body[i+1].color;
}
//蛇尾减一节， 蛇尾加一节，呈现蛇前进的效果
this.body.pop();
this.body.unshift({x:point.x,y:point.y,color:color});
//window.status = this.toString();
},
//探寻下一步将走到什么地方
pause: function(){
clearInterval(Snake.timer);
this.paint();
},
getNextPos: function(){
var x = this.body[0].x;
var y = this.body[0].y;
var color = this.body[0].color;
//向上
if(this.direction==0){
y--;
}
//向右
else if(this.direction==1){
x++;
}
//向下
else if(this.direction==2){
y++;
}
//向左
else{
x--;
}
//返回一个坐标
return {x:x,y:y};
},
//检查将要移动到的下一步是什么
checkNextStep: function(){
var point = this.getNextPos();
var x = point.x;
var y = point.y;
if(x0||x=this.colCount||y0||y=this.rowCount){
return -1;//触边界，游戏结束
}
for(var i=0; ithis.body.length; i++){
if(this.body[i].x==xthis.body[i].y==y){
return -1;//碰到自己的身体,游戏结束
}
}
if(this.isCellFilled(x,y)){
return 1;//有东西
}
return 0;//空地
},
//擦除蛇身
erase: function(){
for(var i=0; ithis.body.length; i++){
this.eraseDot(this.body[i].x, this.body[i].y);
}
},
//绘制蛇身
paint: function(){
for(var i=0; ithis.body.length; i++){
this.paintDot(this.body[i].x, this.body[i].y,this.body[i].color);
}
},
//擦除一节
eraseDot: function(x,y){
this.tbl.rows[y].cells[x].style.backgroundColor = "";
},
paintDot: function(x,y,color){
this.tbl.rows[y].cells[x].style.backgroundColor = color;
},
//得到一个坐标上的颜色
getColor: function(x,y){
return this.tbl.rows[y].cells[x].style.backgroundColor;
},
//用于调试
toString: function(){
var str = "";
for(var i=0; ithis.body.length; i++){
str += "x:" + this.body[i].x + " y:" + this.body[i].y + " color:" + this.body[i].color + " - ";
}
return str;
},
//检查一个坐标点有没有被填充
isCellFilled: function(x,y){
if(this.tbl.rows[y].cells[x].style.backgroundColor == ""){
return false;
}
return true;
},
//重新开始
restart: function(){
if(this.timer){
clearInterval(this.timer);
}
for(var i=0; ithis.rowCount;i++){
this.tbl.deleteRow(0);
}
this.body = [];
this.init();
this.speed = 250;
},
//加速
speedUp: function(time){
if(!this.paused){
if(this.speed+time10||this.speed+time2000){
return;
}
this.speed +=time;
this.pause();
this.move();
}
},
//产生食物。
generateDood: function(){
var colors = ['red','orange','yellow','green','blue','purple','#ccc'];
var x = Math.floor(Math.random()*this.colCount);
var y = Math.floor(Math.random()*this.rowCount);
var colorIndex = Math.floor(Math.random()*7);
if(!this.isCellFilled(x,y)){
this.tbl.rows[y].cells[x].style.backgroundColor = colors[colorIndex];
}
}
};
/script
body onload="Snake.init();"
/*************************************************************br /
* javascript贪吃蛇 v2.4br /
* author: sunxing007 05/14/2009br /
* 转载请注明来自 a href="";/a 谢谢！br /
**************************************************************/br /
table id="main" border="1" cellspacing="0" cellpadding="0"/table
input type="button" id="btn" value="开始/暂停" /点左边按钮或按Enter开始/暂停游戏br /
input type="button" id="reset" value="重新开始" /br /
input type="button" id="upSpeed" value="加速" /点左边按钮或按Ctrl + ↑加速br /
input type="button" id="downSpeed" value="减速" /点左边按钮或按Ctrl + ↓减速
script
$('btn').onclick = function(){
if(Snake.paused){
Snake.move();
Snake.paused = false;
}
else{
Snake.pause();
Snake.paused = true;
}
};
$("reset").onclick = function(){
Snake.restart();
this.blur();
};
$("upSpeed").onclick = function(){
Snake.speedUp(-20);
};
$("downSpeed").onclick = function(){
Snake.speedUp(20);
};
/script
/body
/html
一个javascript制作的网页
就说思路吧。
1）
颜色是“#dddddd"，要求6个数字随机。
大小是"ddpx",这里就要求10-99随机吧,太大、太小看不到了。
粗细是”font-weight:dddd“,4个数字随机，那些bold也只是特定数字的名称而已。
而javascript字符串中的字符可以用”\udddd“来替换，其中4个随机数字，若是汉字x4e00-x9fa5之间的随机数。
2）问题，都在一个随机数字上。
3）实例化一个标签比如p，然后随机赋予它上述涉及到的style属性，最后设置它的innerText属性把一个随机的汉字当做内容。
其中随机数的函数我试着写一下，
function?getRandom(min,max){
?????min=min||0;
?????max=max||9;
?????var?sp=max-min;
?????var?ad=Math.floor(sp*Math.random());
?????
?????return?min+ad;
?????
}
具体流程，你自己来吧，我只能帮你倒你这里了。
虽然那楼下那个汉子贴出了完整代码，可是限定了范围，不是真随机哇。分数要给哇，我记着要分数去问别人问题，狼哇的捉急哇。555555555555
急求一份html、css、JavaScript的“个人主页”网页设计模板代码。
!--这个模版来自[最好模版-],需要更多模版请访问;
html
head
meta?http-equiv="Content-Type"?content="text/html;?charset=gb2312"
title┆假想敌┆-?颓废模板/title
script?language="JavaScript"?type="text/JavaScript"
!--
function?MM_reloadPage(init)?{??//reloads?the?window?if?Nav4?resized
??if?(init==true)?with?(navigator)?{if?((appName=="Netscape")(parseInt(appVersion)==4))?{
????document.MM_pgW=innerWidth;?document.MM_pgH=innerHeight;?onresize=MM_reloadPage;?}}
??else?if?(innerWidth!=document.MM_pgW?||?innerHeight!=document.MM_pgH)?location.reload();
}
MM_reloadPage(true);
//--
/script
style?type="text/css"
!--
BODY?{
SCROLLBAR-FACE-COLOR:?#3F2413;
SCROLLBAR-HIGHLIGHT-COLOR:?
#FFFFFF;
SCROLLBAR-SHADOW-COLOR:?#ffffff;
SCROLLBAR-3DLIGHT-COLOR:?#3F2413;
SCROLLBAR-ARROW-COLOR:?
#FFFFFF;
SCROLLBAR-TRACK-COLOR:?#3F2413;
SCROLLBAR-DARKSHADOW-COLOR:?#3F2413;
background-color:?#FFFFFF;
background-image:?url(bg.jpg);
}
--
/style
/head
body
div?id="Layer1"?style="position:absolute;?width:1000px;?height:628px;?z-index:1;?left:?0px;?top:?0px;"
??div?align="center"
????pnbsp;/p
????pnbsp;/p
????pnbsp;/p
????pnbsp;/p
????pimg?src="1.jpg"?width="650"?height="400"?border="0"?usemap="#Map2"
??????map?name="Map2"
????????area?shape="rect"?coords="321,379,490,399"?href=""?target="_blank"?alt="┆假想敌┆"
????????area?shape="rect"?coords="196,15,242,43"?href="home.htm"?target="main1"?alt="home"
??????/map
??????map?name="Map"
????????area?shape="rect"?coords="18,196,60,220"?href="home.htm"?target="main1"?alt="home"
??????/map
????/p
??/div
/div
?
div?id="Layer2"?style="position:absolute;?width:412px;?height:295px;?z-index:2;?left:?382px;?top:?203px;"
iframe?src="home.htm"?name="main1"?width="412"?height="295"
?frameborder="0"?scrolling="yes"?style="border:0px;"allowtransparency="true"/iframe/div
/body
/html
span?style="display:none;"这个模版来自,更多模版请访问a?href="";/anbsp;a?href="";/anbsp;a?href="";/a/span
网页制作要学哪些课程？
初级前端
主要学习三个部分：HTML，CSS，JavaScript
一、html + css部分：
这部分特别简单，到网上搜资料，书籍视频非常多。css中盒子模型，流动，block，inline，层叠，样式优先级等这些自学起来也是非常容易。最后再深入了解下浏览器差异性，ie9以下兼容简单了解就行了，ie9以下浏览器被淘汰掉是趋势，低版本没必要浪费大量时间去学习兼容主流浏览器，google chrome浏览器、firefox浏览器、safari浏览器、opera浏览器即可。浏览器差异内容很多，建议在实践中多多积累。
二、JavaScript部分。
1.基础学习：
难点，也是重点，要学的内容实在很多，如果没有其他编程语言的基础的话，学起来可能要费些力，有很多比较抽象的概念，必须要深入理解，比如闭包、原型、面向对象、封装等，要理解透彻。看书是必不可少的，找一本优秀的js书从头到尾，反复研究学习，第一遍可以快速翻阅，大体知道了解概念即可，第二三遍就需要深入学习了。另外，js面向对象编程必须要学习，非常重要，个人推荐一本书， Stoyan Stefanov著，凌杰译的《javascript面向对象指南》。边学边练，实践出真知。
2.jQuery学习：
这些基础知识掌握好之后，还需要学jQuery，这是一个非常优秀的Javascript库，大型开发必备。它简化了Javascript的复杂操作，消除了Javascript跨平台兼容问题，提供了大量实用方法，有良好的文档和帮助手册，是一个非常成熟的Javascript库。慕课网学习视频幕课网。学习方法也很简单，照着产品文档做几个页面就行了，不用面面俱到，以后遇到问题查文档就行了。
大概流程就是这样，如下图所示：
3.进阶学习：
有了以上知识，对于大多数小型网站，你应该已经可以写出能够工作的代码了。但要想成为更专业的前端，你还需继续努力。更高的要求大概还有四方面：易维护，可测试，高性能，低流量（移动端）。
中高级前端
1.工具学习习：大型项目中，前端代码构建已经不是简单的压缩一下了，依赖管理、模块合并、各种编译步步不可缺少，需要学会使用grunt、gulp等前端构建工具，要学习的还有：包管理器bower、npm，代码优化CSS Lint、JSHint、JSLint，CSS预处理器less、sass,代码管理及版本控制svn、Git，web框架/服务器Node、Express，代码规范、HTML模块化、css模块化。如果你想学习JS可以加这个群：611-428-142，每天有免费的直播课程，有录播视频回放，有专业老师解答。
2.布局框架学习如Bootstrap。
3.新技术html5学习。
4.js框架学习，requireJS、 AngularJS等，往前端架构师靠近。
5.nodejs学习。
下图非常好的表达了高级前端工程师需要学习的内容：
到招聘网站，参考任聘要求，准没错，举例如下：
1.精通html和css，能制作符合W3C标准的静态页面；
2.精通JavaScript编程，对面向对象编程思想有深刻理解；
3.精通主流Javascript库/框架jQuery；
4.理解并掌握JavaScript语言核心技术DOM、BOM有Javascript性能优化经验；
5.对浏览器兼容性有深入的研究，精通各种浏览器问题 ；
6.了解Backbone.js、AngularJs等MVC框架并有实际项目开发经验；
7.了解等服务器后台技术和拥有一定的C#编程能力者优先；
8.对交互体验、可用性、用户体验有一定程度的理解；
9.有良好的责任心和团队合作能力、能承受较大的压力；
自己动手搜索下吧，确定目标和方向，以上是个人路线，仅供参考。