Web前端-JS效果-导航弹框、背景变色、鼠标移动切换等常见的js效果

来源：互联网发布：淘宝添加到桌面没有了编辑：程序博客网时间：2024/05/01 15:28

最近在学习JS效果，分享些实战经验。
来图镇楼！
导航弹框

背景变色

日历备忘录

鼠标切换内容

JS操作数组

各种相加判断

html部分（大综合）：

<body><!--1.传递一个参数--><div id="div-color1"></div>    <input type="button" value="背景变黄" onclick="changColor(this)" />    <input type="button" value="背景变红" onclick="changColor(this)"/>    <input type="button" value="背景变黑" onclick="changColor(this)"/>    <input type="button" value="恢复原样"  onclick="changColor(this)"/><div id="div-color2"></div>    <input type="button" value="背景变窄" onclick="Change(this)"/>    <input type="button" value="背景变黄" onclick="Change(this)"/>    <input type="button" value="背景变高" onclick="Change(this)"/>    <input type="button" value="恢复原样"  onclick="Change(this)"/><br /><br /><input type="text" value="你拍一 我拍一" id="name"/><input type="button" value="改变文字" onclick="changname()"/><input type="button" value="添加title属性(鼠标经过)" id="name1" onmouseover="addtitle()"/><br /><br /><!--1.while循环--><input type="button" value="循环出现提示框5次" onclick="xunhuan()"/><br /><br /><!--2.for循环--><input type="button" value="批量修改样式" onclick="yangshi()"/><div id="div-max">    <div id="div1"></div>    <div id="div2"></div>    <div id="div3"></div>    <div id="div4"></div></div><br /><br /><!--1.求和--><p>1.字符串相加</p><input type="text" id="txt1" />+<input type="text" id="txt2" /><input type="button" value="求和" onclick="qiuhe()" /><br /><br /><!--2.--><p>2.字符串相加</p><input type="text" id="txt3" />+<input type="text" id="txt4" /><input type="button" value="求和" onclick="qiuhe1()" /><br /><br /><!--3.--><p>3.判断是否NaN</p><input type="text" id="num" /><input type="button" value="检测" onclick="jc()" /><br /><br /><!--4.--><p>4.相加3</p><input type="text" id="txt5"  placeholder="支持整数运算"/>+<input type="text" id="txt6" placeholder="支持整数运算"/><input type="button" value="求和" onclick="qiuhe2()" /><br /><br /><!--5.问候分析--><p>5.问候</p><input type="text" id="xingming"  placeholder="姓名"/><select id="xuanze">    <option>性别</option>    <option value="男" >男</option>    <option value="女" >女</option></select><input type="button" value="问候" onclick="wenhou()" /><br /><br /><!--6.三目运算符--><p>6.单双数</p><input type="text" placeholder="数字" id="ds" /><input type="button" value="判断单双" onclick="danshuang()" /><!--7.JS日历--><p>7.日历</p><ul id="u1">    <li onmousemove="rili(1)" onmouseout="xiaoxi(1)"><h2 id="H1">1<p>JAN</p></h2></li>    <li onmousemove="rili(2)" onmouseout="xiaoxi(2)"><h2 id="H2">2<p>FER</p></h2></li>    <li onmousemove="rili(3)" onmouseout="xiaoxi(3)"><h2 id="H3">3<p>MAR</p></h2></li>    <li onmousemove="rili(4)" onmouseout="xiaoxi(4)"><h2 id="H4">4<p>APR</p></h2></li>    <li onmousemove="rili(5)" onmouseout="xiaoxi(5)"><h2 id="H5">5<p>MAY</p></h2></li>    <li onmousemove="rili(6)" onmouseout="xiaoxi(6)"><h2 id="H6">6<p>JUN</p></h2></li>    <li onmousemove="rili(7)" onmouseout="xiaoxi(7)"><h2 id="H7">7<p>JUL</p></h2></li>    <li onmousemove="rili(8)" onmouseout="xiaoxi(8)"><h2 id="H8">8<p>AUG</p></h2></li>    <li onmousemove="rili(9)" onmouseout="xiaoxi(9)"><h2 id="H9">9<p>SEP</p></h2></li>    <li onmousemove="rili(10)" onmouseout="xiaoxi(10)"><h2 id="H10">10<p>OCT</p></h2></li>    <li onmousemove="rili(11)" onmouseout="xiaoxi(11)"><h2 id="H11">11<p>NOV</p></h2></li>    <li onmousemove="rili(12)" onmouseout="xiaoxi(12)"><h2 id="H12">12<p>DEC</p></h2></li>    <div id="foot12">        <div id="yue1" style="display: none;"><h3>1月活动</h3><p>这是一月活动内容</p></div>        <div id="yue2" style="display: none;"><h3>2月活动</h3><p>这是二月活动内容</p></div>        <div id="yue3" style="display: none;"><h3>3月活动</h3><p>这是三月活动内容</p></div>        <div id="yue4" style="display: none;"><h3>4月活动</h3><p>这是四月活动内容</p></div>        <div id="yue5" style="display: none;"><h3>5月活动</h3><p>这是五月活动内容</p></div>        <div id="yue6" style="display: none;"><h3>6月活动</h3><p>这是六月活动内容</p></div>        <div id="yue7" style="display: none;"><h3>7月活动</h3><p>这是七月活动内容</p></div>        <div id="yue8" style="display: none;"><h3>8月活动</h3><p>这是八月活动内容</p></div>        <div id="yue9" style="display: none;"><h3>9月活动</h3><p>这是九月活动内容</p></div>        <div id="yue10" style="display: none;"><h3>10月活动</h3><p>这是十月活动内容</p></div>        <div id="yue11" style="display: none;"><h3>11月活动</h3><p>这是十一月活动内容</p></div>        <div id="yue12" style="display: none;"><h3>12月活动</h3><p>这是十二月活动内容</p></div>    </div></ul><br /><br /><br /><!--8.数组输出练习--><p>8.数组输出练习</p><div id="div-sz">    <p>已知数组内容：1.这是第一句，2.这是第二句，3.这个第三句，4.这是第四句</p>    <input type="button" value="提取1" onclick="tiqu(1)" />    <input type="button" value="提取2" onclick="tiqu(2)" />    <input type="button" value="提取3" onclick="tiqu(3)" />    <input type="button" value="提取4" onclick="tiqu(4)" />    <input type="button" value="全部弹出提取" onclick="tiqu(5)" /></div><div id="div-xs">    显示：</div><br /><br /><!--9.鼠标经过变换--><p>9.鼠标经过变换</p><ul id="u2">    <li class="u2" onmouseover="show_lm(1)" >栏目一</li>    <li class="u2" onmouseover="show_lm(2)" >栏目二</li>    <li class="u2" onmouseover="show_lm(3)" >栏目三</li>    <li class="u2" onmouseover="show_lm(4)" >栏目四</li></ul><div id="div_lm">    <div id="tag1" class="tag" style="display: none">栏目一的内容   栏目一的内容    栏目一的内容  栏目一的内容</div>    <div id="tag2" class="tag" style="display: none">栏目二的内容   栏目二的内容    栏目二的内容  栏目二的内容</div>    <div id="tag3" class="tag" style="display: none">栏目三的内容   栏目三的内容    栏目三的内容  栏目三的内容</div>    <div id="tag4" class="tag" style="display: none">栏目四的内容   栏目四的内容    栏目四的内容  栏目四的内容</div></div><br /><br /><!--10.鼠标点击经过变换--><p>9.鼠标点击变换</p><ul id="u2">    <li class="u3" onclick="show_lm1(1)" >栏目一</li>    <li class="u3" onclick="show_lm1(2)" >栏目二</li>    <li class="u3" onclick="show_lm1(3)" >栏目三</li>    <li class="u3" onclick="show_lm1(4)" >栏目四</li></ul><div id="div_lm">    <div id="tagg1" class="tag" style="display: none">栏目一的内容   栏目一的内容   栏目一的内容  栏目一的内容</div>    <div id="tagg2" class="tag" style="display: none">栏目二的内容   栏目二的内容   栏目二的内容  栏目二的内容</div>    <div id="tagg3" class="tag" style="display: none">栏目三的内容   栏目三的内容   栏目三的内容  栏目三的内容</div>    <div id="tagg4" class="tag" style="display: none">栏目四的内容   栏目四的内容   栏目四的内容  栏目四的内容</div></div><!--11.innerHTML的基本使用--><p>11.innerHTML的基本使用</p><input type="text" id="div_text" placeholder="在这里输入文字"/><input type="button" onclick="tijiaohou()" value="提交"/><div id="d2">    提交后在这里显示：</div><br /><br /><!--12.innerHTML,字符串，判断的基本使用--><p>12.innerHTML,字符串，判断的基本使用</p><input type="text" id="div_text1" placeholder="在这里输入文字"/>+<input type="text" id="div_text2" placeholder="在这里输入文字"/><input type="button" onclick="tijiaohou1()" value="提交"/><div id="d3">    提交后在这里显示：</div><br /><br /></body>

