您当前的位置：首页 > 生活常识

javascript设计网页作品（如何用JS制作以下网页）

时间：2023-01-29 23:20:20

本文目录

如何用JS制作以下网页
网页设计技术的JavaScript
html5网页制作+javascript
一个javascript制作的网页
用javascript制作网页
javascript设计一个网页,设计一个网页，有3个文本框和2个按钮，第一个文本框用于输入一个用于运算的数字
利用JavaScript制作网页
用JavaScript给做个网页！！
课程设计：使用JavaScript制作一个网页上的贪吃蛇游戏
用javascript设计网页如图

如何用JS制作以下网页

这样的有几种写法，一个就是发送请求给后台，传的数据是邮箱，然后获取用户名，域名，顶级域名，然后渲染到页面上，但是这得后台配合，第二个就是自己声明假的数据，就是一个数组，里面有多个对象,比如：《input type=“text“ placeholder=“请输入邮箱“》《button》开始分析《/button》《div》用户名:《span class=“username“》《/span》《/br》域名:《span class=“domain“》《/span》《/br》顶级域名:《span class=“top-domain“》《/span》《/div》《script type=“text/javascript“》var arr = [{email:“xx@163.com“,username:“zhangsan“,domain:“hao123“,topDomain:“.com“},{email:“yy@qq.com“,username:“lisi“,domain:“baidu“,topDomain:“.com“},{email:“zz@msn.com“,username:“wangwu“,domain:“taobao“,topDomain:“.com“}];var inp = document.getElementsByTagName(“input“);var btn = document.getElementsByTagName(“button“);var username = document.getElementsByClassName(“username“);var domain = document.getElementsByClassName(“domain“);var topDomain = document.getElementsByClassName(“top-domain“);btn.onclick = function() {var val = inp.value;username.textContent = ““;domain.textContent = ““;topDomain.textContent = ““;for (var i=0;i《arr.length;i++) {if (val == arr[i].email) {username.textContent = arr[i].username;domain.textContent = arr[i].domain;topDomain.textContent = arr[i].topDomain;}}}《/script》

网页设计技术的JavaScript

JavaScript具有脚本语言的简单这个特性,编写容易,不需要有很深的编程经验.JavaScript语言是通过嵌入或整合在标准HTML语言中实现的,也就是说JavaScript的程序是直接加入在HTML文档里,当浏览器读取到HTML文件中JavaScript的程序,就立即解释并执行有关的操作,无须编译器,其运行速度比JavaApplet要快得多.现在,JavaScript已经成为了制作动态网页必不可少的元素,大家经常在网页上看到的动态按钮,滚动字幕,javaScript技术制作的.

html5网页制作+javascript

《!DOCTYPE html》《html》《head》《meta charset=“utf-8“ /》《meta http-equiv=“X-UA-Compatible“ content=“IE=edge“ /》《title》计算《/title》《meta name=“viewport“ content=“width=device-width, initial-scale=1“ /》《/head》《body》《script》function student(serialNumber, name, sex, birthday, score) {this.serialNumber = serialNumber;this.name = name;this.sex = sex;this.birthday = birthday;this.score = score;}student.prototype.getAge = function() {var birthday = new Date(this.birthday.replace(/-/g, “\/“));var d = new Date();var age =d.getFullYear() -birthday.getFullYear() -(d.getMonth() 《 birthday.getMonth() ||(d.getMonth() == birthday.getMonth() &&d.getDate() 《 birthday.getDate())? 1: 0);return age;}student.prototype.study = function() {this.score++;}var obj = new student(1, ’张三’, ’男’, ’1990-01-01’, 65);console.log(’入参：’, 1, ’张三’, ’男’, ’1990-01-01’, 65);console.log(’年龄：’, obj.getAge());obj.study();console.log(’学习：’, obj.score);obj.study();console.log(’学习：’, obj.score);var obj2 = new student(2, ’王五’, ’女’, ’1970-01-01’, 85);console.log(’入参：’, 2, ’王五’, ’女’, ’1970-01-01’, 85);console.log(’年龄：’, obj2.getAge());obj2.study();console.log(’学习：’, obj2.score);obj2.study();console.log(’学习：’, obj2.score);obj2.study();console.log(’学习：’, obj2.score);《/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

用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设计一个网页,设计一个网页，有3个文本框和2个按钮，第一个文本框用于输入一个用于运算的数字

《!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN“ “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“》《html xmlns=“http://www.w3.org/1999/xhtml“》《head》《meta http-equiv=“Content-Type“ content=“text/html; charset=utf-8“ /》《title《/title》《script type=“text/javascript“》function $(id){return document.getElementById(id);}window.onload = function(){$(“btn“).onclick=function(){var n1=$(“num1“).value;var n2=$(“num2“).value;if($(“fun1“).value==“+“)$(“result1“).innerText=Number(n1)+Number(n2);if($(“fun1“).value==“-“)$(“result1“).innerText=Number(n1)-Number(n2);if($(“fun1“).value==“*“)$(“result1“).innerText=Number(n1)*Number(n2);if($(“fun1“).value==“/“)$(“result1“).innerText=Number(n1)/Number(n2);};};《/script》《/head》《body》《input id=“num1“ type=text /》《br》《br》《input id=“fun1“ type=text /》《br》《br》《input id=“num2“ type=text /》《br》《br》《div》《input type=“button“ id=“btn“ value=“do“/》《/div》《br》《br》《span id=“result1“》《/span》《/body》《/html》

