Skip to content

Instantly share code, notes, and snippets.

@edwardlorilla
edwardlorilla / index.html
Created June 8, 2021 16:17
SMS verification code input box
<div id="app">
<div class="check-div">
<h1>Please enter the verification code</h1>
<div class="input-div">
<input
type="text"
class="inputItem0"
data-index="0"
maxlength="1"
autofocus
@edwardlorilla
edwardlorilla / index.html
Created June 8, 2021 16:16
vue custom drop-down list
<template id="DropList">
<div class="zq-drop-list" @mouseover="onDplOver($event)" @mouseout="onDplOut($event)">
<span>{{dplLable}}</span>
<ul :style="{'display': unorderlist?'block':'none'}">
<li v-for="(item, index) in datalist" :key="index" @click="onLiClick(index, $event)">{{item[labelproperty]}}</li>
</ul>
</div>
</template>
<div id="app">
@edwardlorilla
edwardlorilla / index.html
Created June 6, 2021 16:12
【JavaScript html 】 sliding verification
<div id="dragContainer"><!-- Initial background of container -->
<div id="dragBg"></div><!-- Green background -->
<div id="dragText"></div><!-- Sliding container text -->
<div id="dragHandler" class="dragHandlerBg"></div>
</div> <!-- Slider Initial background of the slider -->
@edwardlorilla
edwardlorilla / index.html
Created June 6, 2021 16:09
JavaScript+html implements random QR code verification
<div class="code">
<input type="text" value="" placeholder="Please enter the verification code (not case sensitive)" class="input-val">
<canvas id="canvas" width="100" height="30"></canvas>
<button class="btn">Submit</button>
</div>
<div id="app">
<div class="water-marker" >
<div v-watermarker="{text:'lorem ipsum',textColor:'rgba(180, 180, 180, 0.4)'}">
<div class="water-marker-item">lorem ipsum</div>
</div>
</div>
</div>
@edwardlorilla
edwardlorilla / index.html
Created June 3, 2021 15:34
js realizes automatic lock screen function
<div id="app">
<button @click="unlock">test open modal</button>
<div :style="{'display': isLock ? 'none' : 'block' }" class="modal">
<div class="modal-content">
<span class="close-btn" @click="handleLock">&times;</span>
</div>
<div class="modal-content">
<input type="password" :disabled="isLock">
</div>
</div>
@edwardlorilla
edwardlorilla / index.html
Created June 3, 2021 15:28
【JAVASCRIPT】Read CSV file with File API
<input type="file" name="select" id="select" />
<div id="result"></div>
@edwardlorilla
edwardlorilla / index.html
Created June 2, 2021 16:35
【VUEJS】simple shopping cart
<div id="app" v-cloak>
<div v-if="books.length">
<table>
<thead>
<tr>
<th></th>
<th>Book name</th>
<th>Publication date</th>
<th>Price</th>
<th>Purchase quantity</th>
@edwardlorilla
edwardlorilla / index.html
Created June 2, 2021 16:30
【JAVASCRIPT】Mask or clip the image on canvas and move it
<canvas id="canvas" width="480" height="360"></canvas>