HTML5期末

最新推荐文章于 2023-02-22 11:26:11 发布

Ryanndsc

最新推荐文章于 2023-02-22 11:26:11 发布

阅读量657

点赞数 3

本文链接：https://blog.csdn.net/Ryanndsc/article/details/118486936

版权

第一次考试

本题20分
编程实现排序算法

要求如下：
1：函数名为mySort(),带一个数组形参，按由大到小的顺序排
2：排完后，返回最大值

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

function mySort(arr) {

arr.sort(function (a,b) {

return b-a;

})

return arr[0]

}

</script>

</body>

</html>

本题20分
json编程

要求如下：
1：定义一个myJson函数，带有一个形参，处理传过来的json形如{name:'mike',age:18,address:'chengdu'}，并返回name的值

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

let myjson = {name:'mike',age:18,address:'chengdu'}

function myJson(myjson) {

var obj = eval('(' + myjson + ')')

return obj.name

}

console.log(myJson(myjson));

</script>

</body>

</html>

本题20分
XML编程
要求如下：

实现myXML函数，带有一个形参，解析传过来的XML，并返回name节点的值
XML的样式如：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

function myXML(XMLStirng){

var xmlDoc = new DOMParser().parseFromString(XMLStirng, "text/xml");

return(xmlDoc.childNodes[0].childNodes[0].childNodes[0].nodeValue);

}

// console.log(myXML("<student><name>mike</name><age>18</age><class>one</class></student>"));

</script>

</body>

</html>

本题20分
实现离线存储。
要求如下：

姓名输入文本框的id与name为name。
保存按钮id,name,value为ok。
点击保存按钮后离线存储，所采用的存储技术方式不限制。
刷新页面后，自动将存储的姓名恢复到姓名输入框中。

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

function save() {

let inputVal = document.getElementById('name').value;

localStorage.setItem('name',inputVal)

}

let myName = localStorage.getItem('name');

if (myName) {

document.getElementById('name').value = myName

}

</script>

</body>

</html>

本题20分
实现选择器。
样式如下

要求如下：

单击可选列表中的元素后出现在已选列表中。
单击已选列表中的元素后出现在可选列表中。
其中可选列表的id为select_1,已选列表的id为select_2。
其中可选列表中的元素的id为option_1，option_2...option_n。

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</select>

</select>

