jQuery小案例

最新推荐文章于 2024-07-30 03:35:05 发布

果董

最新推荐文章于 2024-07-30 03:35:05 发布

阅读量80

点赞数 4

分类专栏：笔记 html jQuery学习文章标签： html jquery

本文链接：https://blog.csdn.net/weixin_49770265/article/details/116596616

版权

笔记同时被 3 个专栏收录

46 篇文章 0 订阅

订阅专栏

html

20 篇文章 0 订阅

订阅专栏

jQuery学习

8 篇文章 0 订阅

订阅专栏

本文展示了如何利用jQuery实现一个简单的计算器功能，包括加、减、乘、除操作，并提供了电话号码验证的示例，确保输入的号码符合正确的格式。同时，还演示了如何动态设置元素的样式，通过获取用户输入的宽度和高度来调整div的尺寸。

摘要由CSDN通过智能技术生成

计算器、电话号码验证。

直接上手计算器
验证电话号码
获取样式

直接上手计算器：

<div>

<input type="text" id="num1">

<select id="operator" >
<option value="+">+</option>
<option value="-">-</option> html
<option value="*">*</option>
<option value="/">/</option>
</select>

<input type="text" id="num2">

<button οnclick="getResult()">计算</button>

<input type="text" id="result">

</div>

<script>

function getResult() {

var num1 = $("#num1").val();

var num2 = $("#num2").val();

var operator= $(#operator).val();

var result = 0;

switch(operator){

case"+":

result=parseFloat(num1)+parseFloat（mum2）;

break;

case"-":

result=num1 - num2;

break;

case"*":

result=num1*num2; jQuery

break;

case"/":

if(num2==0){

alers("除数不能为零")；

return；

}

result=num1/num2;

break;

default:

break;

}

$("#result").val(result);

}

</script>

验证电话号码：

<input type="text" id="num1" / >

<button id="btn">验证</button>

<script>

$(document).ready (function () {

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

var num2 = $ ("#num1"). val();

if (num2 ! ="") {

var num3 = /^1[3-6]\d{9}$/;

if (num3.test(num2)){

alert("电话号码输入正确!");

} jQuery

else{

alert("电话号码输入有误!");

$("#num1").val(""); //清空input效果

}

}

}

});

});

</script>

获取样式：

<div>

<label for="">宽度:</label>

<input type="text" valune="100px" id="width">

<label for="">高度:</label>

<input type="text" valune="100px" id="height">

</div> html

<div>

<div id="box"></div>

</div>

<script>

$(document).ready (function () {

var width = $("#width").val();

var width = $("#height").val();

$("#box").css({

"width" : width, jQuery

"height" : Height,

});

});

</script>