开卷资料2

lllAJING

已于 2023-04-23 13:12:17 修改

阅读量38

点赞数

文章标签： javascript 前端 html

于 2023-04-23 12:54:42 首次发布

本文链接：https://blog.csdn.net/lllAJING/article/details/130319207

版权

应用JavaScript编写留言的功能，在文本中输入文字提交后，在下方进行显示。

提示：可将下方内容以列表体现，提交时动态创建列表的项。可使用以下两种方式之一的方法：

使用CreateElenment动态创建li标签及li中的文本
在列表标签ul或者ol对象上设置InnerHtml

列表对象.innerHTML += "<li>文本内容</li>"

运行截图

代码：

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<style>

margin: 0px;

padding: 0px;

}

div{

width: 500px;

height: auto;

margin: 0 auto;

}

textarea{

width: 500px;

margin: 100px 0px auto;

}

input{

margin: 0px;

height: 30px;

width: 100px;

float: right;

}

ul{

margin-top: 50px;

list-style-type: none;

}

li{

padding-top: 10px;

padding-bottom: 10px;

border-bottom: 1px solid black;

width: 500px;

text-indent: 20px;

}

</style>

<body>

<div>

</div>

function myClick(){

var text=document.getElementById("texts").value;

var newNode1=document.createElement("li");

var newText1=document.createTextNode(text);

newNode1.appendChild(newText1);

document.getElementById("ull").appendChild(newNode1);

};

</script>

</body>

</html>

2.设计一个选项卡功能，当鼠标移动至某一选项卡时出现切换。

提示：

选项卡可采用三个行内元素，为选中背景色#000，选中背景色#aaa
选项卡内容可采用三个不同列表
针对选项卡和选项内容定义两组不同样式。选项卡未选中背景色#000，选中背景色#aaa；文本颜色#fff;；选项内容未选中不显示display:none，选中显示display:block。
通过JavaScript动态设置样式，页面对象.classname=“class样式选择器”

如mydiv. className = "selectSpanStyle"

鼠标移至选项卡设置onmouseenter事件

如：mySpan.onmouseenter = function(){

…………

}

运行截图：

代码：

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<style>

margin: 0px;

padding: 0px;

}

div{

width: 450px;

margin: 150px auto;

}

span{

float: left;

text-align: center;

width: 150px;

height: 30px;

padding-top: 8px;

background: #000;

color: #fff;

}

span:hover{

background: #aaa;

}

ul{

list-style-type: none;

}

li{

text-indent: 20px;

border-bottom: 0.5px dashed gray;

line-height: 40px;

}

</style>

<body>

<div>

</ul>

<li>鹅教官、羊陪练……这所中学养的动物成了“网红”</li>

<li>最伤身体的10个生活习惯，一定要避开</li>

<li>12岁孩子带着父亲去西藏吃住行自己拿主意</li>

<li>16岁男孩暑假干了俩月工地，练出满身肌肉，只为赚学费</li>

</ul>

</ul>

</div>

function show(num){

var news1=document.getElementById("news1");

var news2=document.getElementById("news2");

var news3=document.getElementById("news3");

if(num==1){

news1.style.display="block";

news2.style.display="none";

news3.style.display="none";

}

else if(num==2){

news1.style.display="none";

news2.style.display="block";

news3.style.display="none";

}

else if(num==3){

news1.style.display="none";

news2.style.display="none";

news3.style.display="block";

}

</script>

</body>

</html>

3.设计如下表单，并进行数据验证。

提示：

输入元素取值可通过var name =document.getElementsById(“元素id”).value;
判断长度name.length
是否英文字符开头
首字母是大小写字符，获取输入的字符对应的编码

var keycode=name.charCodeAt(0);

if(keycode <65||( keycode >90&& keycode <97)|| keycode >122){

不是英文字符

}

运行截图

代码：

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<style>

* {

margin: 0;

padding: 0;

}

form {

width: 500px;

margin: 100px auto;

background-color: #00ccff;

}

.box {

box-sizing: border-box;

width: 500px;

height: 350px;

padding: 30px 100px;

}

.zhuce {

width: 500px;

height: 50px;

background-color: #0099cc;

color: #fff;

font-size: 20px;

text-align: center;

line-height: 50px;

font-weight: bold;

}

input {

box-sizing: border-box;

width: 300px;

height: 50px;

outline: none;

font-size: 18px;

padding-left: 10px;

}

button {

width: 300px;

height: 50px;

background: #0099cc;

border: none;

color: #fff;

font-size: 20px;

font-weight: bold;

}

div {

height: 60px;

color: red;

font-size: 16px;

line-height: 60px;

}

</style>

<body>

<form>

</div>

</form>

var idnm = document.getElementById('idnm');

var pwd = document.getElementById('pwd');

var message1 = document.querySelector('.message1');

var message2 = document.querySelector('.message2');

idnm.onblur = function () {

var keycode = idnm.value.charCodeAt(0);

if (this.value.length < 6 || this.value.length > 18) {

message1.innerHTML = '用户名长度必须为6～18位!';

} else if (keycode < 65 || (keycode > 90 && keycode < 97) || keycode > 122) {

message1.innerHTML = '用户名必须以英文字母开头!';

} else {

message1.innerHTML = ' '

}

pwd.onblur = function () {

if (this.value.length < 6 || this.value.length > 18) {

message2.innerHTML = '密码长度不能小于6位!';

} else {

message2.innerHTML = ' '

}

</script>

</body>

</html>

lllAJING

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
开卷资料2

文本内容
复制链接

扫一扫

开卷资料2

“相关推荐”对你有帮助么？