2.CSS样式（css1.css）：

#div-color1{            width: 150px;            height: 150px;            margin-bottom: 30px;            background-color: blue;        }#div-color2{    width: 150px;    height: 150px;    margin-bottom: 30px;    background-color: blue;}#div{    width: 230px;    height: 60px;}#div1{    width: 50px;    height: 50px;    float: left;    margin-left: 5px;    border: 1px red solid;}#div2{    width: 50px;    height: 50px;    float: left;    margin-left: 5px;    border: 1px red solid;}#div3{    width: 50px;    height: 50px;    float: left;    margin-left: 5px;    border: 1px red solid;}#div4{    width: 50px;    height: 50px;    float: left;    margin-left: 5px;    border: 1px red solid;}#div5{    width: 50px;    height: 50px;    float: left;    margin-left: 5px;    border: 1px red solid;}#u1{    width: 246px;    height: 375px;    background-color:#EAE9E9;    border: 1px gray solid;}ul li {    text-align: center;    float: left;    width: 59px;    height:54px;        color: white;    font-size: 12px;    margin-top: 10px;    margin-left: 15px;    background-color: black;    }#foot12{    float: left;    width: 206px;    height: 67px;    margin: 0 auto;    margin-top: 15px;    margin-left: 15px;    border: 1px white solid;    background-color: #F1F1F1;}.u2{    float: left;    width: 53px;    height:30px;    text-align: center;    background-color: #5BC0DE;}.u3{    float: left;    width: 53px;    height:30px;    text-align: center;    background-color: #5CB85C;}#div_lm{    margin-top: 40px;    width: 300px;    height:100px;    background-color:#D9EDF7 ;}.tag{    width: 100px;}

