目录
今天给大家分享一些有意思的网页制作，废话不多说，咱直接上代码
一、图片的切换
1.自动切换
//此段代码需写在script标签外
<style>
div{
width: 400px;
height: 400px;
background: url("images/0.jpeg") center/cover; //center/cover是向中间平铺
}
</style>
<div id="d1"></div>var a=0;
setInterval(()=>{
a++;
d1.style.backgroundImage='url("images/'+(a%4)+'.jpeg")';
},1000) //一秒切换一张由于自动切换的效果不好展示，请大家自行去试试吧。
2.按钮切换
//此段代码需写在script标签外
<img id="m1" src="images/0.jpeg" width="400px" height="400px">
<br>
<button onclick="fn01()">点我更改图片</button>function fn01(){
m1.src="images/1.jpeg";
}
图一是切换前，图二是切换后
注意：图片需要自己移入到所需要的项目中
二、更改方块颜色
编写方块并设置颜色
<style>
div{
width: 100px;
height: 100px;
background: lightcoral;
display: inline-block;
}
</style>
<div id="d1" name="b"></div>
<div id="d2" class="a"></div>
<div id="d3" class="a"></div>
<div id="d4" name="b"></div>
<br>
<button onclick="fun01()">根据id更改</button>
<button onclick="fun02()">根据标签更改</button>
<button onclick="fun03()">根据class属性更改</button>
<button onclick="fun04()">根据name属性更改</button>如下图所示：
1.根据id更改
//根据id更改
function fun01(){
var d=document.getElementById("d1");
d.style.background="lightsalmon"
}
2.根据标签更改
//根据标签更改
function fun02(){
//标签选择器会拿出多个元素 需遍历后再修改
var ds=document.getElementsByTagName("div");
for(let i of ds){
i.style.background="lightblue"
}
}
3. 根据class属性修改
//根据class属性修改
function fun03(){
//类选择器也会拿出多个元素 需遍历后修改
var c=document.getElementsByClassName("a");
for(let i of c){
i.style.background="lawngreen"
}
}
4.根据name属性修改
//根据name属性修改
function fun04(){
//类选择器也会拿出多个元素 需遍历后修改
var d=document.getElementsByName("b");
for(let i of d){
i.style.background="lightseagreen"
}
}
三、输入框赋值，获得焦点与失去焦点
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<br>
<button onclick="fun('哈哈')">哈哈</button>
<button onclick="fun('嘻嘻')">嘻嘻</button>定义十个输入框和两个按钮，如下图所示
<script>
function fun(a){
//拿到所有的输入框
var is=document.getElementsByTagName("input")
//赋值
for(let i of is){
i.value=a //a是传进来的参数，也就是按钮上的字
}
}
(()=>{
var is=document.getElementsByTagName("input")
for(let i of is){
//给元素的获得焦点事件赋值
i.onfocus=()=>{
i.value="" //获得焦点后清空输入框
}
//给元素的失去焦点事件赋值
i.onblur=()=>{
i.value="失去焦点" //失去焦点后的赋值
}
}
})();
</script>点击“哈哈”按钮后
获得焦点与失去焦点展示，获得焦点清空输入框，失去焦点后给输入框赋值“失去焦点”
四、图片隐藏与显示
<style>
div{
width: 200px;
height: 200px;
background: url(images/2.jpeg) center/cover;
}
</style>
<div id="d1"></div>
<button onclick="fun01()">①点我有惊喜</button>
<button onclick="fun02()">②点我有惊喜</button>
//隐藏后页面没有空间
function fun01(){
if(d1.style.display==="none"){
d1.style.display="block"
}else{
d1.style.display="none"
}
}
//隐藏后页面有空间
function fun02(){
if(d1.style.opacity==0){
d1.style.opacity=1
}else{
d1.style.opacity=0
}
}
一号按钮是调用了 fun01() 函数，隐藏后没有空间。二号按钮是调用了 fun02() 函数，隐藏后有空间，所以按钮上有一片空白。
五、左侧菜单的显隐
编写左侧菜单
<ul>
<li><i onclick="fun03('u1')">家电</i>
<ul id="u1">
<li>电视机</li>
<li>冰箱</li>
<li>洗衣机</li>
</ul>
</li>
<li><i onclick="fun03('u2')">水果</i>
<ul id="u2">
<li>苹果</li>
<li>西瓜</li>
<li>菠萝</li>
</ul>
</li>
</ul>
菜单的显隐如上图所示。
六、全选功能
定义多个多选框
<table>
<tr><td><input type="checkbox" onclick="fun04(this.checked)"/>全选</td></tr>
<tr><td><input type="checkbox" /></td></tr>
<tr><td><input type="checkbox" /></td></tr>
<tr><td><input type="checkbox" /></td></tr>
<tr><td><input type="checkbox" /></td></tr>
<tr><td><input type="checkbox" /></td></tr>
</table>function fun04(check){
var is=document.getElementsByTagName("input")
for(let i of is){
i.checked=check
}
}
给第一个多选框添加点击事件，当点击第一个多选框后，将剩余当多选框附上第一个多选框的状态。
七、元素总结
