收藏
批改状态：合格
老师批语：作业名称少了日期哦
parseInt(string, radix)；
setInterval(code, milliseconds);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>春节倒计时</title>
<style>
*{
margin: 0;
padding: 0;
font-size: 26px;
font-weight: bold;
color: #A73741;
}
#timer{
background-color: #FFC1CB;
width: 100%;
height: 400px;
text-align: center;
line-height: 400px;
}
</style>
</head>
<body onload="leftTimer()">
<div id="timer"></div>
<script>
function leftTimer(year,month,day,hour,minute,second){
var leftTime = (new Date(year,month-1,day,hour,minute,second)) - (new Date()); //计算剩余的毫秒数
var days = parseInt(leftTime / 1000 / 60 / 60 / 24 , 10); //计算剩余的天数
var hours = parseInt(leftTime / 1000 / 60 / 60 % 24 , 10); //计算剩余的小时
var minutes = parseInt(leftTime / 1000 / 60 % 60, 10);//计算剩余的分钟
var seconds = parseInt(leftTime / 1000 % 60, 10);//计算剩余的秒数
days = checkTime(days);
hours = checkTime(hours);
minutes = checkTime(minutes);
seconds = checkTime(seconds);
setInterval("leftTimer(2019,1,23,04,15,0)",1000);
document.getElementById("timer").innerHTML ="2019年农历倒计时" + days+"天" + hours+"小时" + minutes+"分"+seconds+"秒";
}
function checkTime(i){
if(i<10)
{
i = "0" + i;
}
return i;
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
jquery安装与基础语法
jquery引用方式：
<head> <script src="jquery-1.10.2.min.js"></script> </head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
基础语法：
<script>
$('选择器').action()
美元符号定义jquery；
选择器 用于“查询”和“查找” HTML元素；
action（）执行对元素的操作；
人当就绪函数 ready（）（也成为jquery入口函数）作用：为了防止文档在完全加载（就绪）之前运行jquery代码
$(document).ready(function(){
// body..
});
javascript 入口函数：
window.onload=function(){
}
</script>
---------------------------------------------------------------------------------------------------------------------------
2.jquery事件：
$(document).ready()当文档加载完成时；
$(selection).click()当选取元素的点击事件；
$(selection).focus()当选元素的获得焦点事件；
$(selection).mouseover()当鼠标指针移上被选元素元素时；
$(selection).mouseleave()当鼠标指针离开被选元素元素时；
jquery事件原理：当事件被出发时会调用一个函数（事件处理函数；）
------------------------------------------------------------------------------------------------------------------------------
jquery选择器
jquery中所有选择器都是以美元符号开头：$(),它基于已经存在的css选择器；
元素选择器/id选择器/类选择器/属性/属性值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
<style>
.content{
width: 200;
height: 200px;
background: pink;
text-align: center;
line-height: 200px;
margin-bottom: 10px;
}
</style>
<script>
$(function(){
$('.but').click(function(){
$('.content').css('display','none')
})
$('#but').click(function(){
$('.content').show('background','#ff6600')
})
// 类型选择器
$(':button.but1').click(function(){
$('.content').text('html中文网')
})
})
$(':button.but1').click(function(){
$('.content').text('html中文网')
})
</script>
</head>
<body>
<div class="content">hello</div>
<button class="but">点我隐藏</button>
<button id="but">点我显示</button>
<button class="but1">点我有惊喜</button>
</body>
</html>点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../js/jq_3.3.1_mi.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
.box,ul,li{
border: 1px solid #ccc;
margin: 0 auto;
margin-top: 20px;
text-align: center;
}
.box{
width: 500px;
height: 500px;
}
.box ul{
width: 450px;
height: 450px;
}
.box ul li{
width: 400px;
height: 400px;
list-style: none;
line-height: 400px;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>
<span>欢迎来到<a href="">php中文网</a>!</span>
</li>
</ul>
</div>
<p>
<span>span1</span>
<span class="cl">span2<a href="">php</a>a></span>
</p>
</body>
<script>
// jquery遍历（用一种相对的关系来查找html元素）
// 向上查找（祖先元素）
// parent()方法返回被选元素的直接父元素
$(function(){
// $('a').parent().css('border','1px solid red')
// $('a').parents().css('border','1px solid red')
// parents()方法会使用可选参数来过滤对祖先元素的搜索
// $('a').parents('span').css('border','1px solid red')
// parentsUntil()方法返回介于两个给定元素之间的所有祖先元素
// $('a').parentsUntil('.box').css('border','1px solid red')
// 向下查找（子元素）
// children()方法返回被选元素的所有直接子元素
$('.box').children().css('border','1px solid red')
// $('p').children("a").css('border','1px solid red')
// find()方法返回被选元素的所有后代元素
// $('p').find("a").css('border','1px solid red')
// 同级查找（同胞）
// siblings()方法返回被选元素的所有同胞元素
$('span').siblings('.cl').css('color','red');
})
</script>
</html>点击 "运行实例" 按钮查看在线实例
总结：
向上查找（祖先元素）parent()
向下查找 children()
同级查找（同胞） siblings()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../js/jq_3.3.1_mi.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
.box{
border: 1px solid #ccc;
margin: 0 auto;
margin-top: 20px;
text-align: center;
}
.box{
width: 400px;
height: 400px;
line-height: 400px;
border-radius: 50%;
}
.text{
text-shadow: 1px 3px #6d4d8b;
}
</style>
</head>
<body>
<div class="box">
随便写写
</div>
<p>
随便写写
</p>
</body>
<script>
// jquery获取并设置css类;
$(function(){
console.log($('.box').css('height'))
// $('.box').css('background','pink')
// 设置多个css属性:css({'样式名'："value","样式名"："value"})
$('.box').css({'background':'pink','font-weight':'bold'})
// addClass()向被选元素添加一个或多个类
// $(".box").addClass('text')
// removeClass()从被选元素删除一个或多个类
// $(".box").click(function(){
// $(this).removeClass('text')
// })
// hasClass()检查被选元素是否包含指定的class
// console.log($('.box').hasClass('text'))
$(".box").click(function(){
if($(this).hasClass('text')){
$(this).removeClass('text')
}else{
$('.box').addClass('text')
}
})
// 操作css
// height（）返回或设置匹配元素的高度
console.log($('.box').height())
// width()方法返回或设置匹配元素的宽度；
console.log($('.box').width())
})
</script>
</html>点击 "运行实例" 按钮查看在线实例
总结：
addClass()向被选元素添加一个或多个类
removeClass()从被选元素删除一个或多个类
hasClass()检查被选元素是否包含指定的class
height（）返回或设置匹配元素的高度
width()方法返回或设置匹配元素的宽度；
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
