javascript技巧

three.js显示中文字体与tween应用详析

2021-01-04

今天郭先生说一下如何在three中显示中文字体,然后结合tween实现文字位置的动画.线案例请点击chinese-font, 1. 生成中文字体我们都使用过three.js的FontLoader加载typeface.json实现font的使用,但是很多案例都是英文字体,那么如何来生成中文字体呢?现在我们可以通过Facetype.js实现ttf向typeface.json的转换. 首先我们在网上下载ttf中文字体(或者在电脑的C:\Windows\Fonts直接复制一份中文的ttf字体),然后我

原生js中运算符及流程控制示例详解

2021-01-04

运算符算数:+ 加.- 减.* 乘./ 除.% 求模赋值:=.+=.-=.*=./=.%= 关系:>.<. >=. <=. ==. ===. !=. !== 逻辑:||或.&&与.!否实例1.求模 window.onload = function(){ alert(0%2) //0 alert(1%2) //1 alert(2%2) //0 } 实例2.隔行变色 <body> <ol> <li>取模:就是求余数</li

ES2020让代码更优美的运算符 (?.) (??)

2021-01-03

链判断运算符(?.) 非常好用.常用,搭配Null 判断运算符使用,效果更佳,完美! 来,上代码: 我们通常获取一个对象多层的属性值时,需要进行多次的判断.如不判断,一个为空则报错,导致后面无法继续下去. // error const firstName = message.body.user.firstName; // ok const firstName = (message && message.body && message.body.user &&

mapboxgl实现带箭头轨迹线的代码

2021-01-03

最近在使用mapboxgl实现轨迹展示时,想实现类似高德地图导航轨迹效果,然而并未在网上找到类似示例.经一番研究与尝试,最终解决,效果如下. 添加箭头核心代码如下,只需在配置layout中添加symbol-placement和symbol-spacing属性即可: // 添加箭头图层 function addArrowlayer() { map.addLayer({ 'id': 'arrowLayer', 'type': 'symbol', 'source': { 'type': 'geojso

js用正则表达式筛选年月日的实例方法

2021-01-03

当我们想要对日期进行筛选时,可以选择使用正则表达式的检索功能.这里涉及到正则表达式关于匹配的使用,本篇会就组匹配的基础知识带来分析和代码展示.再学会了正则表达式的匹配方法后,就筛选日期的方法进行过程介绍,下面一起来看看正则表达式的相关内容吧. 1.组匹配正则表达式的括号表示分组匹配,括号中的模式可以用来匹配分组的内容. /fred+/.test('fredd') // true /(fred)+/.test('fredfred') // true 上面代码中,第一个模式没有括号,结果+只表示重

js正则表达式简单校验方法

2021-01-03

对于字符串的一些操作,可以通过正则表达式来实现.一般的搜索操作想必大家已经学会,今天就来说说它的校验功能,这样可以帮助判断字符串类型或者是其它的组成,比如密码.中文.字符串的组成等.下面就js正则表达式的校验带来内容分享,同时要考虑在js中支持的类型. 1.常见js正则校验 (1)校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊字符,长度在8-10之间. ^(?=.*\\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$ (2)校验中文字符串仅能是中文. ^

原生JS运动实现轮播图

2021-01-02

原生JS运动实现轮播图 **基本原理:**通过控制包含n张图片的ul的left值来实现图片自动运动的效果,其中列表中li元素的个数为n,第一个li和最后一个li里存放的图片应为同一张图片,当图片运动到最后一张时,将ul的left值设为0,即可达到图片无线轮播的效果. 运动函数的实现函数需传入元素(即需要参与运动的元素).目标值(以对象的形式呈现,如{left: 300}).callback(回调函数). //多物体多值运动+回调机制 function startMove(dom, attrOb

基于JavaScript实现简单扫雷游戏

2021-01-02

对于10年前的人来说,扫雷肯定是家喻户晓,由于当时的科技并不是很发达,大家对于电脑游戏的了解,可能都是从扫雷开始的,今天就交大家一种用js原生代码写一个简单的扫雷游戏,话不多说,直接上干货: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="wid

JS+CSS实现过渡特效

2020-12-31

最近在玩一个叫Baba is you的游戏,很羡慕里面的一个转场特效,所以试着做了一下.主要使用了JS和CSS,特效主要是用CSS实现的. HTML代码 <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>开始导航</title> <link rel="

基于JavaScript实现轮播图效果

2020-12-31

本文实例为大家分享了JavaScript实现轮播图效果的具体代码,供大家参考,具体内容如下学习笔记(学校的课设),实现了左右切换,按指示点切换.按小图标切换和自动切换,但是还有某些功能没完善,如:切换到某张图片后,左右并没有切换到前后相应的图片. 先看实现效果: 代码仅供参考: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>

Selenium执行JavaScript脚本的方法示例

2020-12-30

JavaScript是运行在客户端(浏览器)和服务器端的脚本语言,允许将静态网页转换为交互式网页.可以通过 Python Selenium WebDriver 执行 JavaScript 语句,在Web页面中进行js交互.那么js能做的事,Selenium应该大部分也能做.WebDriver是模拟终端用户的交互,所以就不能点击不可见的元素,有时可见元素也不能点击.在这些情况下,我们就可以通过WebDriver 执行JavaScript来点击或者执行页面元素.本文将介绍如何使用 WebDriver

微信小程序实现购物车小功能

2020-12-30

微信小程序购物车效果,供大家参考,具体内容如下购物车是一个比较简单的小功能. 购物车功能主要运用了微信小程序的缓存机制,在商品页面将需要添加的数据同步传入缓存中,然后在购物页面通过同步方法拿到对应的数据,最后在页面上进行渲染就可以了. 关键方法 var arrlist = wx.getStorageSync('key') //获取缓存对应key得数据 wx.setStorageSync('key',arrlist) //修改缓存对应key得数据以下便是购物车页面的详细代码,以供交流参考: 切

微信小程序实现可拖动悬浮图标(包括按钮角标的实现)

2020-12-29

在制作商城类微信小程序的过程中,我们经常会碰到需要增加可拖动悬浮图标的情况,本文简单的介绍一下可拖动悬浮按钮的实现. 运行截图: 主要代码: js: var startPoint Page({ data: { //按钮位置参数 buttonTop: 0, buttonLeft: 0, windowHeight: '', windowWidth: '', //角标显示数字 corner_data:0, }, onLoad:function(){ //定义角标数字 this.setData({ co

javascript实现随机抽奖功能

2020-12-28

javascript实现随机抽奖,供大家参考,具体内容如下首先创建一个数组用于存放抽奖的参与者: var arr=['张三','波波','kk','莉莉','张三丰','刘德华','周杰困','你那儿','zhere','好的']; 给开始和结束按钮div添加点击事件: //添加点击开始则开始循环播放 document.getElementById("start").addEventListener("click",va); //点击停止则停止播放并显示恭喜中奖

微信小程序弹窗禁止页面滚动的实现代码

2020-12-28

下面给大家介绍下小程序弹窗禁止页面滚动的效果: 在小程序弹窗时,外部页面禁止滚动, 可以在最外部容器设置catchtouchmove 但是如果弹窗内部也需要滚动,需要用scroll-view包裹,并设置scroll-y catchtouchmove需要接收个方法,不然会一直警告 <view class="box">占位</view> <view class="pop" catchtouchmove="touchMove&quo

React实现todolist功能

2020-12-28

一.index.js ReactDOM.render( <React.StrictMode> <TodoList /> </React.StrictMode>, document.getElementById('root') ); 二.TodoList 1.constructor constructor(props) { super(props); this.state = { inputValue: '', list: [] } } 2.render render()

JS实现选项卡插件的两种写法（jQuery和class）

2020-12-28

本文实例为大家分享了JS实现选项卡插件的2种写法,供大家参考,具体内容如下实现插件的几个注意点: (1)定义一个固定的html结构,比如选项卡的标题的标签为为li,每个选项卡的内容的标签为div等等: (2)选中时的样式提前确定: (3)最好先用简单的JS实现选项卡的功能,再改为插件的模式. html结构如下: <style> * { margin: 0; padding: 0; } ul { list-style: none; } #tabBox { box-sizing: border-

JS+JQuery实现无缝连接轮播图

2020-12-27

我之前写过一个简易版的自动+手动轮播图:简易轮播图但是这个轮播图在切换的时候是没有实现无缝滚动的,每张图片都是单张切换的,而不是滑动.现在用JQuery实现无缝连接的轮播图. 无缝连接的轮播图的原理如下: 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>无缝轮播图</title> </head> <style typ

微信小程序视频弹幕发送功能的实现

2020-12-27

1. 目录结构 2. videoDanmu  <video src="{{src}}" id='video' danmu-btn enable-danmu danmu-list="{{ danmuList }}" > </video>  <view class='sendDanmu'> <textarea name="" id

js+html+css实现手动轮播和自动轮播

2020-12-27

本文实例为大家分享了js+html+css实现手动轮播和自动轮播的具体代码,供大家参考,具体内容如下原理:设置图片层的总长=单张图片长度*张数:在轮播层中利用overflow只留出一张图片的显示: 通过图片层的left来显示轮播的每一张图,第一张为0,为了后面的图片显示,left的值左移为负数. 原理图代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title&

« Prev 1 2 3 4 5 6 7 8 9 10 Next »

随机推荐