html,Code片段,代码实例,代码示例,代码片段库

html 路由器链路

router-link.vue

 <router-link to="/signin" tag="li">Singin</router-link>

html 米高梅 - 旋转木马

HTML Box：http：//share.instapage.com/vLTwEQ 说明：http：//share.instapage.com/YAaNLG

carousel

<!-- Insert in HTML/CSS->HEAD -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css">
<script src="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js"></script>

<style>
@font-face {
    font-family: 'Bebas';
    src: url('//storage.googleapis.com/instapage-app-assets/1563975397_bebas-regular.ttf') format('truetype'),
        url('//storage.googleapis.com/instapage-app-assets/1563975397_bebas-regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

.slick-slide {
    margin: 20px;
    outline: none;
}

.slick-arrow {
    display: block;
    z-index: 1000;
    cursor: pointer;
    height: 100%;
    width: 2rem;
    top: 0;
    position: absolute;
}
.slick-arrow:hover {
    background-image: linear-gradient(180deg, hsla(0, 0%, 95%, 0) 0, rgba(0, 0, 0, .06) .875rem, rgba(0, 0, 0, .06) calc(100% - .875rem), hsla(0, 0%, 95%, 0));
}
.slick-arrow.slick-disabled {
    opacity: 0.5;
    pointer-events: none;
}
.slick-arrow img {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 0.6rem !important;
}

.slick-prev {
    left: -2rem;
}
.slick-prev img {
    left: 30%;
}
.slick-prev::after {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    border-right: 1px solid #cbcbcb;
    border-image: linear-gradient(180deg, hsla(0, 0%, 95%, 0), #cbcbcb .875rem, #cbcbcb calc(100% - .875rem), hsla(0, 0%, 95%, 0)) 1 100%;
    filter: drop-shadow(2px 1px 4px #1A1A1A);
}

.slick-next {
    right: -2rem;
}
.slick-next img {
    right: 30%;
}
.slick-next::before {
    content: '';
    position: absolute;
    top: 0;
    display: block;
    bottom: 0;
    left: 0;
    border-left: 1px solid #cbcbcb;
    border-image: linear-gradient(180deg, hsla(0, 0%, 95%, 0), #cbcbcb .875rem, #cbcbcb calc(100% - .875rem), hsla(0, 0%, 95%, 0)) 1 100%;
    filter: drop-shadow(-2px 1px 4px #1A1A1A);
}

.photo {
    width: 7.25rem;
    height: 7.25rem;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto;
    object-position: 50% 10%;
}
.description {
    text-align: center;
    margin-top: 1rem;
    color: #3B3B3B;
    font-family: "Bebas", bebas-neue-1, bebas-neue-2, sans-serif;
    text-transform: uppercase;
}
.actor {
    font-size: 1.125rem;
    font-weight: bold;
}
.character {
    margin-top: 0.1rem;
    font-size: 0.7rem;
}

@media only screen and (max-width: 768px) {
    .photo {
        width: 10rem;
        height: 10rem;
    }
    .actor {
        font-size: 1.5rem;
        font-weight: bold;
    }
    .character {
        font-size: 0.875rem;
    }
}
</style>

<!-- Insert in Javascript->FOOTER -->
<script>
$(".slider").slick({
    slidesToShow: 5,
    slidesToScroll: 1,
    infinite: true,
    speed: 200,
    arrows: true,
    prevArrow: '<div class="slick-prev"><img src="//storage.googleapis.com/instapage-user-media/6ee1e6c6/39790996-0-left.png" alt=""></div>',
    nextArrow: '<div class="slick-next"><img src="//storage.googleapis.com/instapage-user-media/6ee1e6c6/39790991-0-right.png" alt=""></div>',
    responsive: [
        {
            breakpoint: 768,
            settings: {
                slidesToShow: 1,
                slidesToScroll: 1,
                arrows: false,
                centerMode: true,
                variableWidth: true,
                variableHeight: true
            }
        }
    ]
});
</script>


<!-- Insert in HTML Box on page -->
<div class="slider">
    <!-- 1st slide -->
    <div class="slide">
        <div class="slide-container">
            <img class="photo" src="//storage.googleapis.com/instapage-app-assets/1563887265_amy.jpg" alt="Amy Fleming">
            <div class="description">
                <p class="actor">Amy Fleming</p>
                <p class="character">Amber Marshall</p>
            </div>
        </div>
    </div>
    <!--  2nd slide -->
    <div class="slide">
        <div class="slide-container">
            <img class="photo" src="//storage.googleapis.com/instapage-app-assets/1563887269_ty.jpg" alt="Ty Borden">
            <div class="description">
                <p class="actor">Ty Borden</p>
                <p class="character">Graham Wardle</p>
            </div>
        </div>
    </div>
    <!--  3rd slide -->
    <div class="slide">
        <div class="slide-container">
            <img class="photo" src="//storage.googleapis.com/instapage-app-assets/1563887266_jack.jpg"
                alt="Jack Barlett">
            <div class="description">
                <p class="actor">Jack Barlett</p>
                <p class="character">Shaun Johnston</p>
            </div>
        </div>
    </div>
    <!-- 4th slide -->
    <div class="slide">
        <div class="slide-container">
            <img class="photo" src="//storage.googleapis.com/instapage-app-assets/1563887266_lou.jpg" alt="Lou Fleming">
            <div class="description">
                <p class="actor">Lou Fleming</p>
                <p class="character">Michelle Morgan</p>
            </div>
        </div>
    </div>
    <!-- 5th slide -->
    <div class="slide">
        <div class="slide-container">
            <img class="photo" src="//storage.googleapis.com/instapage-app-assets/1563887267_tim.jpg" alt="Tim Fleming">
            <div class="description">
                <p class="actor">Tim Fleming</p>
                <p class="character">Tim Fleming</p>
            </div>
        </div>
    </div>
    <!-- 6th slide -->
    <div class="slide">
        <div class="slide-container">
            <img class="photo" src="//storage.googleapis.com/instapage-app-assets/1563887266_georgie.jpg" alt="Georgie">
            <div class="description">
                <p class="actor">Georgie</p>
                <p class="character">Alisha Newton</p>
            </div>
        </div>
    </div>
</div>

html 彩色转换器

彩色转换器

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Color to hex and rgba conversion</title>
    <script type="text/javascript" src="color-convert.js"></script>
    <script type="text/javascript">
      function update_rgba_hex() {
        var cname = document.getElementById('cname').value;
        document.getElementById('rgba').innerHTML = color_convert.to_rgba(cname);
        document.getElementById('hex').innerHTML = color_convert.to_hex(cname);
        var canvas, context;
        canvas = document.getElementById('swatch');
        context = canvas.getContext('2d');
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.fillStyle = cname;
        context.fillRect(0, 0, canvas.width, canvas.height);
      }
    </script>
  </head>
  <body>
    <p>Enter a color <input size="30" id="cname" oninput="update_rgba_hex();"/> <button onclick="update_rgba_hex();">Check it</button></p>
    <p>rgba: <code id="rgba"></code></p>
    <p>hex: <code id="hex"></code></p>
    <div>
      <canvas id="swatch" width="50" height="50"></canvas>
    </div>
  </body>
</html>

html 手风琴

手风琴

accordian

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #ccc;
}

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
</style>
</head>
<body>

<h2>Animated Accordion</h2>
<p>Click on the buttons to open the collapsible content.</p>

<button class="accordion">Section 1</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  });
}
</script>

</body>
</html>

html 手风琴

手风琴

accordian

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #ccc;
}

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
</style>
</head>
<body>

<h2>Animated Accordion</h2>
<p>Click on the buttons to open the collapsible content.</p>

<button class="accordion">Section 1</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  });
}
</script>

