JavaScript练习

最新推荐文章于 2025-01-10 09:43:14 发布

乔治9

最新推荐文章于 2025-01-10 09:43:14 发布

阅读量203

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/u012613144/article/details/98730794

前端专栏收录该内容

25 篇文章

订阅专栏

1、

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>无标题文档</title>

</script>

</head>

<body>

<p>

点击按钮显示计算结果：

</p>

<button type="button" onclick="Function()">click me</button>

function Function(){

var x=2;

var y=x+3

var demovalue=document.getElementById("demo");

demovalue.innerHTML=y;

}

</script>

</body>

</html>

2、判断输入的值是否满足条件

<!DOCTYPE html>

<html>

<body>

function myFunction()

{

try

{

var x=document.getElementById("demo").value;

if(x=="") throw "值为空";

if(isNaN(x)) throw "不是数字";

if(x>10) throw "太大";

if(x<5) throw "太小";

}

catch(err)

{

var y=document.getElementById("mess");

y.innerHTML="错误：" + err + "。";

}

</script>

<h1>我的第一个 JavaScript 程序</h1>

<p>请输入 5 到 10 之间的数字：</p>

<button type="button" onclick="myFunction()">测试输入值</button>

</body>

</html>

3、 "改变颜色"、"改变宽高"、"隐藏内容"、"显示内容"、"取消设置"的函数，点击相应按钮执行相应操作，点击"取消设置"按钮后，提示是否取消设置，如是执行操作，否则不做操作。

<!DOCTYPE HTML>

<html>

<head>

<title>style样式</title>

*{ font-size:12px;}

#txt{

height:400px;

width:600px;

border:#333 solid 1px;

padding:5px;

}

line-height:18px;

text-indent:2em;}

</style>

</head>

<body>

<h2 id="con">JavaScript课程</H2>

<h5>JavaScript为网页添加动态效果并实现与用户交互的功能。</h5>

<p>1. JavaScript入门篇，让不懂JS的你，快速了解JS。</p>

<p>2. JavaScript进阶篇，让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。</p>

<p>3. 学完以上两门基础课后，在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。</p>

</div>

<form>

</form>

function dcolor(){

var mychar = document.getElementById("txt");

mychar.style.color="red";

mychar.style.backgroundColor="#ccc";

}

function dwh(){

var mychar = document.getElementById("txt");

mychar.style.width="400px";

mychar.style.height="200px";

}

function dh(){

var mychar = document.getElementById("txt");

mychar.style.display="none";

}

function dclear(){

if(confirm("确定要取消设置吗?")){

var mychar = document.getElementById("txt");

mychar.style.color="#000";

mychar.style.backgroundColor="#fff";

mychar.style.width="600px";

mychar.style.height="400px";

mychar.style.display="block";

}

function ds(){

var mychar = document.getElementById("txt");

mychar.style.display="block";

}

</script>

</body>

</html>

4、计算器

<!DOCTYPE html>

<html>

<head>

<title> new document </title>

function count(){

var txt1 = parseInt( document.getElementById('txt1').value);//获取第一个输入框的值

var txt2 = parseInt( document.getElementById('txt2').value);//获取第二个输入框的值

var select = document.getElementById('select').value;//获取选择框的值

var result = '';

switch (select)

{

case '+':

result = txt1 + txt2;

break;

case '-':

result = txt1 - txt2;

break;

case '*':

result = txt1 * txt2;

break;

case '/':

result = txt1 / txt2;

break;

}

document.getElementById('fruit').value = result;//设置结果输入框的值

}

</script>

</head>

<body>

</select>

</body>

</html>

5、