3.CSS样式（base.css）:

html,body,head,ul,li,ol,dl,dt,dd,p,h1,h2,h3,h4,h5,h6,img{    margin: 0;    padding: 0;}form,input,select,textarea{margin: 0;padding: 0;}img{vertical-align: middle;}li{list-style: none;}a{text-decoration: none;}.clear{clear: both;font-size: 0px;}.left{float: left;}.right{float: right;}

JS代码：

“`
//1.
function changColor(color1){
var c = document.getElementById(“div-color1”);
if(color1.value==”背景变黄”){
c.style.backgroundColor=”yellow”;
}
if(color1.value==”背景变红”){
c.style.backgroundColor=”red”;
}
if(color1.value==”背景变黑”){
c.style.backgroundColor=”black”;
}
if(color1.value==”恢复原样”){
c.style.backgroundColor=”blue”;
}
}
//2.
function Change(obj1){
var d = document.getElementById(“div-color2”);
if(obj1.value==”背景变窄”){
d.style.width=”80px”;
}if(obj1.value==”背景变黄”){
d.style.backgroundColor=”yellow”;
}if(obj1.value==”背景变高”){
d.style.height=”200px”;
}if(obj1.value==”恢复原样”){
d.style.height=”150px”
d.style.width=”150px”;
d.style.backgroundColor=”blue”;
}
}
//3.
function changname(){
var o = document.getElementById(“name”);
if(o.value==”玩蛋去吧！”){
o.value=”你拍一我拍一”;
}else{
o.value=”玩蛋去吧！”
}
}
function addtitle(){
var o = document.getElementById(“name1”);
o.setAttribute(“title”,”项目信息”);
// o.title=”标题在此！”;
}
//1.while循环
function xunhuan(){
var i=1;
while(i<=5){
alert(“提示框第”+i+”次！”);
i++;
}
}
//2.for循环
function yangshi(){
for(var i=1;i<=4;i++){

}
//1.求和
function qiuhe(){
var n1 = document.getElementById(“txt1”).value;
var n2 = document.getElementById(“txt2”).value;
var n3 = n1+”“+n2;
alert(n3);
}
//2.数字相加
function qiuhe1(){
var n3 = parseInt(document.getElementById(“txt3”).value);
var n4 = parseInt(document.getElementById(“txt4”).value);
var n5 = n3+n4;
alert(n5);
}
//3.判断
function jc(){
var n = document.getElementById(“num”).value;
if(!isNaN(n)){
alert(“是数字类型,true!”);
}else{
alert(“不是数字类型,false!”);
}
}
//4.求和
//2.数字相加
function qiuhe2(){//获取到的默认都是字符串类型的
var n5 = parseInt(document.getElementById(“txt5”).value);
var n6 = parseInt(document.getElementById(“txt6”).value);
if(isNaN(n5)||isNaN(n6)){
alert(“请输入数字类型的，谢谢！”);
}else{
var n7 = n5+n6;
alert(n7);
}
}
function wenhou(){
var name = document.getElementById(“xingming”).value;
var sex = document.getElementById(“xuanze”).value;
if(sex==”女”){
alert(name+”女士，您好！”);
}else if(sex==”男”){
alert(name+”先生，您好！”);
}
}

/数组提取/
var n=1;
function tiqu(n){
var ar = new Array(“这是第一句”,”这是第二句”,”这是第三句”,”这是第四句”);
var xs = document.getElementById(“div-xs”);
for(var i=1;i<=ar.length;i++){
if(i==n){
xs.innerHTML = ar[i-1];
}
}
if(n==5){
xs.innerHTML = ar[0]+”,”+ar[1]+”,”+ar[2]+”,”+ar[3]
}

}

/9.qiehua/

0 0