前端效果集锦

其他 2020-10-19 15:11:01 阅读次数: 0

js加减乘除精确运算方法总结

//加 
function floatAdd(arg1,arg2){
    
     
  var r1,r2,m; 
  try{
    
    r1=arg1.toString().split(".")[1].length}catch(e){
    
    r1=0} 
  try{
    
    r2=arg2.toString().split(".")[1].length}catch(e){
    
    r2=0} 
  m=Math.pow(10,Math.max(r1,r2)); 
  return (arg1*m+arg2*m)/m; 
} 
   
//减 
function floatSub(arg1,arg2){
    
     
 var r1,r2,m,n; 
 try{
    
    r1=arg1.toString().split(".")[1].length}catch(e){
    
    r1=0} 
 try{
    
    r2=arg2.toString().split(".")[1].length}catch(e){
    
    r2=0} 
 m=Math.pow(10,Math.max(r1,r2)); 
 //动态控制精度长度 
 n=(r1>=r2)?r1:r2; 
 return ((arg1*m-arg2*m)/m).toFixed(n); 
} 
   
//乘 
function floatMul(arg1,arg2) {
    
     
 var m=0,s1=arg1.toString(),s2=arg2.toString(); 
 try{
    
    m+=s1.split(".")[1].length}catch(e){
    
    } 
 try{
    
    m+=s2.split(".")[1].length}catch(e){
    
    } 
 return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m); 
} 
   
   
//除 
function floatDiv(arg1,arg2){
    
     
  var t1=0,t2=0,r1,r2; 
  try{
    
    t1=arg1.toString().split(".")[1].length}catch(e){
    
    } 
  try{
    
    t2=arg2.toString().split(".")[1].length}catch(e){
    
    } 
    
  r1=Number(arg1.toString().replace(".","")); 
  
  r2=Number(arg2.toString().replace(".","")); 
  return (r1/r2)*Math.pow(10,t2-t1); 
}

动态下拉二级菜单

首先html代码

<ul>
			<li class="liOne"><a href="">我的主页</a>
				<ul class="ulTwo">
					<li><a href="">第一主页</a></li>
					<li><a href="">第二主页</a></li>
					<li><a href="">第三主页</a></li>
				</ul>
			</li>
			<li id="second" class="liOne"><a href="">我的空间</a>
				<ul class="ulTwo">
					<li><a href="">第一空间</a></li>
					<li><a href="">第二空间</a></li>
					<li><a href="">第三空间</a></li>
				</ul>
			</li>
			<li id="third" class="liOne"><a href="">我的主题</a>
				<ul class="ulTwo">
					<li><a href="">第一主题</a></li>
					<li><a href="">第二主题</a></li>
					<li><a href="">第三主题</a></li>
				</ul>
			</li>
		</ul>

css代码

           .liOne{
    
    
				float: left;
				margin-left: 30px;
				list-style: none;
			}
			.ulTwo{
    
    
				display: none;
				padding-left: 0px;
				
			}
			.ulTwo>li{
    
    
				list-style: none;
			}

jquery代码

$(function(){
    
    
$("li:first").mouseenter(function(event){
    
    
					
					if($("li:first ul").is(':animated')){
    
    
						return;
					}
					$("li:first ul").slideDown("fast");
				});
				$("li:first").mouseleave(function(){
    
    
					$("li:first ul").slideUp("fast");
				});
				$("#second").mouseenter(function(){
    
    
					if($("#second ul").is(':animated')){
    
    
						return;
					}
					$("#second ul").slideDown("fast");
				});
				$("#second").mouseleave(function(){
    
    
					$("#second ul").slideUp("fast");
				});
				$("#third").mouseenter(function(){
    
    
					if($("#third ul").is(':animated')){
    
    
						return;
					}
					$("#third ul").slideDown("fast");
				});
				$("#third").mouseleave(function(){
    
    
					$("#third ul").slideUp("fast");
				});
});

效果图
在这里插入图片描述

css动画效果

<title>css动画</title>
    <style>
        div{
     
     
            height: 300px;
            width: 300px;
            border: 1px solid black;
            /* 动画名字  动画时间 无限循环  匀速 */
            animation: name 3s infinite linear;
        }
        @keyframes name{
     
     
            /* 开始位置 */
            from{
     
     transform: translate(0px,0px);}
            /* 结束位置 */
            to{
     
     transform: translate(500px,500px);}
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

  /* 动画名 动画时间  无限循环  匀速 */
        animation: name 3s infinite linear; 

        /* 设置动画延迟多长时间开始 */
        /* animation-delay: 3s; */

        /* 反转 from为终点 to为起点 */
        animation-direction:reverse;

        /* 规定动画的次数  inherit 一次 infinite 无限次*/
        animation-iteration-count:infinite;
    }
    /* 颜色渐变动画 */
    @keyframes name{
    
    
        from{
    
    background-color: red;}
        to{
    
    background-color: blue;}
    }

