html+CSS+js部分基础运用12

最新推荐文章于 2024-06-20 18:29:17 发布

-Initiation

最新推荐文章于 2024-06-20 18:29:17 发布

阅读量906

点赞数 23

分类专栏：前端3剑客运用（html+css+js）文章标签： html css javascript

本文链接：https://blog.csdn.net/m0_55709044/article/details/139411981

版权

前端3剑客运用（html+css+js）专栏收录该内容

20 篇文章 0 订阅

订阅专栏

一、显示列表项的内容

编写javaScript代码实现用户登录时数据合法性校验功能，界面如图教材P338 第2题，效果如下图所示：

图1 显示列表项内容

二、日期的处理

实时显示当前时间及累计登录时间，如下图2所示。[提示window.setInterval(function,1000),onload事件]。

图2时间处理

三、实现电话拨号键盘

如图3所示，点击数字文本框中会依次显示拨打的号码。

图3拨号键盘

（写清楚每一步骤，包含文字说明、代码）

、<script>

function $(id) {

return document.getElementById(id);

}

function sum() {

var index =$("a").selectedIndex;

var x=$("a").options[index].value;

var z=$("a").options[index].text;

alert("教材名称："+z+"\n"+"定价："+x);

}

</script>

2.
写js函数和借助onChange属性。

var now1=new Date();

var y2=now1.getFullYear();

var m2=now1.getMonth()+1;

var d2=now1.getDate();

var h2=now1.getHours();

var mi2=now1.getMinutes();

var s2=now1.getSeconds();

function time() {

var now=new Date();

var y=now.getFullYear();

var m=now.getMonth()+1;

var d=now.getDate();

var h=now.getHours();

var mi=now.getMinutes();

var s=now.getSeconds();

document.getElementById("time").innerHTML = "当前时间："+y + "年" + m + "月" + d + "日" + "\t" + h + ":" + mi +":" + s;

var y1=y-y2;

var m1=m-m2;

var d1=d-d2;

var h1=h-h2;

var mi1=mi-mi2;

var s1=s-s2;

document.getElementById("time1").innerHTML = "您已登录，累计时间："+y1 + "年" + m1 + "月" + d1 + "日" + "\t" + h1 + ":" + mi1 +":" + s1;

}

setInterval("time()",1000);

</script>

借助js本身获取Date()时间函数再结合取时间的c值最后加上调用id就可以完成功能。

function sum(num) {

document.getElementById("text1").value+=num;

}

</script>

借助<script>函数加上id的调用就可以完成功能。

<!DOCTYPE html>

<head>

<title>Document</title>

function $(id) {

return document.getElementById(id);

}

function sum() {

var index =$("a").selectedIndex;

var x=$("a").options[index].value;

var z=$("a").options[index].text;

alert("教材名称："+z+"\n"+"定价："+x);

}

</script>

</head>

<body>

<h3>显示列表的内容</h3>

<option value="35元">计算机组成原理</option>

<option value="43元">计算机网络</option>

<option value="40元">java程序设计</option>

</select>

</form>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Document</title>

var now1=new Date();

var y2=now1.getFullYear();

var m2=now1.getMonth()+1;

var d2=now1.getDate();

var h2=now1.getHours();

var mi2=now1.getMinutes();

var s2=now1.getSeconds();

function time() {

var now=new Date();

var y=now.getFullYear();

var m=now.getMonth()+1;

var d=now.getDate();

var h=now.getHours();

var mi=now.getMinutes();

var s=now.getSeconds();

document.getElementById("time").innerHTML = "当前时间："+y + "年" + m + "月" + d + "日" + "\t" + h + ":" + mi +":" + s;

var y1=y-y2;

var m1=m-m2;

var d1=d-d2;

var h1=h-h2;

var mi1=mi-mi2;

var s1=s-s2;

document.getElementById("time1").innerHTML = "您已登录，累计时间："+y1 + "年" + m1 + "月" + d1 + "日" + "\t" + h1 + ":" + mi1 +":" + s1;

}

setInterval("time()",1000);

</script>

</head>

<body>

<h2 style="text-align: center;">date的处理</h2>

<hr>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Document</title>

function sum(num) {

document.getElementById("text1").value+=num;

}

</script>

</head>

<body>

<h2>实现电话拨号键盘</h2>

<hr>

</form>

</body>

</html>

-Initiation

关注

23
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
1
评论
html+CSS+js部分基础运用12

实时显示当前时间及累计登录时间，如下图2所示。[提示window.setInterval(function,1000),onload事件]。时间函数再结合取时间的c值最后加上调用id就可以完成功能。如图3所示，点击数字文本框中会依次显示拨打的号码。（写清楚每一步骤，包含文字说明、代码）函数加上id的调用就可以完成功能。您已登录，累计时间："图1 显示列表项内容。
复制链接

扫一扫