其他项目代码

javascript想左无线循环滚动

​
<div id="demo" style="overflow:hidden;height:100px;width:100px;background:#f4f4f4;color:#ffffff">
    <div id="indemo" style="float:left;width:1400%">
        <div id="demo1" style="float:left">
            <img src="yue.jpg">
            <img src="yue.jpg">
            <img src="yue.jpg">
            <img src="yue.jpg">
            <img src="yue.jpg">
        </div>
    </div>
<div id="demo2" style="float:left"></div>
</div>
   <script>
   var speed=50;//控制滚动的速度快慢
   demo2.innerHTML=demo1.innerHTML;//将demo1里面的内容放到demo2里面
   function Marquee(){
       if(demo2.offsetWidth-demo.scrollLeft<=0)
               demo.scrollLeft-=demo1.offsetWidth;
       else{
               demo.scrollLeft++;
       }
   }
   var MyMar=setInterval(Marquee,speed);//设置定时器
   demo.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的
   demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器
   </script>
<p><a href="http://www.yydpt.com" target="_blank">月影web</a></p>
 
​

 

javasciript幻灯片

var slideIndex = 1;
showSlides(slideIndex);
 
function plusSlides(n) {
  showSlides(slideIndex += n);
}
 
function currentSlide(n) {
  showSlides(slideIndex = n);
}
 counter = setInterval(function() {
        showSlides(slideIndex += 1);
}, 3000);

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1} 
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none"; 
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block"; 
  dots[slideIndex-1].className += " active";

}


function showYd(){
clearTimeout(counter)
}

function clearYd(){
    
     counter = setInterval(function() {
            showSlides(slideIndex += 1);
    }, 3000);
}

<div class="banner">
<div class="slideshow-container">
  <div class="mySlides fade" onmouseover="showYd()" onmouseout="clearYd()">
      <!--<div class="numbertext">1 / 3</div>-->
    <img src="{dede:global.cfg_templets_skin/}/images/banner0.jpg" style="width:100%">
   <!-- <div class="text">文本 1</div>  -->
  </div>
 
  <div class="mySlides fade" onmouseover="showYd()" onmouseout="clearYd()">

    <img src="{dede:global.cfg_templets_skin/}/images/banner1.jpg" style="width:100%">
  
  </div>
 
  <div class="mySlides fade" onmouseover="showYd()" onmouseout="clearYd()">
 
    <img src="{dede:global.cfg_templets_skin/}/images/banner2.jpg" style="width:100%">
 
  </div>
    <div class="mySlides fade" onmouseover="showYd()" onmouseout="clearYd()">
      <!--<div class="numbertext">1 / 3</div>-->
    <img src="{dede:global.cfg_templets_skin/}/images/banner0.jpg" style="width:100%">
   <!-- <div class="text">文本 1</div>  -->
  </div>
  
    <div class="mySlides fade" onmouseover="showYd()" onmouseout="clearYd()">

    <img src="{dede:global.cfg_templets_skin/}/images/banner1.jpg" style="width:100%">
  
  </div>
 
  <a class="prev" onclick="plusSlides(-1)"> <</a>
  <a class="next" onclick="plusSlides(1)"> ></a>
</div>
<br>
 
<div style="text-align:center" class="dian">
  <span class="dot" onclick="currentSlide(1)"></span> 
  <span class="dot" onclick="currentSlide(2)"></span> 
  <span class="dot" onclick="currentSlide(3)"></span> 
    <span class="dot" onclick="currentSlide(4)"></span> 
      <span class="dot" onclick="currentSlide(5)"></span> 
</div>

</div>

/*幻灯片*/
 /* 幻灯片容器 */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}
 
/* 下一张 & 上一张 按钮 */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}
 
/* 定位 "下一张" 按钮靠右 */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}
 
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}
 
/* 标题文本 */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}
 
/* 数字文本 (1/3 等) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}
 
/* 标记符号 */
.dot {
  cursor:pointer;
  height: 13px;
  width: 13px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
 
.active, .dot:hover {
  background-color: #717171;
}
 
/* 淡出动画 */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}
 
@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}
 
@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

 

各种表单js验证