</body>
</html>

html MJML - 按钮内的图标

button-icon.mjml

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>

        <mj-button href="https://google.com" color="white" background-color="F45E43" border-radius="20px" line-height="24px"><img src="https://mjml.io/assets/img/mjml-logo.png" style="width:24px; vertical-align:middle;" /> &nbsp; Download MJML !</mj-button>

      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

html 检查数字是否为Square

JS Bin //来源https://jsbin.com/gaqosaq

isSquare codewars.js

const isSquare = (n) => Math.sqrt(n) % 1 === 0;

console.log(isSquare(26))

isSquare.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

<script id="jsbin-javascript">
const isSquare = (n) => Math.sqrt(n) % 1 === 0;

console.log(isSquare(26))
</script>



<script id="jsbin-source-javascript" type="text/javascript">const isSquare = (n) => Math.sqrt(n) % 1 === 0;

console.log(isSquare(26))</script></body>
</html>

html 自定义照相馆PP

如果你有一个矩阵和魔杖，允许客户端在wizzy中放置的图像上使用灯箱，就像照片库pp

code.html

 <div class="gallery-matrix">
    {{Item.FieldValues.Gallery}}
</div>


<script>
$(".gallery-matrix").wrapInner('<div class="photogallery" />').prepend('<link rel="stylesheet" href="/sitefiles/global/css/jquery.lightbox.css" as="style" onload="this.onload=null;this.rel='+"'stylesheet'"+'">');
$(".gallery-matrix").find(".photogallery").wrapInner("<ul class='photo-list' />");
$(".gallery-matrix img").each(function() {
  $(this).wrap("<a href='" + $(this).attr('src') + "' title='" + $(this).attr('alt') + "' style='background-image: url("+ $(this).attr('src') + ")' />");
  if ($(this).attr("alt").length) {
    $("<p class='photo-gallery-caption'>" + $(this).attr('alt') + "</p>").insertAfter($(this).parent('a'));
  }
})
$(function() {
  $(".gallery-matrix a").lightBox({
    fixedNavigation: true
  });
});
</script>