function move(obj) {

var objselect1 = document.getElementById("select_1");

var objselect2 = document.getElementById("select_2");

if (obj.parentNode == objselect1) {

objselect2.appendChild(obj);

} else {

objselect1.appendChild(obj);

}

</script>

</body>

</html>

第二次考试

本题20分
搜索框编程。
要求如下：

datalist的id为datalist_1,input的id为input_1。
datalist的元素的值与显示项都为asp,jsp与php（全小写）。

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</datalist>

</body>

<html>

本题20分
HTML5新表单控件。
要求如下：

定义数字微调器：此控件的id为n_1 min为0，max为9。
定义滑动条：此控件的id为r_1 min为0，max为9。
定义日期控件：此控件的id为d_1。

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<form>

</form>

</body>

<html>

var objRange=document.getElementById("r_1");

objRange.addEventListener("change",

function(){

var objMyRangeDisplay=document.getElementById("my_range_display");

objMyRangeDisplay.innerHTML=objRange.value;

});

var obj=document.getElementById("d_1");

obj.addEventListener("change",function(){

var obj2=document.getElementById("date_1");

obj2.innerHTML=obj.value;

});

</script>

本题20分
HTML5语义标签编程
样式如下

要求如下：

各标签如图所示。
所有标签相对定位，左浮动，border都为实线,1px,#6699ff。
所有标签的外边距为10px，内边距为10px。
main的宽为400px
header的宽为358px,高为16px。
nav的宽为358px,高为20px。
footer的宽为358px，高为16px。
aside的宽为100px，高为110px。
section的高为110px。
标签内的文字不为判分条件，有即可。

<!DOCTYPE html>

<html>

<head>

main{

position: relative;

float: left;

border: #6699ff solid 1px ;

margin: 10px;

padding: 10px;

width: 400px;

}

header{

position: relative;

float: left;

border: #6699ff solid 1px ;

margin: 10px;

padding: 10px;

width: 358px;

height: 16px;

}

nav{

position: relative;

float: left;

border: #6699ff solid 1px ;

margin: 10px;

padding: 10px;

width: 358px;

height: 20px;

}

aside{

position: relative;

float: left;

border: #6699ff solid 1px ;

margin: 10px;

padding: 10px;

width: 100px;

height: 110px;

}

section{

position: relative;

float: left;

border: #6699ff solid 1px ;

margin: 10px;

padding: 10px;

height: 110px;

width: 216px;

}

footer{

position: relative;

float: left;

border: #6699ff solid 1px ;

margin: 10px;

padding: 10px;

width: 358px;

height: 16px;

}

</style>

</head>

<body>

<main>

<header>人民医院网站</header>

<aside>内科

外科

妇产科

精神科

</aside>

张医生坐诊时间周一

李医生坐诊时间周一

王医生坐诊时间周一

陈医生坐诊时间周一

</section>

</footer>

</main>

</body>

</html>

本题20分
实现canvas绘图处理。
要求如下：

canvas的id为canvas_1。
canvas大小为150*150,top为10,left为10(单位px)。
在canvas上绘制一正方形。
正方形起点为10，10。边长为100(单位px)。
不填充，边线默认。
用lineTo方法实现。

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<!--首先，找到 <canvas> 元素:

var c=document.getElementById("myCanvas");

然后，创建 context 对象：

var ctx=c.getContext("2d");-->

var objCanvas=document.getElementById("canvas_1")

objCanvas.style.top="10px"

objCanvas.style.left="10px"

var ctx= objCanvas.getContext("2d")

function drawRectangle(){

ctx.beginPath();

/*moveTo(x,y) 定义线条开始坐标*/

ctx.moveTo(10,10)

/*lineTo(x,y) 定义线条结束坐标*/

ctx.lineTo(10,110)

ctx.lineTo(110,110)

ctx.lineTo(110,10)

ctx.lineTo(10,10)

/*然后使用 stroke() 方法来绘制线条:*/

ctx.stroke()

/*关闭路径*/

ctx.closePath()

/*ctx.fillText("Hello World",10,50);*/

}

drawRectangle();

</script>

</body>

<html>

本题20分
使用AJAX技术获取服务器时间。
要求如下：

获取的时间显示在div中，div的id为div_1。
服务器处理程序的地址为"/public_libs/server_ajax_1.php"
Jquery的引入地址为"/public_libs/jquery.js"（注此项非强制,可用原生代码实现）

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var xmlhttp;

if (window.XMLHttpRequest)

{

xmlhttp=new XMLHttpRequest();

}

else

{

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

function myajax(){

xmlhttp.open("GET","/public_libs/server_ajax_1.php")

xmlhttp.onreadystatechange=handleStateChange

xmlhttp.send()

}

myajax();

function handleStateChange(){

if(xmlhttp.readyState==4&&xmlhttp.status==200)

document.getElementById("div_1").innerHTML=xmlhttp.responseText

}

</script>

</body>

<html>

本题10分
Javascript编程实现函数变参的处理
要求如下：

定义函数showArgs()，实现变参。
在函数体中，把各参数用"_"串起来，显示在div中。
div的id为div_1。
如showArgs(1,2,3)，则调用此函数后，div中出现 1_2_3。

<!DOCTYPE html>

<html>

<head>

<style>

#div_1{

position: relative;

width: 100px;

height: 20px;

border: solid 1px #55557f;

text-align: center;

}

</style>

</head>

<body>

var objDiv_1 = document.getElementById("div_1");

function showArgs(){

var string = "";

for(let i = 0; i < arguments.length - 1; i ++){

string = string + arguments[i] + "_";

}

string = string + arguments[arguments.length - 1];

objDiv_1.innerHTML = string;

}

</script>

</body>

</html>

本题10分
Javascript函数式编程
要求如下：

定义函数capsWord(args)。
在函数体中，用函数式编程实现传入的英语语句单词首字母大写。
返回此处理后的句子。
如"i am a teacher"，则调用此函数后，返回 "I Am A Teacher"。

<!DOCTYPE html>

<html>

<head>

</head>

<body>

function capsWord(agrs){

//var result=agrs.split(" ").map(value=>(value.slice(0,1).toUpperCase()+value.slice(1))).join(" ");//将单词首字母变大写

var result=agrs.split(" ").map(value=>(value.slice(0,-1)+value.slice(-1).toUpperCase())).join(" ");//将单词尾字母变大写

return result;

}

var string=capsWord("i am a teacher");

console.log(string);

</script>

</body>

</html>

本题10分
Javascript分词操作
要求如下：

定义函数NLP(args)。
参数为传入的句子。
在函数体中，将传入句子中的第五个单词返回（return xxx的意思)。
注意：句子单词之间是用空格分开的。

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

function NLP(args){

var b=args.split(' ')

return b[4]

}

console.log(NLP("s s s s s s"));

</script>

</body>

</html>

本题10分
Javascript分词操作
要求如下：

定义函数NLP(args)。
参数为传入的句子。
在函数体中，统计句子中的单词数返回（return xxx)。
注意：句子单词之间是用空格分开的。

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

function NLP(args){

var count=1;

var newargs=args.split(' ');

count = newargs.length;

/* for(let i=0;i<newargs.length;i++){

if(newargs[i]==" "){

count++

}

}*/

return count

}

console.log(NLP("s s s s s s"));

</script>

</body>

</html>