function pay(){
    
    //验证姓名
    var tar1 = false;
    var val1 = $("#val1").val(); 
    var reg = /^[\u4e00-\u9fa5]{2,4}$/i; 
    if(val1 == ''){  //验证姓名是否为空
        $("#val1").addClass('val');
        $("#val1").attr('placeholder','姓名不能为空！');
    }else if(!reg.test(val1)){ //验证姓名是否为2-4个汉字
      $("#val1").addClass('val');
        $("#val1").val('');
        $("#val1").attr('placeholder','请输入2-4个汉字！');
    }else{
        tar1 = true;
    }
    
    //验证手机号
    var tar2 = false;
    var val2 = $("#val2").val();
    var message = "";
    var myreg =  /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;          
    if(val2 == ''){ //验证手机号是否为空
        message = "手机号不能为空！";
        $("#val2").addClass('val');
        $("#val2").attr('placeholder',message);
    }else if(val2.length !=11){ //验证手机号是否等于11位
        message = "请输入有效的手机号！";
        $("#val2").addClass('val');
        $("#val2").val('');
        $("#val2").attr('placeholder',message);
    }else if(!myreg.test(val2)){ //验证手机号是否为运营商号码
        message = "请输入有效的手机号！";
        $("#val2").addClass('val');
        $("#val2").val('');
        $("#val2").attr('placeholder',message);
    }else{
        tar2 = true;
    }
    
    
    //身份证检验
    var tar3 = false;
    
    //定义地区数组
    var CityArray = { 11: "北京", 12: "天津", 13: "河北", 14: "山西", 15: "内蒙古", 21: "辽宁", 22: "吉林", 23: "黑龙江", 31: "上海", 32: "江苏", 33: "浙江", 34: "安徽", 35: "福建", 36: "江西", 37: "山东", 41: "河南", 42: "湖北", 43: "湖南", 44: "广东", 45: "广西", 46: "海南", 50: "重庆", 51: "四川", 52: "贵州", 53: "云南", 54: "西藏", 61: "陕西", 62: "甘肃", 63: "青海", 64: "宁夏", 65: "新疆", 71: "台湾", 81: "香港", 82: "澳门", 91: "国外" }
    //验证身份证及返回地区、出生年月、性别
    function CheckIdCard(sId) {
        if (sId.length == 15) {
            sId = sId.replace(/([\d]{6})(\d{9})/, "$119$2x");
        }
        var iSum = 0
        var info = ""
        if (!/^\d{17}(\d|x)$/i.test(sId)) 
        //return "非法的身份证号";
        return "身份证号核对错误，请重新输入！";
        
        sId = sId.replace(/x$/i, "a");
        if (CityArray[parseInt(sId.substr(0, 2))] == null) 
        //return "Error:非法地区";
        return "身份证号核对错误，请重新输入！";
        
        sBirthday = sId.substr(6, 4) + "-" + Number(sId.substr(10, 2)) + "-" + Number(sId.substr(12, 2));
        var d = new Date(sBirthday.replace(/-/g, "/"))
        if (sBirthday != (d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate())) 
        //return "Error:非法生日";
        return "身份证号核对错误，请重新输入！";
        
        for (var i = 17; i >= 0; i--) iSum += (Math.pow(2, i) % 11) * parseInt(sId.charAt(17 - i), 11)
        if (iSum % 11 != 1) 
        //return "Error:非法证号";
        return "身份证号核对错误，请重新输入！";
        
        //取得地区、生日、性别
        return CityArray[parseInt(sId.substr(0, 2))] + "," + sBirthday + "," + (sId.substr(16, 1) % 2 ? "男" : "女")
    }
    
    //调用验证方法
    var val3 = $("#val3").val();
    if (val3 == '') {
        $("#val3").addClass('val');
        $("#val3").attr('placeholder','身份证号不能为空！');
    }else if(CheckIdCard(val3) == '身份证号核对错误，请重新输入！'){
        $("#val3").addClass('val');
        $("#val3").val('');
        $("#val3").attr('placeholder','身份证号核对错误，请重新输入！');
    }else{
        tar3 = true;
    }
    
    
    //验证收货地址
    var tar4 = false;
    var val4 = $("#val4").val(); 
    if(val4 == ''){ //验证收货地址是否为空
        $("#val4").addClass('val');
        $("#val4").attr('placeholder','收货地址不能为空！');
    }else if(val4.length<6){ //验证收货地址是否为字节数是否大于5
        $("#val4").addClass('val');
        $("#val4").val('');
        $("#val4").attr('placeholder','请输入正确的收货地址');
    }else{
        tar4 = true;
    }
    
    //只有姓名、手机号、身份证号、收货地址通过验证后才执行下列弹窗代码
    if(tar1 == true && tar2 == true && tar3 == true && tar4 == true){
        let pay = document.getElementById("pay");
        let body = document.getElementsByTagName("body");
        pay.style.display = "block";
        
        this.mask = document.createElement('div');
        this.mask.style.width = window.innerWidth + 'px';
        this.mask.style.height = window.innerHeight + 'px';
        this.mask.style.background = '#000';
        this.mask.style.opacity = '.1';
        this.mask.style.position = 'fixed';
        this.mask.style.top = '0';
        this.mask.style.left = '0';
        this.mask.style.zIndex = "99";
        document.body.appendChild(this.mask);
    }else{
        //return false;
    }    

}
</script>

<form action="/index.php/index/index/buy.html" method="post" >
               <input type="hidden" name="no" required value="{$no}">
               <input type="hidden" name="create_time" required value="{$shijian}">
               <input type="hidden"  name="shop" required value="{$shop.id}">
               <input type="hidden"  name="title" required value="{$shop.title}">
               <input type="hidden"  name="type" required value="901" id="type">
                <input type="hidden"  name="jiage" required value="{$shop.jiage}">
                <li><div class="name">姓名<span style="color:#ff0000"> *</span></div><input id="val1" type="text" placeholder="例如:林先生" name="username"></li>
                <li><div class="name">手机号<span style="color:#ff0000"> *</span></div><input id="val2" placeholder="例如:13855556666" type="text" name="tel"></li>
                <li><div class="name">身份证号<span style="color:#ff0000"> *</span></div><input id="val3" placeholder="例：52558654585" type="text" name="number"></li>
                <li><div class="name">收货地址<span style="color:#ff0000"> *</span></div><input id="val4" placeholder="例如:北京市海淀区xx街道123号" type="text" name="address"></li>
                <li><div class="name">推荐人</div><input placeholder="例：林先生 1355988888" type="text" name="from"></li>
                <div class="bnt">
                <button type="submit" onclick="pay();return false;">提交</button>
                </div>
            </form>