页面小技巧(小实例)
页面小技巧
苟圣啊
请大佬多多关照小弟,有不足的地方还请指点,点个赞再走可还行啊
展开
-
uniapp中菜单双联动效果(左侧点击右侧自动滚动到对应位置,右侧滚动左侧高亮对应菜单)
<template> <view class="content"> <view class="ld"> <!-- :class="{active:index===change}" --> <view class="left"> <view v-for="(item,index) in kindlist" :key="index" @click="setid(index)" :class="原创 2020-08-27 15:51:38 · 5527 阅读 · 3 评论 -
canvas生成验证码,附有验证功能(全大或小写字母和生成的验证码验证)。
这是css样式和html <style> * { margin: 0; padding: 0; } .small { display: flex; height: 30px; width: 250px; margin-top: 10px; border: 1px solid sk原创 2020-08-19 14:01:07 · 260 阅读 · 0 评论 -
获取农历时间(几月初几)
var CalendarData = new Array(100); var madd = new Array(12); var numString = "一二三四五六七八九十"; var monString = "正二三四五六七八九十冬腊"; var cYear, cMonth, cDay, TheDate; CalendarData = new Array(0xA4B, 0x5164B, 0x6A5, 0x6D4, 0x..原创 2020-07-27 13:46:40 · 801 阅读 · 0 评论 -
字符串首字母大写,数组中的字符串首字母大写
字符串首字母大写(封装的思想,也可以不用) function startU(str) { let s1 = str.slice(0, 1); let s2 = str.slice(1); let result = s1.toUpperCase() + s2.toLowerCase(); return result } console.log(startU('asdasdas.原创 2020-07-24 09:30:47 · 794 阅读 · 0 评论 -
原生js,距离过年倒计时
<h1></h1> <script> var myh1 = document.querySelector("h1"); go(); setInterval(go,1000); function go() { //过年倒计时 //现在的时间 var now = new Date(); // 过年时间(.原创 2020-07-07 22:06:26 · 1190 阅读 · 0 评论 -
使用递归进行快速排序
function quickSort(arr) { //如果数组<=1,则直接返回 if (arr.length <= 1) { return arr; } var pivotIndex = Math.floor(arr.length / 2); //找基准,并把基准从原数组删除 var pivot = arr.splice(pivotIndex, 1)[0]; ..原创 2020-07-07 21:53:26 · 377 阅读 · 0 评论 -
小实例:导航栏吸顶效果(原生js和css)详细教程(防秃头小技巧)
第一种原生js写法 <style> * { margin: 0; padding: 0; } </style> <div> <div style="height: 100px;"></div> <div id="nav" style="background: red;height: 30px;box-sizing: b原创 2020-07-01 10:16:47 · 1334 阅读 · 0 评论 -
vue改页面顶部浏览器标题栏图标、名称和地址栏详细教程
首先在文件目录下找到public文件夹接着在文件目录中找到favicon.ico改成你想要换的图标(换的图标一定要是ico结尾,可以去百度搜一下icon图标生成器转一下)接着在文件目录中找到package.json文件在package.json文件中找到name,改成你想要的名字效果如下...原创 2020-06-24 11:39:22 · 12649 阅读 · 3 评论 -
vue三级(三层)头部菜单导航,一天一个(防秃头)小技巧
* { margin: 0; padding: 0; list-style: none; } body { background: skyblue; } .menu { display: flex; } .menu>li { padding: 10px;原创 2020-06-24 10:57:41 · 1197 阅读 · 0 评论 -
jq遮罩层小实例,页面(防秃头)小技巧
* { margin: 0; padding: 0; } .box { width: 100vw; height: 100vh; background-color: palegreen; } .small { position: fixed; left: 0; .原创 2020-06-23 22:39:22 · 188 阅读 · 0 评论 -
阅读网页的纵向滚动条驱动顶部横向滚动条0%~100%(原生js)小例子
*{ margin: 0; padding: 0; } .top{ width: 0%; height: 5px; background: skyblue; position: fixed; top: 0; left: 0; } <div class="top"原创 2020-06-23 22:18:21 · 256 阅读 · 0 评论 -
继上一个vue网页仿星星评价,vue脚手架插件的npm安装教学以及使用教学。脚手架仿网页星星评价
npm(前提是已经按装node)按下 window+r键打开cmdnpm install -g cnpm --registry=https://registry.npm.taobao.org(全局安装如果没下载cnpm,需要下载 )cnpm i -g @vue/cli (全局安装vue脚手架)vue -V(查看vue脚手架是否安装好)vue create demo1 (建一个名叫demo1的项目)npm run serve(运行项目)vue脚手架使用初始目录是这个样子的在Ap原创 2020-06-17 13:12:45 · 254 阅读 · 0 评论 -
vue仿网页星星评价小例子,简单易懂(点击,经过,离开)
.star{ color: gold; }<div id="app"> <i @mouseleave='cIndex=index' @click='index=item' @mouseenter='cIndex=item' v-for='item in count' class="fa star " aria-hidden="true" :class="item <= cIndex?'fa-star':'fa-star-o'" s.原创 2020-06-15 17:41:18 · 283 阅读 · 0 评论 -
vue轮播图小例子,简单易懂,易上手。
* { padding: 0; margin: 0; list-style: none; } .container { width: 100%; position: relative; display: flex; justify-content: center; } .c.原创 2020-06-15 17:30:26 · 523 阅读 · 0 评论 -
jq的一个简单的tab面板切换的小例子,有手就行,你值得拥有!!!
*{ margin: 0; padding: 0; list-style: none; } .title{ display: flex; } .title li { padding: 10px 20px; } .title li.active { background..原创 2020-06-15 13:49:37 · 305 阅读 · 0 评论