本题10分
Javascript编程实现回调
要求如下：

定义函数main，实现回调。
main函数接受一个回调参数实现回调功能。
回调时传"callback"字符串参数给回调函数。

<!DOCTYPE html>

<head>

</head>

<body>

/* function a() {

return 1

}

function b(aa) {

return 2 + aa

}

//调用：

var c=0

c = b(a()) //A是个函数，但它又作为一个参数在B函数中被调*/

console.log(c) //结果显示3

function main(mycallback){

if(typeof mycallback=="function"){

mycallback("callback");

}

function mycallback(a)

{

console.log(a);

}

/*回调参数：方法内部调用方法时进行传参则不加（）*/

main(mycallback);

</script>

</body>

</html>

本题10分
实现canvas绘图处理。
要求如下：

canvas的id为canvas_1。
canvas大小为150*150,top为10,left为10。(单位px)
在canvas上绘制图片，图片地址如下。
/public_libs/img_5.png
图片大小为原始大小，放置位置为1,1。

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</canvas>

var objCanvas=document.getElementById("canvas_1");

objCanvas.style.border="solid 1px #FF0000";

var ctx=objCanvas.getContext("2d");

canvas_1.height=150;

canvas_1.width=150;

canvas_1.style.top="10px";

canvas_1.style.left="10px";

//填充图片

function fillImage(){

var objImg=new Image();

objImg.src="/public_libs/img_5.png";

objImg.οnlοad=function(){

ctx.drawImage(objImg,1,1);

}

fillImage();

</script>

</body>

</html>

本题10分
实现canvas绘图处理。
要求如下：

canvas的id为canvas_1。
canvas大小为150*150,top为10,left为10。(单位px)
在canvas上绘制文字，要求如下：
文字在canvas中的坐标为30,30，
文字内容为hello world,
字体为Arial,大小为20px，RGB正红色。

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

canvas_1.height = 150;

canvas_1.width = 150;//canvas大小为150*150,top为10,left为10。(单位px)

canvas_1.style.position = 'absolute';

canvas_1.style.top = "10px";

canvas_1.style.left = "10px";

var ctx = canvas_1.getContext("2d");

ctx.fillStyle="red"

ctx.font="20px Arial"//字体为Arial,大小为20px，RGB正红色。

ctx.fillText("hello world",30,30)//文字在canvas中的坐标为30,30，

</script>

</body>

</html>

本题10分
使用AJAX技术获取服务器时间。
要求如下：

获取的时间显示在div中，div的id为div_1。
从服务器返回的数据是JSON格式，时间数据的键为time。
服务器处理程序的地址为"/public_libs/server_ajax_521_1.php"
Jquery的引入地址为"/public_libs/jquery.js"（注此项非强制,可用原生代码实现）

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var xmlHttp=new XMLHttpRequest;

function getTime(){

var url="/public_libs/server_ajax_521_1.php";//服务器处理程序的地址为"/public_libs/server_ajax_521_1.php"

xmlHttp.open("GET",url);

xmlHttp.onreadystatechange=handleStateChange;

xmlHttp.send();

}

function handleStateChange(){

if(xmlHttp.readyState==4&&xmlHttp.status==200){

document.getElementById("div_1").innerHTML=JSON.parse(xmlHttp.responseText).time;

}

getTime();

</script>

</body>

</html>

本题10分
使用AJAX技术无刷新提交数据到服务器。
要求如下：

表单id为form_1，姓名输入框id为name，name为name。
提交按钮类型为button，id为b_1，点击提交数据到服务器,提交方式post
提交成功后，把服务器返回的数据显示在div中,div的id为div_1
服务器处理程序的地址为"/public_libs/server_ajax_post_1.php"
jquery的引入地址为"/public_libs/jquery.js"（注此项非强制,可用原生代码实现）

<!DOCTYPE html>

<html>

<head>

</head>

<body>

姓名：<input type="text" name="name" id="name"/>

<input type="button" id="b_1" value=""

formmethod="post" />

</form>

</body>

$("#b_1").click(function(){

$.ajax({

url:'/public_libs/server_ajax_post_1.php',

type:"POST",

data:$('#form_1').serialize(),

success: function(name) {

$("#div_1").text(name);

}

});

</script>

<html>

本题10分
使用VUE技术实现数据响应式处理。
要求如下：

定义div，id为app1。在div中定义子div,id为div_1
div_1的绑定模式为v-text,值为div_1
Vue的对象名为app1。
库地址："/public_libs/vue.js"

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</div>

var app1 = new Vue({

el: '#app1',

data: {

div_1:'div_1'

}

})

</script>

</body>

</html>

Ryanndsc

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
2
评论
HTML5期末

第一次考试本题20分编程实现排序算法要求如下：1：函数名为mySort(),带一个数组形参，按由大到小的顺序排2：排完后，返回最大值<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="vi...
复制链接

扫一扫