监听滚动条到固定位置触发事件

依赖于jquery包，滚动条滑动500像素弹框。

 <script>
        $(document).ready(function(){
    
    
            $(window).scroll(function(){
    
        获得滚动条距离顶部的高度
                if($(window).scrollTop() > 500){
    
    
                    alert("滚动条划了500像素了！");
                }
            });
        });
    </script>

jquery实现Tab栏切换

<!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">
    <link rel="stylesheet" href="../css/index.css">
    <script src="../js/jquery-1.8.2.min.js"></script>
    <title>网上咨询</title>
</head>
<body>
    <div class="myContainer" id="heart">
        <div class="navBar">
               <nav id="img">
                   
                   <img src="../images/logo.png" alt="logo">
                   <ul class="login">
                        <li><a href="">注册</a></li>
                        <li><a href="">登陆</a></li>
                    </ul>
                </nav>
               <ul class="menu">
                <li><a href="../html/index.html">首页</a></li>
                <li><a href="">注册地质师</a></li>
                <li><a href="">注册服务商</a></li>
                <li><a href="">网上咨询</a></li>
                <li><a href="../html/onlineTest.html">网上测试</a></li>
                <li><a href="">咨询师</a></li>
                <li><a href="">走进产业园</a></li>
                <li><a href="">行业资讯</a></li>
                <li><a href="">联系我们</a></li>
            </ul>
           
        </div>
        <div class="selection_Sort">
            <div>
                <ul class="selection_sort_Ul">
                    <li></li> <li></li> <li></li>
                </ul>
                <h3>请选择矿产分类</h3>
            </div>
            <div class="specific">
                <div>
                    <!-- 一级分类 -->
                    <ul id="primary">
                        <li class="firstLi"><a href="">一级分类</a></li>
                        <li costom="c1" class="hover current"><a href="javaScript:;">矿石类</a></li>
                        <li costom="c2" class="hover"><a href="javaScript:;">金属材料类</a></li>
                        
                    </ul>
                </div>
                <!-- 二级分类 -->
                <div>
                        <ul id="c2" class="hidden">
                             <li class="firstLi"><a href="javaScript:;">二级分类</a></li>
                             <li class="hover" costom="f1"><a href="javaScript:;">蓝金属材料</a></li>
                             <li class="hover" costom="f2"><a href="javaScript:;">黑金属材料</a></li>
                             <!-- <li class="hover"><a href="javaScript:;">红金属材料</a></li>
                             <li class="hover"><a href="javaScript:;">彩色金属材料</a></li>
                            <li class="hover"><a href="javaScript:;">其他</a></li> -->
                        </ul>
                        <ul id="c1">
                                <li class="firstLi"><a href="javaScript:;">二级分类</a></li>
                                <li class="hover current" costom="d1"><a href="javaScript:;">蓝矿石</a></li>
                                <li class="hover" costom="d2"><a href="javaScript:;">黑矿石</a></li>
                                <!-- <li class="hover"><a href="javaScript:;">红矿石</a></li>
                                <li class="hover"><a href="javaScript:;">紫矿石</a></li>
                               <li class="hover"><a href="javaScript:;">其他</a></li> -->
                           </ul>
                </div>
                
                <!-- 三级分类 -->
                <div>
                        <ul id="d1">
                                <li class="firstLi"><a href="">三级分类</a></li>
                                <li class="hover"><a href="">蓝矿石1</a></li>
                        <li class="hover"><a href="">蓝矿石2</a></li>
                        <li class="hover"><a href="">蓝矿石3</a></li>
                        <li class="hover"><a href="">蓝矿石4</a></li>
                        <li class="hover"><a href="">蓝矿石5</a></li>
                        <li class="hover"><a href="">蓝矿石6</a></li>
                        <li class="hover"><a href="">蓝矿石7</a></li>
                        <li class="hover"><a href="">蓝矿石8</a></li>
                        <li class="hover"><a href="">蓝矿石9</a></li>
                        
                           </ul>
                           <ul id="d2" class="hidden">
                            <li class="firstLi"><a href="">三级分类</a></li>
                            <li class="hover"><a href="">黑矿石1</a></li>
                    <li class="hover"><a href="">黑矿石2</a></li>
                    <li class="hover"><a href="">黑矿石3</a></li>
                    <li class="hover"><a href="">黑矿石4</a></li>
                    <li class="hover"><a href="">黑矿石5</a></li>
                    <li class="hover"><a href="">黑矿石6</a></li>
                    <li class="hover"><a href="">黑矿石7</a></li>
                    <li class="hover"><a href="">黑矿石8</a></li>
                    <li class="hover"><a href="">黑矿石9</a></li>
                    <li class="hover"><a href="">黑矿石10</a></li>
                    <li class="hover"><a href="">黑矿石11</a></li>
                    
                       </ul>
                       <ul id="f1" class="hidden">
                        <li class="firstLi"><a href="">三级分类</a></li>
                        <li class="hover"><a href="">蓝金属材料1</a></li>
                <li class="hover"><a href="">蓝金属材料2</a></li>
                <li class="hover"><a href="">蓝金属材料3</a></li>
                <li class="hover"><a href="">蓝金属材料4</a></li>
                <li class="hover"><a href="">蓝金属材料5</a></li>
                <li class="hover"><a href="">蓝金属材料6</a></li>
                <li class="hover"><a href="">蓝金属材料7</a></li>
                <li class="hover"><a href="">蓝金属材料8</a></li>
                <li class="hover"><a href="">蓝金属材料9</a></li>
                
                   </ul>
                   <ul id="f2" class="hidden">
                    <li class="firstLi"><a href="">三级分类</a></li>
                    <li class="hover"><a href="">黑金属材料1</a></li>
            <li class="hover"><a href="">黑金属材料2</a></li>
            <li class="hover"><a href="">黑金属材料3</a></li>
            <li class="hover"><a href="">黑金属材料4</a></li>
            <li class="hover"><a href="">黑金属材料5</a></li>
            <li class="hover"><a href="">黑金属材料6</a></li>
            <li class="hover"><a href="">黑金属材料7</a></li>
            <li class="hover"><a href="">黑金属材料8</a></li>
            <li class="hover"><a href="">黑金属材料9</a></li>
            <li class="hover"><a href="">黑金属材料10</a></li>
            <li class="hover"><a href="">黑金属材料11</a></li>
            <li class="hover"><a href="">黑金属材料12</a></li>
            <li class="hover"><a href="">黑金属材料13</a></li>
            
               </ul>
                </div>
            </div>
        </div>
        <div class="parameter">
            <div>
                <h3>选择您要检测的参数<span>(可多选)</span></h3>
            </div>
            <div>
                <a href="">化合水</a>
                <a href="">二氧化硅</a>
                <a href="">三氧化二铝</a>
                <a href="">化合水</a>
                <a href="">二氧化硅</a>
                <a href="">三氧化二铝</a>
                <a href="">化合水</a>
                <a href="">二氧化硅</a>
                <a href="">三氧化二铝</a>
                <a href="">化合水</a>
                <a href="">二氧化硅</a>
                <a href="">三氧化二铝</a>
                <a href="">化合水</a>
                <a href="">二氧化硅</a>
                <a href="">三氧化二铝</a>
                <a href="">化合水</a>
                <a href="">二氧化硅</a>
                <a href="">三氧化二铝</a>
                <a href="">化合水</a>
                <a href="">二氧化硅</a>
                <a href="">三氧化二铝</a>
            </div>
            <div class="last">
                <a href="">提交到实验室</a>
            </div>
        </div>

        <div class="footer">
            <nav><img src="../images/dblogo.png" alt=""></nav>
            <nav>
                <p class="service">支持与服务</p>
               <div>
                      <p>首页</p>
                      <p>网上咨询</p>
                      <p>网上测试</p>
                      <p>行业资讯</p>
               </div>
            </nav>
            <nav>
                    <p class="concat">联系我们</p>
                    <div>
                           <p>河南省有色金属地质矿产局</p>
                           <p>地址：河南省郑州市中牟XXX路地矿产业园</p>
                           <p>电话：0371-7865-8888</p>
                           <p>网址：http:www.dkcyy.com</p>
                           <p>版权所有：Copyright@2011-2019dikuang Technology Co.,Ltd豫ICP备09070608号-4</p>
                    </div>
            </nav>
            <nav>
                <img src="../images/ewm.png" alt="">
            </nav>
        </div>
           
    
    </div>
        <!--版心容器 -->
        <script>
        $(function(){
     
     
            $("#primary li").click(function(){
     
     
                 $(this).addClass("current").siblings().removeClass("current");
                 var index=$(this).attr("costom");
                 $("#"+index).removeClass("hidden").siblings().addClass("hidden");
            });
            $("#c1 li").click(function(){
     
     
                $(this).addClass("current").siblings().removeClass("current");
                var index=$(this).attr("costom");
                $("#"+index).removeClass("hidden").siblings().addClass("hidden");
            });
            $("#c2 li").click(function(){
     
     
                $(this).addClass("current").siblings().removeClass("current");
                var index=$(this).attr("costom");
                $("#"+index).removeClass("hidden").siblings().addClass("hidden");
            });
        });
        </script>
