Javascript常见问题总结

最新推荐文章于 2022-07-19 23:14:25 发布

DreamLRH

最新推荐文章于 2022-07-19 23:14:25 发布

阅读量299

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/dreamhua927/article/details/86002003

版权

javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

倒计时

<Script Language="JavaScript"> 
　　var timedate= new Date("October 1,2002"); 
　　var times= "国庆节"; 
　　var now = new Date(); 
　　var date = timedate.getTime() - now.getTime(); 
　　var time = Math.floor(date / (1000 * 60 * 60 * 24)); 
　　if (time >= 0) 
　　document.write( "现在离"+times+"还有: "+time +"天")
</Script>

页面文字大，中，小变化

<script type="text/javascript">
　　function doZoom(size)
　　{document.getElementById('zoom').style.fontSize=size+'px';}
</script>
<span id="zoom">需要指定大小的文字</span>
<a href="javascript:doZoom(16)">大</a> <a href="javascript:doZoom(14)">中</a> <a href="javascript:doZoom(12)">小</a>

等比例缩放图片

<script type="text/javascript">
function AutoResizeImage(maxWidth, maxHeight, objImg) {
    var img = new Image();
    img.src = objImg.src;
    var hRatio;
    var wRatio;
    var Ratio = 1;
    var w = img.width;
    var h = img.height;
    wRatio = maxWidth / w;
    hRatio = maxHeight / h;
    if (maxWidth == 0 && maxHeight == 0) {
        Ratio = 1;
    } else if (maxWidth == 0) { //
        if (hRatio < 1)
            Ratio = hRatio;
    } else if (maxHeight == 0) {
        if (wRatio < 1)
            Ratio = wRatio;
    } else if (wRatio < 1 || hRatio < 1) {
        Ratio = (wRatio <= hRatio ? wRatio : hRatio);
    }
    if (Ratio < 1) {
        w = w * Ratio;
        h = h * Ratio;
    }
    objImg.height = h;
    objImg.width = w;
}
</script>

<img src="{$r[thumb]}"  width="153" height="124" onload="AutoResizeImage(153,124,this)"/>

页面倒计时跳转代码

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>页面跳转</title>
</head>
<body>
<script type="text/javascript">
var t=10;//设定跳转的时间
setInterval("refer()",1000); //启动1秒定时
function refer(){ 
    if(t==0){
        location="http://www.phpernote.com/jquery-effects/207.html"; //设定跳转的链接地址
    }
    document.getElementById('show').innerHTML=""+t+"秒后跳转到php程序员教程网"; //显示倒计时
    t--; //计数器递减
}
</script>
<span id="show"></span>
</body>
</html>

js判断是手机还是PC并跳转到指定url

<!--判断手机还是pc-->
<script language="javascript"> 
(function(){
    var res = GetRequest();
    var par = res['index'];
    if(par!='gfan'){
        var ua=navigator.userAgent.toLowerCase();
        var contains=function (a, b){
            if(a.indexOf(b)!=-1){return true;}
        };
//将下面的http://m.baidu.com改成你的wap手机版地址 如我的 http://m.teai.org    
        var toMobileVertion = function(){
            window.location.href = 'http://liheng.cw1982.com/m/'
        }
 
        if(contains(ua,"ipad")||(contains(ua,"rv:1.2.3.4"))||(contains(ua,"0.0.0.0"))||(contains(ua,"8.0.552.237"))){return false}
        if((contains(ua,"android") && contains(ua,"mobile"))||(contains(ua,"android") && contains(ua,"mozilla")) ||(contains(ua,"android") && contains(ua,"opera"))
    ||contains(ua,"ucweb7")||contains(ua,"iphone")){toMobileVertion();}
    }
})();
function GetRequest() {
   var url = location.search; //获取url中"?"符后的字串
   var theRequest = new Object();
   if (url.indexOf("?") != -1) {
      var str = url.substr(1);
      strs = str.split("&");
      for(var i = 0; i < strs.length; i ++) {
         theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
      }
   }
   return theRequest;
}
</script>

js跳出后台框架

    很多网页都是框架结构的，在很多的情况下会通过按钮点击事件或链接，跳出框架转到其它界面。例如说点击“注销登录”返回到登录界面。
   一、通过运行脚本跳出框架有以下几种写法：
   1.<script language = javascript>window.open('Login.aspx','_top')</script>"
   2.<script language = javascript>window.open('Login.aspx','_parent')</script>"
   3.<script language = javascript>window.parent.location.href='login.aspx'</script>
   4. Response.Write("<script>window.parent.opener=null;window.top.close();</script>")
    5. Response.Write("<script>window.open('index.aspx','');</script>")
   这种方法会先关闭原框架窗口，再重新打开一个新的窗口。这在很多功能界面对浏览器进行了改变设置，而回到登陆界面又用缺省设置的情况下适用。
   二、链接跳出框架：
   这种情况就很简单了，加上 target="_top" 属性就可以了，它会跳转到其他的页面。

