douchaoyang / blog Goto Github PK
View Code? Open in Web Editor NEWblogs use issues
blog's People
Contributors
Watchers
blog's Issues
Whistle 解决资源跨域问题
在rules中需要跨域的域名后添加resCors://*
例：
https://static.stmcu.com.cn http://127.0.0.1:8081
static.stmcu.com.cn resCors://*
影视APP TV版
影视APP TV版：https://pan.lanzou.com/b00zboiwb 密码：2kzz
世界各国家城市集合 JSON & SQL
以下是**的JSON数据
{
"China": {
"label": "**",
"value": "**",
"label_en": "China",
"children": [
{
"label": "北京",
"value": "北京",
"label_en": "Beijing",
"children": [
"东城",
"西城",
"朝阳",
"丰台",
"石景山",
"海淀",
"门头沟",
"房山",
"通州",
"顺义",
"昌平",
"大兴",
"平谷",
"怀柔",
"密云",
"延庆"
],
"children_en": [
"Dongcheng",
"Xicheng",
"Chaoyang",
"Fengtai",
"Shijingshan",
"Haidian",
"Mentougou",
"Fangshan",
"Tongzhou",
"Shunyi",
"Changping",
"Daxing",
"Pinggu",
"Huairou",
"Miyun",
"Yanqing"
]
},
{
"label": "天津",
"value": "天津",
"label_en": "Tianjin",
"children": [
"和平",
"河东",
"河西",
"南开",
"河北",
"红桥",
"滨海新区",
"东丽",
"西青",
"津南",
"北辰",
"宁河",
"武清",
"静海",
"宝坻",
"蓟县"
],
"children_en": [
"Heping",
"Hedong",
"Hexi",
"Nankai",
"Hebei",
"Hongqiao",
"Binghaixinqu",
"Dongli",
"Xiqing",
"Jinnan",
"Beichen",
"Ninghe",
"Wuqing",
"Jinghai",
"Baodi",
"Jixian"
]
},
{
"label": "河北",
"value": "河北",
"label_en": "Hebei",
"children": [
"石家庄",
"唐山",
"秦皇岛",
"邯郸",
"邢台",
"保定",
"张家口",
"承德",
"沧州",
"廊坊",
"衡水"
],
"children_en": [
"Shijiazhuang",
"Tangshan",
"Qinhuangdao",
"Handan",
"Xingtai",
"Baoding",
"Zhangjiakou",
"Chengde",
"Cangzhou",
"Langfang",
"Hengshui"
]
},
{
"label": "山西",
"value": "山西",
"label_en": "Shanxi",
"children": [
"太原",
"大同",
"阳泉",
"长治",
"晋城",
"朔州",
"晋中",
"运城",
"忻州",
"临汾",
"吕梁"
],
"children_en": [
"Taiyuan",
"Datong",
"Yangquan",
"Changzhi",
"Jincheng",
"Shuozhou",
"Jinzhong",
"Yuncheng",
"Xinzhou",
"Linfen",
"luliang"
]
},
{
"label": "内蒙古",
"value": "内蒙古",
"label_en": "Inner Mongolia",
"children": [
"呼和浩特",
"包头",
"乌海",
"赤峰",
"通辽",
"鄂尔多斯",
"呼伦贝尔",
"巴彦淖尔",
"乌兰察布",
"兴安",
"锡林郭勒",
"阿拉善"
],
"children_en": [
"Hohhot",
"Baotou",
"Wuhai",
"Chifeng",
"Tongliao",
"Ordos",
"Hulun Buir",
"Bayannur",
"Ulan Qab",
"Xing'an",
"Xilin Gol",
"Alxa"
]
},
{
"label": "辽宁",
"value": "辽宁",
"label_en": "Liaoning",
"children": [
"沈阳",
"大连",
"鞍山",
"抚顺",
"本溪",
"丹东",
"锦州",
"营口",
"阜新",
"辽阳",
"盘锦",
"铁岭",
"朝阳",
"葫芦岛"
],
"children_en": [
"Shenyang",
"Dalian",
"Anshan",
"Fushun",
"Benxi",
"Dandong",
"Jinzhou",
"Yingkou",
"Fuxin",
"Liaoyang",
"Panjin",
"Tieling",
"Chaoyang",
"Huludao"
]
},
{
"label": "吉林",
"value": "吉林",
"label_en": "Jilin",
"children": [
"长春",
"吉林",
"四平",
"辽源",
"通化",
"白山",
"松原",
"白城",
"延边"
],
"children_en": [
"Changchun",
"Jilin",
"Siping",
"Liaoyuan",
"Tonghua",
"Baishan",
"Songyuan",
"Baicheng",
"Yanbian Korean Autonomous Prefecture"
]
},
{
"label": "黑龙江",
"value": "黑龙江",
"label_en": "Heilongjiang",
"children": [
"哈尔滨",
"齐齐哈尔",
"鸡西",
"鹤岗",
"双鸭山",
"大庆",
"伊春",
"佳木斯",
"七台河",
"牡丹江",
"黑河",
"绥化",
"大兴安岭"
],
"children_en": [
"Harbin",
"Qiqihar",
"Jixi",
"Hegang",
"Shuangyashan",
"Daqing",
"Yichun",
"Jiamusi",
"Qitaihe",
"Mudanjiang",
"Heihe",
"Suihua",
"Da Hinggan Ling"
]
},
{
"label": "上海",
"value": "上海",
"label_en": "Shanghai",
"children": [
"黄浦",
"卢湾",
"徐汇",
"长宁",
"静安",
"普陀",
"闸北",
"虹口",
"杨浦",
"闵行",
"宝山",
"嘉定",
"浦东新区",
"金山",
"松江",
"奉贤",
"青浦",
"崇明"
],
"children_en": [
"Huangpu",
"Luwan",
"Xuhui",
"Changning",
"Jing'an",
"Putuo",
"Zhabei",
"Hongkou",
"Yangpu",
"Minhang",
"Baoshan",
"Jiading",
"Pudong New Area",
"Jinshan",
"Songjiang",
"Fengxian",
"Qingpu",
"Chongming"
]
},
{
"label": "江苏",
"value": "江苏",
"label_en": "Jiangsu",
"children": [
"南京",
"无锡",
"徐州",
"常州",
"苏州",
"南通",
"连云港",
"淮安",
"盐城",
"扬州",
"镇江",
"泰州",
"宿迁"
],
"children_en": [
"Nanjing",
"Wuxi",
"Xuzhou",
"Changzhou",
"Suzhou",
"Nantong",
"Lianyungang",
"Huai'an",
"Yancheng",
"Yangzhou",
"Zhenjiang",
"Taizhou",
"Suqian"
]
},
{
"label": "浙江",
"value": "浙江",
"label_en": "Zhejiang",
"children": [
"杭州",
"宁波",
"温州",
"嘉兴",
"湖州",
"绍兴",
"金华",
"衢州",
"舟山",
"台州",
"丽水"
],
"children_en": [
"Hangzhou",
"Ningbo",
"Wenzhou",
"Jiaxing",
"Huzhou",
"Shaoxing",
"Jinhua",
"Quzhou",
"Zhoushan",
"Taizhou",
"Lishui"
]
},
{
"label": "安徽",
"value": "安徽",
"label_en": "Anhui",
"children": [
"合肥",
"芜湖",
"蚌埠",
"淮南",
"马鞍山",
"淮北",
"铜陵",
"安庆",
"黄山",
"滁州",
"阜阳",
"宿州",
"六安",
"亳州",
"池州",
"宣城"
],
"children_en": [
"Hefei",
"Wuhu",
"Bengbu",
"Huainan",
"Ma'anshan",
"Huaibei",
"Tongling",
"Anqing",
"Huangshan",
"Chuzhou",
"Fuyang",
"Suzhou",
"Lu'an",
"Bozhou",
"Chizhou",
"Xuancheng"
]
},
{
"label": "福建",
"value": "福建",
"label_en": "Fujian",
"children": [
"福州",
"厦门",
"莆田",
"三明",
"泉州",
"漳州",
"南平",
"龙岩",
"宁德"
],
"children_en": [
"Fuzhou",
"Xiamen",
"Putian",
"Sanming",
"Quanzhou",
"Zhangzhou",
"Nanping",
"Longyan",
"Ningde"
]
},
{
"label": "江西",
"value": "江西",
"label_en": "Jiangxi",
"children": [
"南昌",
"景德镇",
"萍乡",
"九江",
"新余",
"鹰潭",
"赣州",
"吉安",
"宜春",
"抚州",
"上饶"
],
"children_en": [
"Nanchang",
"Jingdezhen",
"Pingxiang",
"Jiujiang",
"Xinyu",
"Yingtan",
"Ganzhou",
"Ji'an",
"Yichun",
"Fuzhou",
"Shangrao"
]
},
{
"label": "山东",
"value": "山东",
"label_en": "Shandong",
"children": [
"济南",
"青岛",
"淄博",
"枣庄",
"东营",
"烟台",
"潍坊",
"济宁",
"泰安",
"威海",
"日照",
"莱芜",
"临沂",
"德州",
"聊城",
"滨州",
"菏泽"
],
"children_en": [
"Jinan",
"Qingdao",
"Zibo",
"Zaozhuang",
"Dongying",
"Yantai",
"Weifang",
"Jining",
"Tai'an",
"Weihai",
"Rizhao",
"Laiwu",
"Linyi",
"Dezhou",
"Liaocheng",
"Binzhou",
"Heze"
]
},
{
"label": "河南",
"value": "河南",
"label_en": "Henan",
"children": [
"郑州",
"开封",
"洛阳",
"平顶山",
"安阳",
"鹤壁",
"新乡",
"焦作",
"濮阳",
"许昌",
"漯河",
"三门峡",
"南阳",
"商丘",
"信阳",
"周口",
"驻马店",
"济源"
],
"children_en": [
"Zhengzhou",
"Kaifeng",
"Luoyang",
"Pingdingshan",
"Anyang",
"Hebi",
"Xinxiang",
"Jiaozuo",
"Puyang",
"Xuchang",
"Luohe",
"Sanmenxia",
"Nanyang",
"Shangqiu",
"Xinyang",
"Zhoukou",
"Zhumadian",
"Jiyuan"
]
},
{
"label": "湖北",
"value": "湖北",
"label_en": "Hubei",
"children": [
"武汉",
"黄石",
"十堰",
"宜昌",
"襄阳",
"鄂州",
"荆门",
"孝感",
"荆州",
"黄冈",
"咸宁",
"随州",
"恩施",
"仙桃",
"潜江",
"天门",
"神农架"
],
"children_en": [
"Wuhan",
"Huangshi",
"Shiyan",
"Yichang",
"Xiangyang",
"Ezhou",
"Jingmen",
"Xiaogan",
"Jingzhou",
"Huanggang",
"Xianning",
"Suizhou",
"Enshi Tujia-Miao Autonomous Prefecture",
"Xiantao",
"Qianjiang",
"Tianmen",
"Shennongjia"
]
},
{
"label": "湖南",
"value": "湖南",
"label_en": "Hunan",
"children": [
"长沙",
"株洲",
"湘潭",
"衡阳",
"邵阳",
"岳阳",
"常德",
"张家界",
"益阳",
"郴州",
"永州",
"怀化",
"娄底",
"湘西"
],
"children_en": [
"Changsha",
"Zhuzhou",
"Xiangtan",
"Hengyang",
"Shaoyang",
"Yueyang",
"Changde",
"Zhangjiajie",
"Yiyang",
"Chenzhou",
"Yongzhou",
"Huaihua",
"Loudi",
"Xiangxi Tujia-Miao Autonomous Prefecture"
]
},
{
"label": "广东",
"value": "广东",
"label_en": "Guangdong",
"children": [
"广州",
"韶关",
"深圳",
"珠海",
"汕头",
"佛山",
"江门",
"湛江",
"茂名",
"肇庆",
"惠州",
"梅州",
"汕尾",
"河源",
"阳江",
"清远",
"东莞",
"中山",
"潮州",
"揭阳",
"云浮"
],
"children_en": [
"Guangzhou",
"Shaoguan",
"Shenzhen",
"Zhuhai",
"Shantou",
"Foshan",
"Jiangmen",
"Zhanjiang",
"Maoming",
"Zhaoqing",
"Huizhou",
"Meizhou",
"Shanwei",
"Heyuan",
"Yangjiang",
"Qingyuan",
"Dongguan",
"Zhongshan",
"Chaozhou",
"Jieyang",
"Yunfu"
]
},
{
"label": "广西",
"value": "广西",
"label_en": "Guangxi",
"children": [
"南宁",
"柳州",
"桂林",
"梧州",
"北海",
"防城港",
"钦州",
"贵港",
"玉林",
"百色",
"贺州",
"河池",
"来宾",
"崇左"
],
"children_en": [
"Nanning",
"Liuzhou",
"Guilin",
"Wuzhou",
"Beihai",
"Fangchenggang",
"Qinzhou",
"Guigang",
"Yulin",
"Baise",
"Hezhou",
"Hechi",
"Laibin",
"Chongzuo"
]
},
{
"label": "海南",
"value": "海南",
"label_en": "Hainan",
"children": [
"海口",
"三亚",
"三沙",
"五指山",
"琼海",
"儋州",
"文昌",
"万宁",
"东方",
"定安",
"屯昌",
"澄迈",
"临高",
"白沙",
"昌江",
"乐东",
"陵水",
"保亭",
"琼中"
],
"children_en": [
"Haikou",
"Sanya",
"Shansha",
"Wuzhishan",
"Qionghai",
"Danzhou",
"Wenchang",
"Wanning",
"Dongfang",
"Ding'an",
"Tunchang",
"Cengmai",
"Lingao",
"Baisha Li Autonomous County",
"Jiang Li Autonomous County",
"Ledong Li Autonomous County",
"Lingshui Li Autonomous County",
"Baoting Li-Miao Autonomous County",
"Qiongzhong Li-Miao Autonomous County"
]
},
{
"label": "重庆",
"value": "重庆",
"label_en": "Chongqing",
"children": [
"万州",
"涪陵",
"渝中",
"大渡口",
"江北",
"沙坪坝",
"九龙坡",
"南岸",
"北碚",
"两江新区",
"万盛",
"双桥",
"渝北",
"巴南",
"长寿",
"綦江",
"潼南",
"铜梁",
"大足",
"荣昌",
"璧山",
"梁平",
"城口",
"丰都",
"垫江",
"武隆",
"忠县",
"开县",
"云阳",
"奉节",
"巫山",
"巫溪",
"黔江",
"石柱",
"秀山",
"酉阳",
"彭水",
"江津",
"合川",
"永川",
"南川"
],
"children_en": [
"Wanzhou",
"Fuling",
"Yuzhong",
"Dadukou",
"Jiangbei",
"Shapingba",
"Jiulongpo",
"Nan'an",
"Beibei",
"Kaixian",
"Wansheng",
"Shuangqiao",
"Yubei",
"Ba'nan",
"Changshou",
"Qijiang",
"Tongnan",
"Tongliang",
"Dazu",
"Rongchang",
"Bishan",
"Liangping",
"Chengkou",
"Fengdu",
"Dianjiang",
"Wulong",
"Zhongxian",
"Kaixian",
"Yunyang",
"Fengjie",
"Wushan",
"Wuxi",
"Qianjiang",
"Shizhu Tujia Autonomous Country",
"Xiushan Tujia-Miao Autonomous Country",
"Youyang Tujia-Miao Autonomous Country",
"Pengshui Miao-Tujia Autonomous Country",
"Jiangjin",
"Hechuan",
"Yongchuan",
"Liangjiangxinqu"
]
},
{
"label": "四川",
"value": "四川",
"label_en": "Sichuan",
"children": [
"成都",
"自贡",
"攀枝花",
"泸州",
"德阳",
"绵阳",
"广元",
"遂宁",
"内江",
"乐山",
"南充",
"眉山",
"宜宾",
"广安",
"达州",
"雅安",
"巴中",
"资阳",
"阿坝",
"甘孜",
"凉山"
],
"children_en": [
"Chengdu",
"Zigong",
"Panzhihua",
"Luzhou",
"Deyang",
"Mianyang",
"Guangyuan",
"Suining",
"Neijiang",
"Leshan",
"Nanchong",
"Meishan",
"Yibin",
"Guang'an",
"Dazhou",
"Ya'an",
"Bazhong",
"Ziyang",
"Aba Tibetan-Qiang Autonomous Prefecture",
"Garze Tibetan Autonomous Prefecture",
"Liangshan Yi Autonomous Prefecture"
]
},
{
"label": "贵州",
"value": "贵州",
"label_en": "Guizhou",
"children": [
"贵阳",
"六盘水",
"遵义",
"安顺",
"铜仁",
"黔西南",
"毕节",
"黔东南",
"黔南"
],
"children_en": [
"Guiyang",
"Liupanshui",
"Zunyi",
"Anshun",
"Tongren",
"Qianxinan Buyi-Miao Autonomous Prefecture",
"Bijie",
"Qiandongnan Miao-Dong Autonomous Prefecture",
"Qiannan Buyi Autonomous Prefecture"
]
},
{
"label": "云南",
"value": "云南",
"label_en": "Yunnan",
"children": [
"昆明",
"曲靖",
"玉溪",
"保山",
"昭通",
"丽江",
"普洱",
"临沧",
"楚雄",
"红河",
"文山",
"西双版纳",
"大理",
"德宏",
"怒江",
"迪庆"
],
"children_en": [
"Kunming",
"Qujing",
"Yuxi",
"Baoshan",
"Zhaotong",
"Lijiang",
"Pu'er",
"Lincang",
"Chuxiong Yi Autonomous Prefecture",
"Honghe Hani-Yi Autonomous Prefecture",
"Wenshan Zhuang-Miao Autonomous Prefecture",
"Xishuangbanna Dai Autonomous Prefecture",
"Dali Bai Autonomous Prefecture",
"Dehong Dai-Jingpo Autonomous Prefecture",
"Nujiang Lisu Autonomous Prefecture",
"Diqing Tibetan Autonomous Prefecture"
]
},
{
"label": "西藏",
"value": "西藏",
"label_en": "Tibet",
"children": [
"拉萨",
"昌都",
"山南",
"日喀则",
"那曲",
"阿里",
"林芝"
],
"children_en": [
"Lhasa",
"Qamdo",
"Shannan",
"Xigaze",
"Nagqu",
"Ngari",
"Nyingchi"
]
},
{
"label": "陕西",
"value": "陕西",
"label_en": "Shaanxi",
"children": [
"西安",
"铜川",
"宝鸡",
"咸阳",
"渭南",
"延安",
"汉中",
"榆林",
"安康",
"商洛"
],
"children_en": [
"Xi'an",
"Tongchuan",
"Baoji",
"Xianyang",
"Weinan",
"Yan'an",
"Hanzhong",
"Yulin",
"Ankang",
"Shangluo"
]
},
{
"label": "甘肃",
"value": "甘肃",
"label_en": "Gansu",
"children": [
"兰州市",
"嘉峪关",
"金昌",
"白银",
"天水",
"武威",
"张掖",
"平凉",
"酒泉",
"庆阳",
"定西",
"陇南",
"临夏",
"甘南"
],
"children_en": [
"Lanzhou",
"Jinchang",
"Baiyin",
"Tianshui",
"Jiayuguan",
"Wuwei",
"Zhangye",
"Pingliang",
"Jiuquan",
"Qingyang",
"Dingxi",
"Longnan",
"Linxia Hui Autonomous Prefecture",
"Gannan Tibetan Autonomous Prefecture"
]
},
{
"label": "青海",
"value": "青海",
"label_en": "Qinghai",
"children": [
"西宁",
"海东",
"海北",
"黄南",
"海南",
"果洛",
"玉树",
"海西"
],
"children_en": [
"Xining",
"Haidong",
"Haibei Tibetan Autonomous Prefecture",
"Huangnan Tibetan Autonomous Prefecture",
"Hainan Tibetan Autonomous Prefecture",
"Guoluo Tibetan Autonomous Prefecture",
"Yushu Tibetan Autonomous Prefecture",
"Haixi Mongol-Tibetan Autonomous Prefecture"
]
},
{
"label": "宁夏",
"value": "宁夏",
"label_en": "Ningxia",
"children": [
"银川",
"石嘴山",
"吴忠",
"固原",
"中卫"
],
"children_en": [
"Yinchuan",
"Shizuishan",
"Wuzhong",
"Guyuan",
"Zhongwei"
]
},
{
"label": "**",
"value": "**",
"label_en": "Xinjiang",
"children": [
"乌鲁木齐",
"克拉玛依",
"吐鲁番",
"哈密",
"昌吉",
"博尔塔拉",
"巴音郭楞",
"阿克苏",
"克孜勒苏",
"喀什",
"和田",
"伊犁",
"塔城",
"阿勒泰",
"石河子",
"阿拉尔",
"图木舒克",
"五家渠",
"北屯"
],
"children_en": [
"Urumqi",
"Karamay",
"Turpan",
"Hami",
"Changji Hui Autonomous Prefecture",
"Bortala Mongol Autonomous Prefecture",
"Bayingolin Mongol Autonomous Prefecture",
"Aksu",
"Kizilsu Kirgiz Autonomous Prefecture",
"Kashi",
"Hotan",
"Ili Kazakh Autonomous Prefecture",
"Tacheng",
"Altay",
"Shihezi",
"Alar",
"Tumsuk",
"Wujiaqu",
"Beitun"
]
},
{
"label": "**",
"value": "**",
"label_en": "Taiwan",
"children": [
"台北市",
"高雄市",
"基隆市",
"台中市",
"台南市",
"新竹市",
"嘉义市",
"台北县",
"宜兰县",
"桃园县",
"新竹县",
"苗栗县",
"台中县",
"彰化县",
"南投县",
"云林县",
"嘉义县",
"台南县",
"高雄县",
"屏东县",
"台东县",
"花莲县",
"澎湖县"
],
"children_en": [
"Taipei City",
"Kaohsiung City",
"Keelung City",
"Taichung City",
"Tainan City",
"Hsinchu City",
"Chiayi City",
"Taipei County",
"Ilan County",
"Taoyuan County",
"Hsinchu County",
"Miaoli County",
"Taichung County",
"Changhwa County",
"Nantou County",
"Yunnlin County",
"Chiayi County",
"Tainan County",
"Kaohsiung County",
"Pingtung County",
"Taitung County",
"Hualian County",
"Penghu County"
]
},
{
"label": "香港",
"value": "香港",
"label_en": "Hongkong SAR",
"children": [
"中西区",
"东区",
"九龙城区",
"观塘区",
"南区",
"深水埗区",
"黄大仙区",
"湾仔区",
"油尖旺区",
"离岛区",
"葵青区",
"北区",
"西贡区",
"沙田区",
"屯门区",
"大埔区",
"荃湾区",
"元朗区"
],
"children_en": [
"NaN",
"NaN",
"NaN",
"NaN",
"NaN",
"NaN",
"NaN",
"NaN",
"NaN",
"NaN",
"NaN",
"NaN",
"NaN",
"NaN",
"NaN",
"NaN",
"NaN",
"NaN"
]
},
{
"label": "澳门",
"value": "澳门",
"label_en": "Macao SAR",
"children": [
"花地玛堂区",
"圣安多尼堂区",
"大堂区",
"望德堂区",
"风顺堂区",
"氹仔",
"路环"
],
"children_en": [
"NaN",
"NaN",
"NaN",
"NaN",
"NaN",
"NaN",
"NaN"
]
}
]
}
}举一反三，从抽奖计步器中抽象出一个方法 runtowalk，解决此类问题
在日常开发中常碰到抽奖类的需求，如“九宫格”，“翻牌”等以循环计步最后减速落在某一位置的形式。
此类问题可形象的模拟为一段跑步，加速-匀速-减速，这里简化为匀速-减速模式。
曲线方程大致为：
我的设想为，横坐标代表步数，纵坐标代表从当前落脚点到下一个落脚点所花的时间(ms)。
初始时间设为100ms，终点设为1100ms(方便计算)，拐点从距离终点5步开始。
设常量总步数为 k。
所得方程为 y = 40 * (x - (k - 5)) ** 2
function 参数有 total、start、stop、loop、cb
total 是代表跑完一圈需要多少步，比如九宫格去掉中间的按钮就是8。
start 是开始的落脚点，设置这个参数是因为多次抽奖需从上一次抽奖的落脚点开始。
stop 是结束的落脚点。
loop 是需要循环的次数。
cb 是一个回调函数，参数为每次的计步点，比如 total 为 8，参数每次返回就是 1 2 3 4 5 6 7 8 1 2 3...
实现为：
function runtowalk({ total, start, stop, loop, cb }) {
return new Promise((resolve, reject) => {
var step = total - start + total * loop + stop;
var foot = 1;
function y(x, k) {
return 40 * (x - k + 5) ** 2;
}
// 运行匿名函数，接收 callee
(function () {
cb(((foot - 1 + start - 1 + total) % total) + 1);
var time = foot > step - 5 ? y(foot, step) : 100;
if (foot <= step) {
foot++;
setTimeout(arguments.callee, time);
} else {
resolve(((foot - 1 + start - 1 + total) % total) + 1);
}
})();
});
}其中 step 为所需要的总步数，function y 是减速函数。
例(html)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>抽奖计步器</title>
<style>
table {
width: 600px;
height: 600px;
}
td {
width: 30%;
text-align: center;
}
.active {
background-color: #ccc;
}
</style>
<script src="https://file.eefcdn.com/campaign/eefocus/js/jquery.min.js"></script>
</head>
<body>
<table border="1">
<tr>
<td class="step step1">1</td>
<td class="step step2">2</td>
<td class="step step3">3</td>
</tr>
<tr>
<td class="step step8">8</td>
<td id="start">开始</td>
<td class="step step4">4</td>
</tr>
<tr>
<td class="step step7">7</td>
<td class="step step6">6</td>
<td class="step step5">5</td>
</tr>
</table>
<script>
function runtowalk({ total, start, stop, loop, cb }) {
return new Promise((resolve, reject) => {
var step = total - start + total * loop + stop;
var foot = 1;
function y(x, k) {
return 40 * (x - k + 5) ** 2;
}
// 运行匿名函数，接收 callee
(function () {
cb(((foot - 1 + start - 1 + total) % total) + 1);
var time = foot > step - 5 ? y(foot, step) : 100;
if (foot <= step) {
foot++;
setTimeout(arguments.callee, time);
} else {
resolve(((foot - 1 + start - 1 + total) % total) + 1);
}
})();
});
}
var start = 1;
$("#start").on("click", function () {
var stop = Math.ceil(Math.random() * 8);
console.log("stop", stop);
runtowalk({
total: 8,
start: start,
stop: stop,
loop: 2,
cb(a) {
console.log(a);
$(".step").removeClass("active");
$(".step" + a).addClass("active");
},
}).then((end) => {
start = end;
});
});
</script>
</body>
</html>jQuery 实现HTML标签的转义、反转义
转义
var html = "<div><p>Hello, World!</p></div>";
$("<div>").text(html).html();
// 输出 "<div><p>Hello, World!</p></div>"
反转义
var text = "<div><p>Hello, World!</p></div>";
$("<div>").html(text).text();
// 输出 <div><p>Hello, World!</p></div>
常用正则验证
手机号：/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
邮箱：/^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/
身份证号：/^\d{17}[0-9xX]$/
统一社会信用代码：/^[0-9A-Z]{2}\d{6}[0-9A-Z]{10}$/
url地址：/^(http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?$/
eefocus 阿里云cdn静态私有库
jQuery 1.8.3 版本
https://file.eefcdn.com/campaign/eefocus/js/jquery.min.js
创建表单，已修改addEventListener
https://file.eefcdn.com/campaign/eefocus/js/lead-iframe.js
完善资料
https://file.eefcdn.com/campaign/eefocus/js/fill-info.js
滚动文字
https://file.eefcdn.com/campaign/eefocus/js/scroll-word.js
用法
<ul id="lottery-list">
<template v-if="lotteryList.length">
<li v-for="(item, i) in lotteryList" :key="i">
<span>@{{ item.name }}</span>
<span>获得</span>
<span>@{{ item.prize }}</span>
</li>
</template>
<template v-else>
<li style="justify-content: center;">无中奖数据</li>
</template>
</ul>if ($("#lottery-list li").length > 10) {
new ScrollWord("lottery-list");
}弹窗插件
https://file.eefcdn.com/campaign/eefocus/js/pop.min.js
视频插件(少用)
https://file.eefcdn.com/campaign/eefocus/css/video.min.css
https://file.eefcdn.com/campaign/eefocus/js/video.min.js
swiper3 最后一个稳定版本
https://file.eefcdn.com/campaign/eefocus/css/swiper3.last.css
https://file.eefcdn.com/campaign/eefocus/js/swiper3.last.js
文档：https://3.swiper.com.cn/api/index.html
https://file.eefcdn.com/campaign/eefocus/js/slick.min.js
https://file.eefcdn.com/campaign/eefocus/js/jquery.rotate.js
Vue 2.0
https://file.eefcdn.com/campaign/eefocus/js/vue.min.js
https://file.eefcdn.com/campaign/eefocus/js/babel.min.js
浏览器补丁（Promise...）
https://file.eefcdn.com/campaign/eefocus/js/browser.min.js
https://file.eefcdn.com/campaign/eefocus/js/browser-polyfill.js
https://file.eefcdn.com/campaign/eefocus/css/element-ui.css
https://file.eefcdn.com/campaign/eefocus/js/element-ui.js
https://file.eefcdn.com/campaign/eefocus/js/react.min.js
https://file.eefcdn.com/campaign/eefocus/js/react-dom.min.js
https://file.eefcdn.com/campaign/eefocus/css/bootstrap.min.css
https://file.eefcdn.com/campaign/eefocus/js/bootstrap.min.js
Github Issues 结合 GitHub Pages 做博客系统
首先配置好GitHub Pages，也就是常见的xxx.github.io，用不用个性域名都可。
用Vue构建页面，通过api.github.com 提供的接口调用渲染仓库的issues列表、详情、个人信息、label等等。
最后将build完成的页面提交到xxx.github.io仓库。
完成！
参考www.douchaoyang.com
源码地址
NProgress 自定义样式(本站使用)
#nprogress {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 2233;
background: rgba(255, 255, 255, 0.6);
}
#nprogress .bar {
position: absolute;
z-index: 1;
background: #0076ff;
}
#nprogress .spinner {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
width: 18px;
height: 18px;
}
#nprogress .spinner .spinner-icon {
border-left-color: #0076ff;
border-top-color: #0076ff;
}如果会话被锁定会怎么样呢？
实践是检验真理的唯一标准。
3D 区
26RegionSFM、3DWick、Arti202、Auxtasy、Aphy3D、Audiocake、Affect3D、AKT、AWSL3D、AANiX、AkiyamaRyo、AlenAbyss、Aline_EN、AlmightyPatty、anielszal、AliceCry、AyyTeeThreeDee、Alesslo、ALLFs3D、anosluz、Amusteven、Almond、Axcell、ArawAraw、Arhoangel、Atelier Yakoh、Anaru、Axel3D、 AmbrosineSFM、Axen、Ananasjk_r6、Bewyx、blackjr、BARONSTRAP、Bob Volskiy、blueberg、Bayern3D、Bandoned、Bouquetman、Bulging Senpai、beanis、 bulgemeister、Beastlyjoe、Blenderknight、Boombadaboomsfm、BaronStrap、Coot27、Citrus、cakeofcakes、Cheerax、Cyrusfm、Crisisbeat、Croove、cawneil、Coombot、Desire Reality、dizzy3D、Dezmall、DisckoA、DomSfm、Darkholestuff、Darellak、Darklust、DomSfm、DevilsCry、Davesterie、Dreamrider、DopplerNSFW、Dewardenart、DeeSee3D、DEPRAVAL、dzooworks、Drills3D、Dragk、dnnsfw、Elferan、ElRecondite、EadOle、Exarch、EXGA、Exprational、Echiee、FatCat17、Fjaye、ForceballFx、Firebox Studio、FINAL FUCK 7、Forged3DX、 Fluffy Pokemon、Fennochik、FPSBlyck、Fugtrup、Faith Bell、Frolich、Futaholic、GnomFist、ghoulishxxx、G_β、Gurobase、 Great Ojama、Guilty3D、 Glory_to_god、Grand Cupido、GlazedKnuckle、Greatm8、Gifdoozer、gamingarzia、Gama、Geckoscave、Guiltyk、HydraFXX、horizontalslope、Hazard3000、Hotstuff、HC、Hv54rdsl、IceDev、Idemiiam、ItaLessio、Its-gergless、Jared999d、Junkerz、JeridOiso、JuicyNeko、Jessicat、jos_Bobot、JygreAnimation、JeffHell、Juggernut、KreiSake、KaieVie、Kinkycat3d、Kallenz、KeeperSleepy、King Estefano、 kinkivas、Kanker、KISX、Kamadeva、Kaeg Antonovich、Kek-Si、keyd10iori、KaminaKirei、Kadwyn、Lerico213、Lesdias、LazyProcrast、ItaLessio、LazySoba、Icky Sticky、Lieutenant Flapjack、Lvl3Toaster、Lewy、 Lord Aardvark、Lewdgazer、Laosduude、LM19、 Leitekken、Lucislab、LewdHyl、Likkezg、MeltRib、MaFaVaM、Maiden Masher、MEGAERA、milkytabbo、MMMY、Mellewd、Mmj3DX、moneyshot、Mokujin、MagMallow、mona、Misthios Arc、Mac23、Midnightnsfw、MrRed1、mrlolzies101、MyH3D、naifu、Nagoonimation、Nyl、Nillin、Nyanify、Nightingale、nikea、nikovako、Nyx34x、Nessfm、NoCure、Nsfwseeker77、Nodu、NullStudio、Naixxier、Niisath、Nappana、NuBottle、NLsoft、opiumud、Oreo、OC Boon、OnagiHanzo、Oscarkim123、polished-jade-bell、PangXXX、PMMSFM、Pewposterous、PockYin、Puuguy、pantsushi、Pawgpatrol、QOC、Ropeboundart、Ronin-Jelly、Rekin3D 、RenzukiHarai、r4mpage、RapidBanana、r34fantasy、Rastafarian、Rescraft、SageOfOsiris、Salsen、studioFOW、Sessho3D、SavageCabbage、SaveAss、Shark100、ShiroHanSan、SelfDrillingMS、SFMPOV、SfmTessai、Shark3D、ShidoSan3d、Sierpien、Shir0qq、Shirakami、Soba、Swurst Erotic、SlayerM8、Spizzy、SpokStuff、sus-3d、Sandwichmoth、SPLucky、sanmie、Secazz、scarecraw、Sickdude、Susurim、Setarcos04、SFMnewbie、SFMStudio、Sariken、SinlessCelery、ShadyLewds、shweeeisfm、STALKEK、Tetra、Tyviania、Trahao、tiaz-3dx、The Rope Dude、Timpossible、TheCount、The Hounde、TracerBlogFun、ToonE、TheGWorks、Thenaysayer34、Taka84、texelnaut、Tumtumisu、ToastedMicrowave、The Firebrand、The Fastest Gman、VGerotica、vranimeted、ViceR34、Vicineko、Voila5D、VRWaifuDelivery、vulpeculy、Weagogo、WGQHS、WhimsyGhost、Wanksy、Wildeer、whalechampion、Wutboi、XORDEL、yeero、Youngiesed、YuukiS、zmsfm
iOS Ninja 免费下载 ipa 文件
广告系统中加载HTML片段广告(可包含外部js引用)或加载iframe广告的方法
在广告系统设计中，其中有一种类型来自于自定义的HTML片段。
或者是第三方提供的一个HTML片段，大多数时候还包含外部js的引用。
针对此类广告，实现以下加载方式，mock的数据格式如下。
其中 key 为广告锚点元素的id，value中定义了广告的宽高、是否可iframe加载，HTML片段的代码。
此结构仅为示例，可后期扩展与调整。
{
id: {
width,
height,
iframeFriendly,
html
}
}渲染的模块示例。
window.Advertisment = (function () {
/*
{
id: {
width,
height,
iframeFriendly,
html
}
}
*/
function createFrame(option) {
var e = document.createElement("IFRAME");
var g = e.style;
e.scrolling = "no";
e.frameBorder = 0;
e.width = option.width > 0 ? option.width : 0;
e.height = option.height > 0 ? option.height : 0;
g.border = 0;
g.overflow = "hidden";
return e;
}
function loadFrame(frame, content) {
var doc = frame.contentDocument || frame.contentWindow.document;
doc.open();
doc.writeln("<!DOCTYPE html>");
doc.writeln("<html>");
doc.writeln('<head><base target="_top"></head>');
doc.writeln('<body border="0" margin="0" style="margin: 0; padding: 0">');
doc.writeln(content);
doc.writeln("</body>");
doc.writeln("</html>");
doc.close();
}
function init(elements) {
for (var id in elements) {
if (elements.hasOwnProperty(id)) {
var option = elements[id];
var element = document.getElementById(id);
if (element) {
var ins = document.createElement("INS");
if (option.iframeFriendly) {
var frame = createFrame(option);
ins.appendChild(frame);
element.parentNode.replaceChild(ins, element);
loadFrame(frame, option.html);
} else {
ins.innerHTML = option.html;
var scripts = ins.getElementsByTagName("SCRIPT");
for (var i = 0; i < scripts.length; i++) {
var script = document.createElement("SCRIPT");
var attrs = scripts[i].attributes;
for (var j = 0; j < attrs.length; j++) {
script[attrs[j].nodeName] = attrs[j].value;
}
if (scripts[i].innerHTML) {
script.text = scripts[i].innerHTML;
}
scripts[i].parentNode.replaceChild(script, scripts[i]);
}
element.parentNode.replaceChild(ins, element);
}
}
}
}
}
return {
init: init,
};
})();锚点示例。
<ins id="revive-0-0"></ins>数据示例，可设计为接口异步加载。
var data = {
"revive-0-0": {
html: "your html code here",
width: "970",
height: "90",
iframeFriendly: false,
}
};调用方法。
window.Advertisment.init(data);防抖与节流
1、什么是防抖与节流？
节流：通俗的讲就是拧紧水龙头让水少流一点，但是不是不让水流了。想象一下在现实生活中有时候我们需要接一桶水，接水的同时不想一直站在那等着，可能要离开一会去干一点别的事请，让水差不多流满一桶水的时候再回来，这个时候，不能把水龙头开的太大，不然还没回来水就已经满了，浪费了好多水，这时候就需要节流，让自己回来的时候水差不多满了。那在JS里有没有这种情况呢？典型的场景是监听页面的scroll事件，或者监听鼠标的mousemove事件，这些事件对应的处理方法相当于水，由于scroll和mousemove在鼠标移动的时候会被浏览器频繁的触发，会导致对应的事件也会被频繁的触发（水流的太快了），这样就会造成很大的浏览器资源开销，而且好多中间的处理是不必要的，这样就会造成浏览器卡顿的现象，这时候就需要节流，如何节流呢？我们无法做到让浏览器不去触发对应的事件，但是可以做到让处理事件的方法执行频率减少，从而减少对应的处理开销。
防抖：最早接触这个词应该是在高中物理里面学到的，有时候开关在真正闭合之前可能会发生一些抖动现象，如果抖动的明显的话，对应的小灯泡可能会闪烁，把灯泡闪坏了不重要，万一把眼睛再给闪坏了可就麻烦了，这个时候就有去抖电路的出现。而在我们的页面里，也有这种情况，假设我们的一个输入框，输入内容的同时可能会去后台查询对应的联想词，如果用户输入的同时，频繁的触发input事件，然后频繁的向后台发送请求，那么直到用户输入完成时，之前的请求都应该是多余的，假设网络慢一点，后台返回的数据比较慢，那么显示的联想词可能会出现频繁的变换，直到最后的一个请求返回。这个时候就可以在一定时间内监听是否再次输入，如果没有再次输入则认为本次输入完成，发送请求，否则就是判定用户仍在输入，不发送请求。
2、实例
假设页面有一个返回顶部的按钮，我们的需求是:"监听浏览器滚动事件，返回当前滚动条与顶部的距离"
function showTop() {
const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
console.log('滚动条位置：' + scrollTop);
}
window.onscroll = showTop在运行的时候会发现存在一个问题：这个函数的默认执行频率太高了！高到什么程度呢？以chrome为例，我们可以点击选中一个页面的滚动条，然后点击一次键盘的【向下方向键】，会发现函数执行了8-9次！
防抖
基于上述场景，首先提出第一种思路：在第一次触发事件时，不立即执行函数，而是给出一个期限值比如200ms，然后：
- 如果在200ms内没有再次触发滚动事件，那么就执行函数
- 如果在200ms内再次触发滚动事件，那么当前的计时取消，重新开始计时
效果：如果短时间内大量触发同一事件，只会执行一次函数。
实现：既然前面都提到了计时，那实现的关键就在于setTimeout这个函数，由于还需要一个变量来保存计时，考虑维护全局纯净，可以借助闭包来实现：
/*
* fn [function] 需要防抖的函数
* delay [number] 毫秒，防抖期限值
*/
function debounce(fn,delay){
let timer = null //借助闭包
return function() {
if(timer){
clearTimeout(timer) //进入该分支语句，说明当前正在一个计时过程中，并且又触发了相同事件。所以要取消当前的计时，重新开始计时
}
timer = setTimeout(fn,delay)
}
}
function showTop () {
const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
console.log('滚动条位置：' + scrollTop);
}
window.onscroll = debounce(showTop,3000) // 为了方便观察效果我们取个大点的间断值，实际使用根据需要来配置此时会发现，必须在停止滚动3秒以后，才会打印出滚动条位置。到这里，已经把防抖实现了，现在给出定义：
- 对于短时间内连续触发的事件（上面的滚动事件），防抖的含义就是让某个时间期限（如上面的3000毫秒）内，事件处理函数只执行一次。
节流
继续思考，使用上面的防抖方案来处理问题的结果是：
- 如果在限定时间段内，不断触发滚动事件（比如某个用户闲着无聊，按住滚动不断的拖来拖去），只要不停止触发，理论上就永远不会输出当前距离顶部的距离。
- 但是如果产品同学的期望处理方案是：即使用户不断拖动滚动条，也能在某个时间间隔之后给出反馈呢？
其实很简单：我们可以设计一种类似控制阀门一样定期开放的函数，也就是让函数执行一次后，在某个时间段内暂时失效，过了这段时间后再重新激活（类似于技能冷却时间）。
效果：如果短时间内大量触发同一事件，那么在函数执行一次之后，该函数在指定的时间期限内不再工作，直至过了这段时间才重新生效。
实现：这里借助setTimeout来做一个简单的实现，加上一个状态位valid来表示当前函数是否处于工作状态：
function throttle(fn,delay){
let valid = true
return function() {
if(!valid){
//休息时间 暂不工作
return false
}
// 工作时间，执行函数并且在间隔期内把状态位设为无效
valid = false
setTimeout(() => {
fn()
valid = true;
}, delay)
}
}
/* 请注意，节流函数并不止上面这种实现方案,
例如可以完全不借助setTimeout，可以把状态位换成时间戳，然后利用时间戳差值是否大于指定间隔时间来做判定。
也可以直接将setTimeout的返回的标记当做判断条件-判断当前定时器是否存在，如果存在表示还在冷却，并且在执行fn之后消除定时器表示激活，原理都一样
*/
// 以下照旧
function showTop () {
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
console.log('滚动条位置：' + scrollTop);
}
window.onscroll = throttle(showTop,1000) - 如果一直拖着滚动条进行滚动，那么会以1s的时间间隔，持续输出当前位置和顶部的距离
3、其他应用场景举例
讲完了这两个技巧，下面介绍一下平时开发中常遇到的场景：
- 搜索框input事件，例如要支持输入实时搜索可以使用节流方案（间隔一段时间就必须查询相关内容），或者实现输入间隔大于某个值（如500ms），就当做用户输入完成，然后开始搜索，具体使用哪种方案要看业务需求。
- 页面resize事件，常见于需要做页面适配的时候。需要根据最终呈现的页面情况进行dom渲染（这种情形一般是使用防抖，因为只需要判断最后一次的变化情况）
文字展开“查看更多”按钮浮动案例
形如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>test</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
display: flex;
line-height: 24px;
font-size: 16px;
display: flex;
}
.box > div {
max-height: 72px;
overflow: hidden;
}
.box > div > a {
float: right;
height: 24px;
line-height: 24px;
font-weight: bold;
margin-left: 12px;
clear: both;
}
.box > div:before {
float: right;
height: 48px;
content: "";
}
</style>
</head>
<body>
<div class="box">
<div>
<a>查看更多</a>
<p>
STM32峰会已成功举办六届，作为业界年度盛会，我们汇集了众多全球生态合作伙伴，带来基于STM32创新的嵌入式解决方案及各类终端产品。
“STM32 不止于芯”
是2023年STM32峰会的活动主题，旨在展示意法半导体多样化的产品和解决方案，为工程师们提供亲身体验意法半导体产品及方案的平台。在为期两天的峰会中，我们围绕边缘人工智能，连接，信息安全，生态系统与开发者优先计划四个领域开展涵盖主论坛、分论坛、技术研讨会、以及丰富多彩的Demo演示。与会者面对面近距离参观体验，还能亲身动手操作，深入了解到基于ST及合作伙伴最新的嵌入式技术、产品、以及工具。
峰会第二天，STM32粉丝狂欢节开放了超十款技术性十足的游戏，让与会者在有趣有料的互动活动中体验STM32的魅力！
</p>
</div>
</div>
</body>
</html>Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.