利用JavaScript制作网页

楼主并没有把问题描述清楚在网上找了一段楼主拿它交差吧 ⊙﹏⊙b汗祝你好运~《!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN“》《html》《head》《title》3-3.html《/title》《meta http-equiv=“content-type“ content=“text/html; charset=UTF-8“》《script language=“JavaScript“》 function checkValid() { var tmp1,temp2,str1; //获得text1的值 str1 = document.myform.email.value; //获取第一个@的位置 tmp1 = str1.indexOf(’@’); //获取最后一个@的位置 tmp2 = str1.lastIndexOf(’@’); if(str1.length == 0) //不合法，字符串为空串 window.alert(“请输入内容后再提交“); else if(tmp1 《 0) //不合法，字符串中不包含@字符 window.alert(“字符串中不包含@“); else if(tmp1 == 0 || tmp1 == str1.length-1) //不合法，@字符出现的位置不对 window.alert(“@字符出现的位置不对“); else if(tmp1 != tmp2) //不合法，@字符出现了不止一个 window.alert(“@字符出现了不止一个“); else //合法的E-mail地址 alert(“E-mail地址合法有效“); } 《/Script》《/head》《body》《form name=“myform“》请输入您的E-mail地址：《br》《input type=text value=““ name=“email“》《p》《input type=button value=“提交“name=“ok“onclick=“checkValid()“》《/form》《/body》《/html》

用JavaScript给做个网页！！

效果1：＜div id=“marquees“》＜!-- 这些是字幕的内容，你可以任意定义 --》＜a href=“#“》链接一＜/a》＜br》＜a href=“#“》链接二＜/a》＜br》＜a href=“#“》链接三＜/a》＜br》＜a href=“#“》链接四＜/a》＜br》＜!-- 字幕内容结束 --》＜/div》＜!-- 以下是java-script代码 --》＜script language=“java-script“》＜!--marqueesHeight=200; //内容区高度stopscroll=false; //这个变量控制是否停止滚动with(marquees){noWrap=true; //这句表内容区不自动换行style.width=0; //于是我们可以将它的宽度设为0，因为它会被撑大style.height=marqueesHeight;style.overflowY=“hidden“; //滚动条不可见onmouseover=new Function(“stopscroll=true“); //鼠标经过，停止滚动onmouseout=new Function(“stopscroll=false“); //鼠标离开，开始滚动}//这时候，内容区的高度是无法读取了。下面输出一个不可见的层“templayer“，稍后将内容复制到里面：document.write(’＜div id=“templayer“style=“position:absolute;z-index:1;visibility:hidden“》＜/div》’);function init(){ //初始化滚动内容//多次复制原内容到“templayer“，直到“templayer“的高度大于内容区高度：while(templayer.offsetHeight＜marqueesHeight){templayer.innerHTML+=marquees.innerHTML;} //把“templayer“的内容的“两倍”复制回原内容区：marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;//设置连续超时，调用“scrollUp()“函数驱动滚动条：setInterval(“scrollUp()“,10);}document.body.onload=init;preTop=0; //这个变量用于判断滚动条是否已经到了尽头function scrollUp(){ //滚动条的驱动函数if(stopscroll==true) return; //如果变量“stopscroll“为真，则停止滚动 preTop=marquees.scrollTop; //记录滚动前的滚动条位置marquees.scrollTop+=1; //滚动条向下移动一个像素//如果滚动条不动了，则向上滚动到和当前画面一样的位置//当然不仅如此，同样还要向下滚动一个像素(+1)：if(preTop==marquees.scrollTop){marquees.scrollTop=templayer.offsetHeight-marqueesHeight+1;}}--》＜/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/2009《br /》 * 转载请注明来自 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 onl oad=“Snake.init();“》 /*************************************************************《br /》 * javascript贪吃蛇 v2.4《br /》 * author: sunxing007 05/14/2009《br /》 * 转载请注明来自《a href=“http://blog.csdn.net/sunxing007“》http://blog.csdn.net/sunxing007《/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设计网页如图

《!-- 第一个页面 --》《html》《head》《meta charset=“utf-8“ /》《style type=“text/css“》 ul{list-style:none;} ul li input{background:yellow;}《/style》《script》 var newwin; function openWindow(){newwin = window.open(“新窗口.htm“); } function closeWindow(){newwin.close(); }《/script》《/head》《body》《center》《ul/》《li》《input type=“button“ onclick=“openWindow();“ value=“打开这个窗口“ /》《/li》《li》《input type=“button“ onclick=“closeWindow();“ value=“关闭这个窗口“ /》《/li》《/ul》《/center》《/body》《/html》《!-- 新窗口.htm --》《html》《head》《meta charset=“utf-8“ /》《/head》《body》《h1》我是新窗口《/h1》《/body》《/html》

网页

|| 相关文章