</body>
</html>

三级联动

<script type="text/javascript">
$(function(){
     
     
    $.post(
    "city/first",
    function(data){
     
     
    var tempArr="";
    if(data!=""){
     
     
    for(var i=0;i<data.length;i++){
     
     
    tempArr+="<option value='"+data[i].code+"'>"+data[i].name+"</option>";
    }
    $("#province").append(tempArr);
    }
    },
    "json"
    );
$("#province").change(function(){
     
     
    var pId=$(this).val();
    getCitys(pId);
    });
    $("#city").change(function(){
     
     
    var cId=$(this).val();
    getAreas(cId);
    });
    getCitys(110000);
    getAreas(110100);
});   
//-----------------------------------
    function getCitys(pId){
     
     
    $.post(
    "city/second",
    {
     
     provinceId:pId},
    function(data){
     
     
    var tempArr="";
    if(data!=""){
     
     
    $("#city").empty();
    for(var i=0;i<data.length;i++){
     
     
    tempArr+="<option value='"+data[i].code+"'>"+data[i].name+"</option>";   
    }
    $("#city").append(tempArr);
    getCitys(data[0].code);
    }
    },
    "json"
    );
    }
//-----------------------------
function getAreas(cId){
     
     
$.post(
"city/third",
{
     
     cityId:cId},
function(data){
     
     
var tempArr="";
if(data!=""){
     
     
$("#area").empty();
for(var i=0;i<data.length;i++){
     
     
tempArr+="<option value='"+data[i].code+"'>"+data[i].name+"</option>";
}
$("#area").append(tempArr);
getAreas(data[0].code);
}
},
"json"
);
}
</script>
  </head>
   
  <body>
    <center>
    <table>
    <tr>
    <td>选择省：</td>
    <td><select id="province"></select></td>
    </tr>
    <tr>
    <td>选择市：</td>
    <td><select id="city"></select></td>
    </tr>
    <tr>
    <td>选择区：</td>
    <td><select id="area"></select></td>
    </tr>
    </table>
    </center>
  </body>
  </body>
