1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
// 1900鼠年 1900-2024
let yearValue=parseInt(prompt("请输入年份"));
if(yearValue>=1900 && yearValue<=2024){
let judge=(yearValue-1900)%12;
let nowYear='';
switch(judge){
case 0:
nowYear='鼠'
break;
case 1:
nowYear='牛'
break;
case 2:
nowYear='虎'
break;
case 3:
nowYear='兔'
break;
case 4:
nowYear='龙'
break;
case 5:
nowYear='蛇'
break;
case 6:
nowYear='马'
break;
case 7:
nowYear='羊'
break;
case 8:
nowYear='猴'
break;
case 9:
nowYear='鸡'
break;
case 10:
nowYear='狗'
break;
case 11:
nowYear='猪'
}
alert("今年是"+nowYear+"年");
}else{
alert("非法参数:输入范围不合规！");
}
</script>
</body>
</html>2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/jquery-3.7.1.min.js"></script>
</head>
<body>
<p>请输入 姓名拼音</p>
<input id="inputName"/>
<button id="excute">显示长度并复制内容</button>
<p>输入内容长度:</p>
<p id="inputLengthValue"></p>
<input id="copy"/>
<script>
$(function(){
$('#excute').click(function(){
let inputValue = $('#inputName').val();
let len = inputValue.length;
$('#copy').val(inputValue)
$('#inputLengthValue').text(len)
})
})
</script>
</body>
</html>3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/jquery-3.7.1.min.js"></script>
</head>
<body>
<p class="text">我的姓名是 ，</p>
<button class="act">执行效果</button>
<script>
$(function(){
$('.act').click(function(){
$('.text').hide(3000)
.show(3000)
.fadeOut(3000)
.fadeIn(3000)
})
})
</script>
</body>
</html>4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/jquery-3.7.1.min.js"></script>
<style>
div{
height: 100px;
width:100px;
position: relative;
background-color: blue;
}
</style>
</head>
<body>
<div class="elm"></div>
<button class="act">开始动画</button>
<button class="stop">停止动画</button>
<script>
$(function(){
$('.act').click(function(){
$('.elm').animate({
right:'-=200',
},1000)
.animate({
top:'+=200'
},1000)
.animate({
opacity:'0'
},1000)
.animate({
opacity:'1'
},1000)
})
$('.stop').click(function(){
$('.elm').stop(true,true)
})
})
</script>
</body>
</html>