html 自定义照相馆PP

如果你有一个矩阵和魔杖，允许客户端在wizzy中放置的图像上使用灯箱，就像照片库pp

code.html

 <div class="gallery-matrix">
    {{Item.FieldValues.Gallery}}
</div>


<script>
$(".gallery-matrix").wrapInner('<div class="photogallery" />').prepend('<link rel="stylesheet" href="/sitefiles/global/css/jquery.lightbox.css" as="style" onload="this.onload=null;this.rel='+"'stylesheet'"+'">');
$(".gallery-matrix").find(".photogallery").wrapInner("<ul class='photo-list' />");
$(".gallery-matrix img").each(function() {
  $(this).wrap("<a href='" + $(this).attr('src') + "' title='" + $(this).attr('alt') + "' style='background-image: url("+ $(this).attr('src') + ")' />");
  if ($(this).attr("alt").length) {
    $("<p class='photo-gallery-caption'>" + $(this).attr('alt') + "</p>").insertAfter($(this).parent('a'));
  }
})
$(function() {
  $(".gallery-matrix a").lightBox({
    fixedNavigation: true
  });
});
</script>

html for循环获取索引的写法

因为

comp.processConfig.vue

for (const [index, ele] of new Map(tempArr.actWorkflowTmpNodeList.map((item, i) => [ i, item ]))) {
          // 预设审批人
          this.$set(ele.preUser, 'userNo', ele.presetApproveUser || null)
          // 手动调用 员工组件内部反显方法
          if (this.$refs['emp' + (index + 1)]) { this.$refs['emp' + (index + 1)][0].reloadUser() }
          // 流程配置 审批岗位处理
          let typeOfApprovePost = typeof (ele.approvePost)
          if (typeOfApprovePost === 'string') {
            ele.approvePost = JSON.parse(ele.approvePost)
          }
          // 模板应用过来的岗位数据是字符串，编辑反显的数据是对象
          ele.orgType = parseInt(ele.orgType)
          ele.checkedUser = JSON.parse(ele.approveUser).map(o => o.userNo)
        }