一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第7天，点击查看活动详情。

我正在参加 码上掘金体验活动，详情：show出你的创意代码块

序

汇总个人在码上掘金的案例

主观性较强，或许对你有帮助。

使用第三方js

使用第三方js需要在设置中添加所需的js依赖的cdn文件，可以jsdelivr上找所需的依赖路径

使用Vue

cdn地址: https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js

感觉可以再结合Element UI使用

码上掘金 (juejin.cn)

使用Echarts

cdn地址: https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js

画一个个性化仪表盘，option配置如下

const option = {
  grid: {
    top: '0',
    left: '0',
    right: '0',
  },
  series: [
    {
      startAngle: 180,
      endAngle: 0,
      type: 'gauge',
      radius: '120%',
      center: ['50%', '90%'],
      axisLine: {
        lineStyle: {
          width: 12,
          color: [
            [ 1, new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0.1, color: '#FD062F' },
                { offset: 0.2, color: '#FF661A' },
                { offset: 1, color: '#05FAB7' }
              ])
            ]
          ]
        }
      },
      pointer: {
        width: 5,
        length: '70%',
        itemStyle: {
          color: '#FF002B',
        },
        offsetCenter: [0, -6],
      },
      axisTick: {
        distance: -12,
        length: 12,
        splitNumber: 1,
        lineStyle: {
          color: '#fff',
          width: 2,
        },
      },
      splitLine: {
        distance: -2,
        length: 12,
        lineStyle: {
          color: '#fff',
          width: 0,
        },
      },
      axisLabel: {
        color: '#fff',
        color: '#fff',
        distance: 10,
        fontSize: 12,
      },
      detail: {
        show: false,
        valueAnimation: true,
      },
      data: [{ value: 58 }],
    },
  ],
};

码上掘金 (juejin.cn)

使用Axios

使用Axios获取一张猫的图片

接口https://api.thecatapi.com/v1/images/search，随机放回一张猫的图片

let appDom = document.getElementById("app")
axios.get('https://api.thecatapi.com/v1/images/search').then((res)=> {
  if(res.data) {
    console.log(res.data[0])
    appDom.innerHTML = `
      <img 
        width="${res.data[0].width}" 
        height="${res.data[0].height}"
        src="${res.data[0].url}"
      />
    `
  }
})

码上掘金 (juejin.cn)

CSS案例

transition和animation区别

鼠标移入第一个div会有动画效果，和第二个div的动画效果一样

码上掘金 (juejin.cn)

js案例

浏览器获取经纬度

js代码如下，需要注意的是要获取高精度的经纬度星系需要设置enableHighAccuracy: true

详细请看mdn => PositionOptions | MDN (mozilla.org)

if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
      (position) => {
        document.getElementById('app').innerHTML= `
            您的位置是${position.coords.latitude},${position.coords.longitude}
        `
      },
      (error) => {
      },
      {
        enableHighAccuracy: true,
      }
    );
  } else {
    document.getElementById('app').innerHTML='不支持位置信息'
  }

码上掘金 (juejin.cn)