jquery获取所有text表单值

$("input").each(function(){
    var value = $(this).val();  //这里的value就是每一个input的value值
});

下拉框跳转不同的网址

<html>
<head>
<script language="javascript">
function check(){
if(document.form1.a[0].selected==true)
document.form1.action="11111.htm"
else
document.form1.action="222222.htm"
}
</script>
</head>
<body>
<form name="form1" method="post" action="" onSubmit="check();">
<select name="a">
    <option>登录本网站</option>
    <option>登录其他网站</option>
</select>
<input name="" type="submit" value="提交">
</form>
</body>
</html>

返回页面顶部

<html> 
<head> 
<script type="text/javascript"> 
var currentPosition,timer; 
function GoTop(){ 
timer=setInterval("runToTop()",1); 
} 
function runToTop(){ 
currentPosition=document.documentElement.scrollTop || document.body.scrollTop; 
currentPosition-=10; 
if(currentPosition>0) 
{ 
window.scrollTo(0,currentPosition); 
} 
else 
{ 
window.scrollTo(0,0); 
clearInterval(timer); 
} 
} 
</script> 
<style type="text/css"> 
</style> 
</head> 
<body> 
<div style="height:1000px;text-align:center;font-size:200px;font-weight:bold;">饭</div> 
<div style="height:1000px;text-align:center;font-size:200px;font-weight:bold;">吃</div> 
<div style="height:1000px;text-align:center;font-size:200px;font-weight:bold;">家</div> 
<div style="height:1000px;text-align:center;font-size:200px;font-weight:bold;">回</div> 
<div style="height:1000px;text-align:center;font-size:200px;font-weight:bold;">你</div> 
<div style="height:1000px;text-align:center;font-size:200px;font-weight:bold;">带</div> 
<div id="back-up" onclick="GoTop()" style="border:1px solid red;height:100px;width:15px;position:fixed;cursor:pointer;right:10px;bottom:30px;">返回顶部</div> 
<script> 
window.scrollTo(0,document.body.scrollHeight); 
</script> 
</body> 
</html>

div头部浮动滚动

<!DOCTYPE html> 
<html> 
<head>
<title></title>
<style type="text/css">
html, body {
    width:100%;
    margin:0px auto;
    padding:0px auto;
}
.div1 {
    height:2000px;
}
.div2 {
    width:100%;
    height:35px;
    background-color:#3399FF;
    margin-top:500px;
}
.div2_1{
   
    width:100%;
    height:35px;
   
    background-color:#3399FF;
    
    _position:absolute; z-index:999; position:fixed;
    _bottom:auto;top:0px;
    _top:expression(eval(document.documentElement.scrollTop));
}
*html{
    background-image:url(about:blank);
    background-attachment:fixed;
}
   
</style>
<script type="text/javascript">
    window.onscroll=function(){ 
        var t=document.documentElement.scrollTop||document.body.scrollTop;  
        var div2=document.getElementById("div2"); 
        if(t>= 500){ 
            div2.className = "div2_1";
        }else{
            div2.className = "div2";
        } 
    }
</script>
</head>
<body>
<div class="div1">
    <div id="div2" class="div2"></div>
</div>
</body>
</html>

去除js相同元素

<script> 
Array.prototype.del = function() { 
var a = {}, c = [], l = this.length; 
for (var i = 0; i < l; i++) { 
var b = this[i]; 
var d = (typeof b) + b; 
if (a[d] === undefined) { 
c.push(b); 
a[d] = 'aaaaaaaa'; 
} 
} 
return c; 
} 
alert([1, 1, 2, 3, 4, 5, 4, 3, 4, 4, 5, 5,5,5,,6,6,6,6,5,5,5,5,{},{},5,true,true,true,5,5,5,'a','c','a', 6, 7].del()); 
</script>

搜索框js代码

<script type="text/javascript">
$(document).ready(function(){
    var $b = $('#query_button'),$i = $('#Search input');
    $i.keyup(function(e){
        if(e.keyCode == 13){
            $b.click();
        }
    });
    $b.click(function(){
        if($('input[name="keyword"]').val()==""){
            alert("搜索关键词不能为空");
            return false;
        }else{
            var keyword = $('input[name="keyword"]').val();
            window.location.href='http://www.test.com/search/s?q='+encodeURI(keyword);
            return false;
        }
    });
});
</script>

DreamLRH

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript常见问题总结

倒计时 &lt;Script Language="JavaScript"&gt; 　　var timedate= new Date("October 1,2002"); 　　var times= "国庆节"; 　　var now = new Date(); 　　var date = timedate.getTime() - now.getTime(); 　　var time =...
复制链接

扫一扫

专栏目录