</html>

猜你喜欢

转载自blog.csdn.net/weixin_44001965/article/details/105345264
今日推荐
技术解析 GPT-4o：即时语音交互的突破与 GenAI 发展策略
开源大模型与闭源大模型
微信小程序授权登录获取用户的openid
亿级流量系统架构设计与实战
人工智能时代的程序设计教学与课程设计
纽交所技术问题致伯克希尔 (BRK.A) 显示跌近 100%
探索 api.maynor1024.live：一站式 AI 服务平台
AI一键去衣技术：窥见深度学习在图像处理领域的革命(最后有彩蛋)
艾体宝案例 | 使用Redis和Spring Ai构建rag应用程序
Apple M1 vs 高通8Gen2 vs Apple A12Z各方面比较
【升职加薪必备架构图】Springboot学习路线汇总_springboot四层架构流程图
与Apollo共创生态：Apollo7周年大会自动驾驶生态利剑出鞘
周排行
tensorflow 笔记：二（ 北大）
fork函数详解
unity单利模板
mac下的特殊键位指引（转自apple）
c语言入门-注释
Python--多任务[线程，进程，协程]
深度对抗学习在图像分割和超分辨率中的应用
【转】【Maven】Project configuration is not up-to-date with pom.xml错误解决方法
基本数据类型与常量池
部署自己的Intell项目的经历
每日归档
更多
2024-06-07(0)
2024-06-06(0)
2024-06-05(0)
2024-06-04(10)
2024-06-03(52)
2024-06-02(4)
2024-06-01(60)
2024-05-31(47)
2024-05-30(4)
2024-05-29(65)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022