常用的按钮脚本提交数据 上传按钮更改样式

<form name="form1" id="form1" method="post" onsubmit="return tijiao()" action="<yang:gbookaddurl />">

<script>
function tijiao(){
  var username=$("#username").val();
  var phone=$("#tel").val();
  var address=$("#qq").val();
  var content=$("#content").val();
  if(username=="" || phone=="" || address=="" || content==""){
    alert("请填写完整");
    return false;
  }
  if(phone.length!=11){
    alert("手机号码格式不正确");
    return false;
  }
  $("#form1").submit();
}
</script>

  通用的页面翻页css:

<!-- 样式1   -->
<
div class="page qcfd" style="display: inline-block;">{$page}</div> <style type="text/css"> .page{text-align: center;} .page .num,.page .prev,.page .next,.page .end,.page .first{ width: 45px; height: 40px; border: 1px solid #EBEBEB; margin-left: -1px; color: #8a8a8a; display: inline-block; line-height: 40px; float: left; font-size: 15px; text-decoration: none; margin: 0 2px; border-radius: 6px; } .page .current{ width: 45px; height: 40px; border: 1px solid #EBEBEB; margin-left: -1px; display: inline-block; line-height: 40px; float: left; font-size: 15px; text-decoration: none; margin: 0 2px; border-radius: 6px; background-color: #222A35; color: #fff; border-color: #EBEBEB; position: relative; z-index: 1; } </style>





<!-- 样式2   -->
<style>
    .page {
        text-align: center;
        margin: 20px;
        color: #171717;
    }
    .page span,.page a {
        border: 1px solid #ccc;
        padding: 5px 8px;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        cursor: pointer;
        margin-left: 5px;
    }
    .page span{    cursor: default;
        color: #fff;
        background: #337ab7;
        border-color: #337ab7;
    }
</style>


<div class="page">{$page}<div>

 

 

 上传按钮更改样式:a标签下面嵌套一个input:

<style type="text/css">
        .file {
    position: relative;
    display: inline-block;
    background: #D0EEFF;
    border: 1px solid #99D3F5;
    border-radius: 4px;
    padding: 4px 12px;
    overflow: hidden;
    color: #1E88C7;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
}
.file input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
}
.file:hover {
    background: #AADFFD;
    border-color: #78C3F3;
    color: #004974;
    text-decoration: none;
}
</style>






<a href="" class="file" >
                        <div id="xiao">请选择您要上传的简历(可上传WORD、PDF、PPT)</div>                    
                        <input  type="file" id="file" name="file" onchange="checkFileExtension(this);" /> 
                    </a>

                    <script type="text/javascript">
                        function checkFileExtension(file) {  
                        var validExtensions = new Array(".doc", ".docx",".pdf",".ppt");  
                        var fileExtension = file.value;  
                        var xiaohe = file.value;
                       
                        fileExtension = fileExtension.substring(fileExtension.lastIndexOf('.'));  
                        if (validExtensions.indexOf(fileExtension) < 0) {  
                          alert("只能上传 " + validExtensions.toString() + " 后缀文件.");  
                          file.value = "";  
                          return false;  
                        } else {  
                            document.getElementById('xiao').innerText=xiaohe;
                            return true;  

                        }  
                    }  
                    </script>

 

posted @ 2019-07-17 16:46  xiaohe520  阅读(114)  评论(0编辑  收藏  举报